Jump to content

Some issues with my first Js script.

M.O.S. Studios

By M.O.S. Studios
in Javascript Help

 Share

Recommended Posts

M.O.S. Studios Advanced Member

M.O.S. Studios

Posted
Posted

Hey guys,

    So i started learning javascript. I went out to the library picked up a book and started reading.

 

Now im at the point where  i started writing my first functional script. Basically its a menu for a web series. Im hoping you guys could help me work out the one or two small bugs (please note this is for play not work).

 

<!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 = new Array(
		Array('Season 0',
			Array(
				Array('Episode 0', 27, 48, 12, 'Hero1.jpg', 'mydiscription mydiscription mydiscription mydiscription'),
				Array('Episode 1', 27, 24, 12, 'Hero1.jpg', 'mydiscription mydiscription mydiscription mydiscription'),
				Array('Episode 2', 27, 38, 12, 'Hero1.jpg', 'mydiscription mydiscription mydiscription mydiscription'),
				Array('Episode 3', 27, 96, 12, 'Hero1.jpg', 'mydiscription mydiscription mydiscription mydiscription'),
				Array('Episode 4', 27, 64, 12, 'Hero1.jpg', 'mydiscription mydiscription mydiscription mydiscription'),
				Array('Episode 5', 27, 12, 12, 'Hero1.jpg', 'mydiscription mydiscription mydiscription mydiscription'),
				Array('Episode 6', 27, 28, 12, 'Hero1.jpg', 'mydiscription mydiscription mydiscription mydiscription'),
				Array('Episode 7', 27, 16, 12, 'Hero1.jpg', 'mydiscription mydiscription mydiscription mydiscription')
			)			)
	);

	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 +">";
	}

	function season(){
		var finalMenu = "";
		var item = "";
		for(var z=0; z<episodes.length; z++){
			if(episodes[z][0]!==null){
				finalMenu += episodes[z][0].divs('onClick="scroller(1, \'Menu\', \'15\', \'x\', '+z+')"');
			}
		}
		document.getElementById('Seasons').innerHTML = finalMenu;
	}

	function borderwidth (id, direction){
		var num=function(pstrSource){
			pstrSource = new String(pstrSource); 
			pstrSource = pstrSource.replace(/[^0-9]/g, '');
			if(pstrSource === ''){pstrSource = 0;}
			return parseFloat(pstrSource); 
		}

		var sideOne = 'borderTopWidth';
		var sideTwo = 'borderBottomWidth';
		var sideOneb = 'border-top-width';
		var sideTwob = 'border-bottom-width';

		if(direction != 'y'){
			sideOne = 'borderRightWidth';
			sideTwo = 'borderLeftWidth';
			sideOneb = 'border-right-width';
			sideTwob = 'border-left-width'; 
		}

		var y = null;
		var x = document.getElementById(id);
		if(x.currentStyle){
			y = num(x.currentStyle[sideTwo]) + num(x.currentStyle[sideOne]);
			if(y == 'undefindundefind'){y = num(x.currentStyle[sideTwob]) + num(x.currentStyle[sideOneb]);}
		}else if(window.getComputedStyle){
			y = document.defaultView.getComputedStyle(x,null).getPropertyValue(sideTwo) + document.defaultView.getComputedStyle(x,null).getPropertyValue(sideOne);
			if(y == 'undefindundefind'){y = document.defaultView.getComputedStyle(x,null).getPropertyValue(sideTwob) + document.defaultView.getComputedStyle(x,null).getPropertyValue(sideOneb);}
		}
	return y;
	}

	function scroller(amount, divid, interval, direction, sidebar){
	if(typeof sidebar != 'undefined'){
		var theObject = "";
		var finalDiv = "";
		var item = "";
		var threeMain = "";
		var currentDiv = "";
		var container="";
		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';
				threeMain = new String('Views: '+theObject[1]+' / Votes:'+theObject[3]).divs("class='views'")+'\n';
				threeMain += "".divs("class='rating' style='width: "+theObject[2]+"px;'").divs("class='score'")+'\n';
				threeMain += theObject[5].toString().divs("class='discriptions'")+'\n';
			item += theObject[0].toString().divs("class='episodeTitle'")+'\n' + threeMain.divs("class='mainthree' id='mainthree"+m+"'") + '\n';
				finalDiv += item.divs("class='episode' onMouseOver='scroller(1, \"mainthree"+m+"\", 50, \"y\")' onMouseOut='scroller(0, \"mainthree"+m+"\", 50, \"y\")'");
			}
		}
		document.getElementById('Episodelist').innerHTML = finalDiv;
	}


