Problem with my slide down menu

Discussion in 'JavaScript' started by vitalytis, Jul 2, 2011.

0
  1. #1
    I just created a side down menu, and i noticed, that after using it one time, it stops sliding. This is the code:
    <html>
<head>
<title>Image Mover</title>
<script language="javascript">
var y = -75; //Starting Location - top
var dest_y = 0;  //Ending Location - top
var interval = 3; //Move 10px every initialization
var x = -20; //Starting Location - top
var dest_x = -48;  //Ending Location - top
var interval2 = -1; //Move 10px every initialization
var s = 0; //Starting Location - top
var dest_s = -75;  //Ending Location - top
var interval3 = -3; //Move 10px every initialization
var a = -48; //Starting Location - top
var dest_a = -20;  //Ending Location - top
var interval4 = 1; //Move 10px every initialization
var t;
var t1;
var t2;
var t3;
function movemenu() {
	if(x>dest_x) x = x + interval2;
	document.getElementById("m2").style.top  = x+'px';
	if (x+interval2 > dest_x) {
		t1 = window.setTimeout('movemenu()',10);
	}
	if (x+interval2 <= dest_x) {
		clearTimeout(t1);
		moveImage();
	}
}
function moveImage() {
	
	//Keep on moving the image till the target is achieved
	if(y<dest_y) y = y + interval;
	
	//Move the image to the new location
	document.getElementById("ufo").style.top  = y+'px';

	if (y+interval < dest_y) {
		//Keep on calling this function every 100 microsecond 
		//	till the target location is reached
		t = window.setTimeout('moveImage()',10);
	}
	if (y+interval >= dest_y) {
		clearTimeout(t);
	}
}
function moveImage2() {
	
	//Keep on moving the image till the target is achieved
	if(s>dest_s) s = s + interval3;
	
	//Move the image to the new location
	document.getElementById("ufo").style.top  = s+'px';

	if (s+interval3 > dest_s) {
		//Keep on calling this function every 100 microsecond 
		//	till the target location is reached
		t2 = window.setTimeout('moveImage2()',10);
	}
	if (s+interval3 <= dest_s) {
		//Keep on calling this function every 100 microsecond 
		//	till the target location is reached
		clearTimeout(t2);
		movemenu2();
	}
}
function movemenu2() {
	
	//Keep on moving the image till the target is achieved
	if(a<dest_a) a = a + interval4;
	
	//Move the image to the new location
	document.getElementById("m2").style.top  = a+'px';

	if (a+interval4 < dest_a) {
		//Keep on calling this function every 100 microsecond 
		//	till the target location is reached
		t3 = window.setTimeout('movemenu2()',10);
	}
	if (a+interval4 >= dest_a) {
		//Keep on calling this function every 100 microsecond 
		//	till the target location is reached
		clearTimeout(t3);<!-- Codes by Quackit.com -->
			}
}
</script>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img, focus { 
	border:0;
	outline: none;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/*---------------------*/
body {
	background-image:url(stainless-steel_03.png);
}
#ufo {
	width:100%;
	height:70px;
	background-color:#000;
	background-position:center;
	position:absolute;
	top:-75px;
	text-align:center;
	font-size:24px;
	-webkit-box-shadow: #666 0px 3px 6px;
-moz-box-shadow: #666 0px 3px 6px;
box-shadow: #666 0px 3px 6px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
 -moz-opacity:0.8;
-khtml-opacity: 0.8;
 opacity: 0.8;
 z-index:9;
}
#vid {
	width:960px;
	border: 1px solid #999;
-webkit-box-shadow: #666 0px 3px 5px;
-moz-box-shadow: #666 0px 3px 5px;
box-shadow: #666 0px 3px 5px;
background: #EDEDED;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EDEDED), to(#FFFFFF));
background: -moz-linear-gradient(#EDEDED, #FFFFFF);
background: linear-gradient(#EDEDED, #FFFFFF);
-pie-background: linear-gradient(#EDEDED, #FFFFFF);
behavior: url(/PIE.htc);
margin-left:auto;
margin-right:auto;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
 -moz-opacity:0.6;
-khtml-opacity: 0.6;
 opacity: 0.6;
}
#text {
	padding-top: 75px;
}
#tarps {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
 -moz-opacity:0.6;
-khtml-opacity: 0.6;
 opacity: 0.6;
}
.menu {
	position:absolute;
	background-color:#000;
	width:70px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
 -moz-opacity:0.4;
-khtml-opacity: 0.4;
 opacity: 0.4;
 height:45px;
 font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
 color:#FFF;
 font-style:italic;
 z-index:10;
 top:-20px;
 right:20%;
 -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
}
#pp {
	padding-top:22px;
	padding-left:10px;
}
a.menu:link {text-decoration:none;}
a.menu:visited {text-decoration:none;}
a.menu:hover {text-decoration:none;
color:#999}
a.menu:active {text-decoration:none;}
.arrow {
	margin-top:20px;
}
#menuout {
	position:absolute;
	background-color:#333;
	width:70px;
 height:45px;
 font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
 color:#FFF;
 font-style:italic;
 z-index:10;
 top:-20px;
 right:20%;
 -webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
}
a.mu:link {text-decoration:none;}
a.mu:visited {text-decoration:none;}
a.mu:hover {text-decoration:none;
background-color:#000;}
a.mu:active {text-decoration:none;}
</style>
</head>
<body>
<div id="ufo"><a href="#" id="menuout" class="mu" onClick="moveImage2()" name="na"><img class="arrow" src="arrow_03.png" height="24" width="40" /></a></div>
<a href="#" class="menu" id="m2" onClick="movemenu()"><p id="pp">MENU</p></a>
<div id="vidarea"><div id="vid"><div id="tarps"></div><p id="text">sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br />sdbksjdf<br /></p></div></div>
</body>
</html>
    HTML:
    Any solutions? Maybie i have to use other script to create slide down meniu?
     
    vitalytis, Jul 2, 2011 IP
  2. tolas

    tolas Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Please get us a test page on some server of yours that we can view this code in action and in a debugger..
     
    tolas, Jul 9, 2011 IP
  3. unknownpray

    unknownpray Active Member

    Messages:
    3,831
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    70
    #3
    Hello
    your code is very big but try to see this simple example
    hope this helps you!
     
    unknownpray, Jul 25, 2011 IP