Jump to content

performance on my js script


M.O.S. Studios

Recommended Posts

Hey guys,

    So this is my problem. I basically have 2 scripts running. one controls a video (through quicktime plug in) and the second controls a menu. The script that controls the menu does animation. When the movie and the menu animation run at the same time, the menu animation moves to a crawl. no idea how to fix this

 

Here is my code

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd" 
    >
<html lang="en">
<head>
<script type="text/javascript">
		var episodes = [
		['Redavenger and Friends',
			[
				['Episode 0', 27, 4, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 1', 27, 36, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 2', 27, 24, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 3', 27, 14, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 4', 27, 10, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 5', 27, 40, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 6', 27, 78, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 7', 27, 64, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet']
			]
		],
		['Season 0',
			[
				['Episode 8', 27, 4, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 9', 27, 84, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 10', 27, 82, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 11', 27, 50, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 12', 27, 88, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 13', 27, 56, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 14', 27, 50, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet'],
				['Episode 15', 27, 68, 12, 'Hero1.jpg', 'lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet']
			]			]
	];
// functions

function isArray(obj){
	return Object.prototype.toString.apply(obj) === '[object Array]';
}



// prototypes
String.prototype.divs = function(insert){
	if(typeof insert != 'undefined'){insert = " "+insert+" ";}else{insert = "";}
	return '<div'+insert+'>' + this + '</div>';
}

String.prototype.img = function(src, insert){
	if(typeof insert != 'undefined'){insert = " "+insert+" ";}else{insert = "";}
	if(typeof src != 'undefined')
	return "<img src='" + this + "'"+ insert +">";
}

Number.prototype.pad = function(){
	if(this < 10){return '0' + this;}
	return this;
}

//MENU FILL

menu = new Object();
menu.season = function(){
	var finalMenu="";
	var item="";
	for(var z=0; z<episodes.length; z++){
		if(episodes[z][0]!==null){
			finalMenu += episodes[z][0].divs('onClick="if(scrolling.process == false){scrolling.process = true;scrolling.start(1, \'Menu\', 15, \'x\', '+z+');}"');
		}
	}
	document.getElementById('Menu').scrollLeft = 0;
	document.getElementById('Menu').scrollTop = 0;

	document.getElementById('Seasons').innerHTML = finalMenu;
	return null;
}
menu.episodes = function(sidebar){
	var theObject ="";
	var finalDiv ="";
	var item ="";
	var currentDiv ="";
	var container ="";
	var container2 ="";
	if(typeof sidebar != 'undefined'){
		for(var m = 0; m < episodes[sidebar][1].length; ++m){
			theObject = episodes[sidebar][1][m];
			if(theObject){
				item = "".toString().divs("class='image' style='background-image: url("+theObject[4]+");'")+'\n';
				container = theObject[0].toString().divs("class='episodeTitle'")+'\n';
				container += new String('Views: '+theObject[1]+' / Votes:'+theObject[3]).divs("class='views'")+'\n';
				container += "".divs("class='rating' style='width: "+theObject[2]+"px;'").divs("class='score'")+'\n';
				container2 = "PLAY".divs("class='item_options' style='background: left center no-repeat url(play.png);'");
				container2 += "MOREINFO".divs('class="item_options" style="background: left center no-repeat url(more.png);" onclick="if(scrolling.process == false){scrolling.process = true; scrolling.start(2, \'Menu\', 15, \'x\', undefined, \''+theObject.concat(sidebar)+'\');}"');
				container2 += "PLAYLIST".divs("class='item_options' style='background: left center no-repeat url(add.png);'");
				item += container.divs("class='container'") +  container2.divs("class='container2'") ;
				finalDiv += item.divs("class='episode'");
			}

		}
		document.getElementById('Episodelist').innerHTML = finalDiv;
	}
	return finalDiv;
}
menu.details = function(theObject){
	var finalDiv;
	var header;
	var description;
	theObject = theObject.split(',')
	if(theObject){
		header = theObject[0].divs("class='episode_title'") + "\n";
		header += episodes[theObject[6]][0].divs("class='episode_season'") + "\n";
		header += "".divs("class='rating' style='width: "+theObject[2]+"px;'").divs("class='score'")+'\n';
		header = ("<img src='"+theObject[4]+"' alt=''>" + "\n" + header.divs("class='episode_info'") + "\n").divs("class='header'")+'\n';
		description = theObject[5].divs("Class='episode_description'")+"\n";
		options = "".divs("class='button' style='background: url(play2.png); float:left;'") + "".divs("class='button' style='background: url(add2.png); float:right;'");
		finalDiv = header+description+options.divs("class='container'");
	}

	document.getElementById('episodeDetail').innerHTML = finalDiv;
	return null;
}
menu.storedSizes = new Array();
menu.divSize = function(divId, direction){
	var theDiv = document.getElementById(divId);
	var divSize = null;
		function borderSize(){
			if(!menu.storedSizes[divId] || !menu.storedSizes[divId][direction]){
				var num=function(pstrSource){
					pstrSource = new String(pstrSource); 
					pstrSource = pstrSource.replace(/[^0-9]/g, '');
					if(pstrSource === ''){pstrSource = 0;}
					return parseFloat(pstrSource); 
				}

				var sideOne = 'border-top-width';
				var sideTwo = 'border-bottom-width';
				var sideThree = 'borderTopWidth';
				var sideFour = 'borderBottomWidth';

				if(direction != 'y' || 'Y'){
					sideOne = 'border-right-width';
					sideTwo = 'border-left-width';
					sideThree = 'borderRightWidth';
					sideFour = 'borderLeftWidth'; 
				}

				var value1;
				var value2;
				var value3;
				var value4;
				var y = null;

				if(theDiv.currentStyle){
					value1 = num(theDiv.currentStyle[sideTwo])+num(theDiv.currentStyle[sideOne]);
					value2 = num(theDiv.currentStyle[sideThree])+num(theDiv.currentStyle[sideFour]);
				}
				if(window.getComputedStyle){
					value3 = num(document.defaultView.getComputedStyle(theDiv,null).getPropertyValue(sideTwo))+num(document.defaultView.getComputedStyle(theDiv,null).getPropertyValue(sideOne));
					value4 = num(document.defaultView.getComputedStyle(theDiv,null).getPropertyValue(sideThree))+num(document.defaultView.getComputedStyle(theDiv,null).getPropertyValue(sideFour));
				}

				y = Array(value1, value2, value3, value4);
				y.sort(function(a, b){return b-a});
				if(!isArray(menu.storedSizes[divId])){ menu.storedSizes[divId] = Array();}
				menu.storedSizes[divId][direction] = y[0].toString();
			}
		return menu.storedSizes[divId][direction];
	}

	if(direction == 'x' || direction == 'X'){
		divSize = theDiv.offsetWidth - borderSize();
	}else{
		divSize = theDiv.offsetHeight - borderSize();
	}

	return divSize;
}

scrolling = new Object();
scrolling.start = function(distance, divId, speed, direction, season, episode){
	var divStart;
	var theDiv = document.getElementById(divId);
	var distanceStart = document.getElementById('Menu').scrollLeft;
	if(typeof season != 'undefined' && typeof season != 'null'){menu.episodes(season);}
	if(typeof episode != 'undefined'){menu.details(episode);}
	animation = function(){
		if(direction == 'x' || direction == 'X'){
			divStart = theDiv.scrollLeft;
			if(divStart > distance){theDiv.scrollLeft -= 1;}
			if(divStart < distance){theDiv.scrollLeft += 1;}
		}else{
			divStart = theDiv.scrollTop;
			if(divStart > distance){theDiv.scrollTop -= 1;}
			if(divStart < distance){theDiv.scrollTop += 1;}
		}
		if(divStart == distance || scrolling.lastValue == divStart){
			clearInterval(Timer);
			if(distanceStart == 0 && direction == 'x'){scrolling.fade('back');}else{scrolling.fade('back', 'true');}
			scrolling.process = false;
			scrolling.lastValue = null;
		}else{
			scrolling.lastValue = divStart;
		}
	}

	distance *= menu.divSize(divId, direction);
	Timer = setInterval("animation()", speed);
}
scrolling.process = false;
scrolling.fade = function(id, reverse){
	var value = 0;
	start = function(id, value){
		testObj = document.getElementById(id);
		testObj.style.opacity = value/100;
		testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
		if(value == 100){clearInterval(Timer2);}
	}
	if(reverse != 'true'){Timer2 = setInterval(function(){start(id, ++value)}, 15);}else{value=100;Timer2 = setInterval(function(){start(id, --value)}, 15);}
}

// video controller
time = {hours: 0, mins: 0, secs: 0, state: 'notStarted'}

time.set = function(){
	ss = (document.qtmovie_embed.GetTime() / time.scale);
	time.percent  = Math.round(100 * (ss / time.duration));
	time.hours = Math.round((ss / 3600) - .5);
	time.mins = Math.round(((ss / 60) - .5)-(time.hours * 60));
	time.secs = Math.round(ss-(Math.round((ss/60)-.5)*60));
}

time.update = function(){
	time.set();
	newTime = time.hours.pad() + " : " + time.mins.pad() + " : " + time.secs.pad();
	document.getElementById('pointer').style.width = Math.round(((time.percent/100) * time.inFrames)-.5) + "px";
	document.getElementById('test').innerHTML = newTime;
	document.getElementById('test2').innerHTML = time.duration.pad();
}

function loaded(){
	time.duration = document.qtmovie_embed.GetDuration() / document.qtmovie_embed.GetTimeScale();
	time.scale = document.qtmovie_embed.GetTimeScale();
	time.inFrames = menu.divSize('progresscontainer', 'x');
	var finalTimeLine = "";
	for(var i = 1; i <= time.inFrames; ++i){
		finalTimeLine += "".divs("onclick='scrub("+i+")'")+"\n";
	}
	document.getElementById('timeLine').innerHTML = finalTimeLine;
	time.update();
}

function scrub(div){
	document.qtmovie_embed.SetTime(time.duration * (div / time.inFrames));
	time.update();
}

function progress(){
	time.state = 'Playing';
	Timer3 = setInterval(function(){
			if(time.state != 'Playing'){clearInterval(Timer3);}
			time.update();
	}, 2);
}

function hasStoped(){
	time.state = 'stoped';
}

function volume(higher){
	var current = document.qtmovie_embed.GetVolume();
	if(higher.toLowerCase() == 'up'){
		if((current + 39) >= 256){current = 217;}
		document.qtmovie_embed.SetVolume(current + 39);
	}else{
		if((current - 39)<= 0){current = 39;}
		document.qtmovie_embed.SetVolume(current - 39);
	}
	current = document.qtmovie_embed.GetVolume();
	if(current == 256) {document.getElementById('vol-7').style.backgroundImage = 'url(images/vol_7.png)'}else{document.getElementById('vol-7').style.backgroundImage = 'url(images/emvol_7.png)';}
	if(current >= 217) {document.getElementById('vol-6').style.backgroundImage = 'url(images/vol_6.png)'}else{document.getElementById('vol-6').style.backgroundImage = 'url(images/emvol_6.png)';}
	if(current >= 178) {document.getElementById('vol-5').style.backgroundImage = 'url(images/vol_5.png)'}else{document.getElementById('vol-5').style.backgroundImage = 'url(images/emvol_5.png)';}
	if(current >= 139) {document.getElementById('vol-4').style.backgroundImage = 'url(images/vol_4.png)'}else{document.getElementById('vol-4').style.background = 'none'}
	if(current >= 100) {document.getElementById('vol-3').style.backgroundImage = 'url(images/vol_3.png)'}else{document.getElementById('vol-3').style.background = 'none'}
	if(current >=  61) {document.getElementById('vol-2').style.backgroundImage = 'url(images/vol_2.png)'}else{document.getElementById('vol-2').style.background = 'none'}
	if(current >    0) {document.getElementById('vol-1').style.backgroundImage = 'url(images/vol_1.png)'}else{document.getElementById('vol-1').style.background = 'none'}
	document.getElementById('test3').innerHTML = document.qtmovie_embed.GetVolume().pad();
}

function myAddListener(obj, evt, handler, captures){
	if(!captures){captures=false;}
	if ( document.addEventListener )
		obj.addEventListener(evt, handler, captures);
	else
		obj.attachEvent('on' + evt, handler); // IE requires this form
        }

        function setup(){
            // register for events on the <object> element, our handler will be triggered even if
            //  the browser uses the <embed> because events pass through the parent element
            var plug = document.getElementById('qtmovie_embed');
            if ( null == plug ){
                alert("QT plug-in not instantiated on <body> load event???");
                return;
            }
	loaded();

	myAddListener(plug, 'qt_play', progress);
	myAddListener(plug, 'qt_pause', hasStoped);
	myAddListener(plug, 'qt_ended', hasStoped);
        }

</script>

<style type="text/css">
	.div1{
		width: 60%;
		float: left;
		border: 1px dashed #000000;
	}

	.div2{
		width: 35%;
		float: left;
		border: 1px dashed #000000;
	}

	.menunav{
		background: #da1b1b;
		height: 38px;
		width: 317px;
	}

	.menunav .menutitle{
		width: 90%;
		text-align: left;
		margin: 5px;
		font-family:'Comic Sans MS', 'san sarif', 'Arial';
		font-size:25px;
		font-weight:bold;
		line-height: 38px;
	}

	.screennav{
		background: #da1b1b;
		font-family:'Comic Sans MS', 'san sarif', 'Arial';
		height: 38px;
		width: 317px;
	}

	.screennav .back{
		margin-left:5px;
		opacity: 0;
	}

	.menu{
		position: relative;
		height: 248px;
		width: 307px;
		border: 5px solid #da1b1b;
		overflow: hidden;
	}

	.episodes{
		position: absolute;
		top: 0px;
		left: 307px;
		overflow: hidden;
		height: 248px;
		width: 307px;
	}

	.episodes .episodelist{
		height: 248px;
	}

	.episodes .episodelist .episode{
		height: 62px;
		width: 100%;
		border-bottom: dashed 1px #000000;
		font-size: 8px;
	}

	.episodes .episodelist .episode .image{
		float: left;
		width:71px;
		height:62px;
		background: center no-repeat;
		margin-left: 5px;
		margin-right: 5px;
	}

	.episodes .episodelist .episode .episodeTitle{
		 float: left;
		 width: 100px;
		 text-align: left;
		 font-size: 15px;
	}

	.episodes .episodelist .episode .container{
		width: 100px;
		height: 55px;
		margin-right: 25px;
		overflow: hidden;
		float: left;
	}

	.episodes .episodelist .episode .container2{
		width: 75px;
		margin-top: 7px;
		float: left;
	}

	.episodes .episodelist .episode .container2 .item_options{
		padding-left: 20px;
		margin-bottom: 8px;
		height: 10px;
		line-height: 10px;
		float: left;
		clear: left;
		background: inherit;
	}

	.episodes .episodelist .episode .container .score{
		 float: left;
		 clear: left;
		 margin-left: -2px;
		 height: 20px;
		 width: 100px;
		 background: url(mini-starrating.gif) left top repeat-x;
	}

	.episodes .episodelist .episode .container .score .rating{
		 float: left;
		 height: 20px;
		 width: inherit;
		 background: url(mini-starrating.gif) left center repeat-x;
	}

	.episodes .episodelist .episode .container .views{
		 float: left;
		 clear: left;
		 width: 100px;
	}

	.episodeDetail{
		position: absolute;
		top: 0px;
		left: 614px;
		overflow: hidden;
		height: 248px;
		width: 307px;
	}

	.episodeDetail .header{
		border-bottom: 1px dashed #000000;
		height: 62px;
	}

	.episodeDetail .header .episode_info{
		width: 220px;
		float: right;
	}

	.episodeDetail .header .episode_info .episode_title{
		font-size: 15px;
		font-weight: bold;
	}

	.episodeDetail .header .episode_info .episode_season{
		font-size: 8px;
		margin-bottom: 8px;
	}

	.episodeDetail .header .episode_info  .score{
		 float: left;
		 clear: left;
		 margin-left: -2px;
		 height: 20px;
		 width: 100px;
		 background: url(mini-starrating.gif) left top repeat-x;
	}

	.episodeDetail .header .episode_info .rating{
		 float: left;
		 height: 20px;
		 width: inherit;
		 background: url(mini-starrating.gif) left center repeat-x;
	}


	.episodeDetail .header img{
		margin-top: 5px;
		margin-left: 5px;
		margin-right: 5px;
	}

	.episodeDetail .episode_description{
		margin: 0px 5px 0px 5px;
		height: 135px;
		overflow: hidden;
	}

	.episodeDetail .container{
		width: 110px;
		margin-top: 4px;
		margin-left: auto;
		margin-right: auto;
	}

	.episodeDetail .container .button{
		float: inherit;
		margin-top: -5px;
		height: 48px;
		width: 48px;
	}


	.seasons{
		position: absolute;
		top: 0px;
		left: inherit;
		height: 248px;
		width: 307px;
		text-align: center;
		font-family:'Comic Sans MS', 'san sarif', 'Arial';
		font-size:8px;
		font-weight:bold;
		line-height: 30px;
	}

	.seasons div{
		border-bottom:1px dashed #000000;
	}

	.seasons div:hover, .episodes .episodelist div:hover{
		background: #fcff01;
	}

/* controlls */

	.progresscontainer{
		position: absolute;
		width:448px;
		height:42px;
		left:99px;
		top:5px;
		background: url(images/progressbar.png) repeat-x;
	}
	.timeline{
		height: 42px;
		width: 100%;
		position: relative;
	}

	.timeline div{
		width: 1px;
		height: 42px;
		float: left;
	}

	.pointer{
		position: absolute;
		top: 0px;
		width: 1px;
		height: 42px;
		background: url(images/loadedprogressbar.png) repeat-x;
	}

	.controllbar {
		position: relative;
		width:644px;
		height: 67px;
	}

	.controllbar .stop {
		background: url(images/stop.png) no-repeat;
		position:absolute;
		left:0px;
		top:0px;
		width:46px;
		height:47px;
	}

	.controllbar .play {
		background: url(images/play.png) no-repeat;
		position:absolute;
		left:46px;
		top:0px;
		width:40px;
		height:47px;
	}

	.controllbar .frameleft {
		background: url(images/frameleft.png) no-repeat;
		position:absolute;
		left:86px;
		top:0px;
		width:13px;
		height:47px;
	}

	.controllbar .frametop {
		background: url(images/frametop.png) no-repeat;
		position:absolute;
		left:99px;
		top:0px;
		width:455px;
		height:5px;
	}

	.controllbar .pause {
		background: url(images/pause.png) no-repeat;
		position:absolute;
		left:554px;
		top:0px;
		width:45px;
		height:47px;
	}

	.controllbar .vol_plus {
		background: url(images/vol_plus.png) no-repeat;
		position:absolute;
		left:599px;
		top:0px;
		width:45px;
		height:24px;
	}

	.controllbar .frameright {
		background: url(images/frameright.png) no-repeat;
		position:absolute;
		left:547px;
		top:5px;
		width:7px;
		height:42px;
	}

	.controllbar .vol-7 {
		background: url(images/vol_7.png) no-repeat;
		position:absolute;
		left:599px;
		top:24px;
		width:45px;
		height:4px;
	}

	.controllbar .vol-6 {
		background: url(images/vol_6.png) no-repeat;
		position:absolute;
		left:599px;
		top:28px;
		width:45px;
		height:3px;
	}

	.controllbar .vol-5 {
		background: url(images/vol_5.png) no-repeat;
		position:absolute;
		left:599px;
		top:31px;
		width:45px;
		height:3px;
	}

	.controllbar .vol-4 {
		background: url(images/vol_4.png) no-repeat;
		position:absolute;
		left:599px;
		top:34px;
		width:45px;
		height:3px;
	}

	.controllbar .vol-3 {
		background: url(images/vol_3.png) no-repeat;
		position:absolute;
		left:599px;
		top:37px;
		width:45px;
		height:3px;
	}

	.controllbar .vol-2 {
		background: url(images/vol_2.png) no-repeat;
		position:absolute;
		left:599px;
		top:40px;
		width:45px;
		height:3px;
	}

	.controllbar .vol-1 {
		background: url(images/vol_1.png) no-repeat;
		position:absolute;
		left:599px;
		top:43px;
		width:45px;
		height:3px;
	}

	.controllbar .vol_minus {
		background: url(images/vol_minus.png) no-repeat;
		position:absolute;
		left:599px;
		top:46px;
		width:45px;
		height:21px;
	}

	.controllbar .framebottom {
		background: url(images/framebottom.png) no-repeat;
		position:absolute;
		left:0px;
		top:47px;
		width:599px;
		height:20px;
	}
/* playlist */

	.playlist{
		width: 100%;
		height: 80px;
		border: 1px dashed #000000;
		float: left;
	}

	.playlist .option{
		width: 70px;
		height: 70px;
		margin-top: 4px;
		margin-left: 10px;
		float: left;
		border: 1px dashed #000000;
	}

</style>
    <title><!-- Insert your title here --></title>
</head>
<body onLoad='menu.season();setup();'>
<div class='div1'>
    <!--[if IE]><object id="qt_event_source" classid="clsid:CB927D12-4FF7-4a9e-A169-56E4B8A75598"></object><![endif]-->

    <object width="644" height="346" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"
                id="qtmovie_embed" style="behavior:url('#qt_event_source');" >
       <param name="src" value="/redavenger/admin/upload/episodes/season0/hatecrime.mov">
       <param name="autoplay" value="false">
       <param name="controller" value="false">
       <param name="postdomevents" value="true">
       <param name="name" value="qtmovie_embed">
        <embed	name="qtmovie_embed"
                postdomevents="true"
                autoplay="false" 
                width = "644"
                height = "346"
                controller = "false"
                src="/redavenger/admin/upload/episodes/season0/hatecrime.mov">
    </object>

<div class="controllbar">
<div class="stop" onClick='document.qtmovie_embed.Stop();document.qtmovie_embed.Rewind()'></div>
<div class="play" onClick='document.qtmovie_embed.Play()'></div>
<div class="frameleft"></div>
<div class="frametop"></div>
<div class="pause" onClick='document.qtmovie_embed.Stop()'></div>
<div class="vol_plus" onClick='volume("up");'></div>
<div class="progresscontainer" id='progresscontainer'>
	<div class='pointer' id='pointer'> </div>
	<div class='timeline' id='timeLine'> </div>
</div>
<div class="frameright"></div>
<div class="vol-7" id="vol-7"></div>
<div class="vol-6" id="vol-6"></div>
<div class="vol-5" id="vol-5"></div>
<div class="vol-4" id="vol-4"></div>
<div class="vol-3" id="vol-3"></div>
<div class="vol-2" id="vol-2"></div>
<div class="vol-1" id="vol-1"></div>
<div class="vol_minus" onClick='volume("down");'></div>
<div class="framebottom"></div>
</div>

<div id='test'></div>
<div id='test2'></div>
<div id='test3'></div>

</div>
<div class='div2'>

<div class='menunav' id='menuNav'>
<div class='menutitle' id='menuTitle'>
	Home
</div>
</div>
<div class='menu' id='Menu'>
<div class='seasons' id='Seasons' style="left: 0px;">
</div>

<div class='episodes' id='Episodes'>
	<div class='episodelist' id='Episodelist'>
	</div>
</div>
<div class='episodeDetail' id='episodeDetail'>
</div>
</div>
<div class='screennav' id='screenNav'>
	<div class='back' id='back' onClick='if(scrolling.process == false){scrolling.process = true;scrolling.start(0, "Menu", 15, "x");}'>Back</div>
</div>
</div>
<div class='playlist'>
<div class='option'></div>
<div class='option'></div>
<div class='option'></div>
</div>
</body>
</html>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.