/*		title = function(){
		interval /=2;
		titleFade = function(i, finalDiv){
			if(i >= 100){
				i = 0;
				clearInterval(Fade);
				if(finalDiv !== true){Fade = setInterval(function(){titleFade(i++, true);}, interval);}
			}else{
				var count = i/100;
				if(finalDiv !== true){count = ((100-i)/100);}
				document.getElementById('menuNav').style.opacity = count;
			}
		}
		var i = 0;
		Fade = setInterval(function(){titleFade(i++);}, interval);
	} */

	var theDiv = document.getElementById(divid);
	var divStart = null;
	if(direction != 'x'){
		direction = 'y';
		amount *= (theDiv.offsetHeight - borderwidth(divid, direction));
		divStart = theDiv.scrollTop;
	}else{
		amount *= (theDiv.offsetWidth - borderwidth(divid, direction));
		divStart = theDiv.scrollLeft;
	}

	scroll = function(){
		if((theDiv.scrollLeft == amount && direction =='x') || (theDiv.scrollTop == amount && direction =='y')){
			/*if(amount >= 1 direction== 'x' ){ */
		document.getElementById('back').style.display = 'block';
		/*}*/
			clearInterval(Timer);
		}else{
			if(direction == 'x'){
				if(divStart > amount){theDiv.scrollLeft -= 1;}
				if(divStart < amount){theDiv.scrollLeft += 1;}
			}else{
				if(divStart > amount){theDiv.scrollTop -= 1;}
				if(divStart < amount){theDiv.scrollTop += 1;}
			}
		}
	}
	if(interval === 0){
		if(direction == 'x'){theDiv.scrollLeft = amount;}
		if(direction == 'y'){theDiv.scrollTop = amount;}
	}else{
		/*title(); */
		Timer = setInterval("scroll()", interval);
	}
}
</script>



<style type="text/css">
	.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;
		display: auto;
	}

	.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 .mainthree{
		width: 225px;
		height: 45px;
		overflow: hidden;
		float:left;
	}

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

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


	.episodes .episodelist .episode .mainthree .discriptions{
		 width: 225px;
		 height: 45px;
		 margin-top: 10px;
		 float: left;
	}

	.episodes .episodelist .episode .mainthree .views{
		 float: left;
		 clear: left;
		 width: 100px;
		 font: 10px;
	}

	.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;			
	}

</style>
    <title><!-- Insert your title here --></title>
</head>
<body onLoad='season()'>
<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>
<div class='screennav' id='screenNav'>
	<div class='back' id='back'>Back</div>
</div>

</body>
</html>

 

so as you can see, when you click on a season, the menu shifts to the left displaying all the different episodes. When you put the cursor over an episode the description pops up pushing the other information aside. when you remove the cursor for the episode the description hides and the other information returns.

 

that all works fine, now here are the small issues i have been having.

 

1. When you click on a season and then put your cursor over an episode before the episode information is completely displayed, the animation stops.

 

2. if you move your cursor from one episode to another, the original information doesn't return.

 

3. The description animation goes faster every time you do it. after doing it 2-3 times the animation almost seem non existent

 

 

if you guys wouldn't mind helping me out that would be awesome!!!

 

 

thanks in advance

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.

×
 Share
Go to topic listing
×
×
  • 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.