gongpex Posted October 11, 2011 Share Posted October 11, 2011 Hello everyone, I try to modify script that I got from w3schools: <html><head><style>body{font-family:arial;}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu{background:lightblue}table.nav{background:black;position:relative;font: bold 80% arial;top:0px;left:-135px;}</style><script type="text/javascript">var i=-135;var intHide;var speed=3;function showmenu(){clearInterval(intHide);intShow=setInterval("show()",10);}function hidemenu(){clearInterval(intShow);intHide=setInterval("hide()",10);}function show(){if (i<-12){i=i+speed;document.getElementById('myMenu').style.left=i;}}function hide(){if (i>-135){i=i-speed;document.getElementById('myMenu').style.left=i;}}</script></head><body><table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()"><tr><td class="menu"><a href="/default.asp">HOME</a></td><td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr><tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr><tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr><tr><td class="menu"><a href="default.asp">DHTML</a></td></tr><tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr></table><p>Mouse over the MENU to show/hide the menu</p><p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p></body></html> this code results slide menu, but when I put setTimeout() like this: <html><head><style>body{font-family:arial;}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu{background:lightblue}table.nav{background:black;position:relative;font: bold 80% arial;top:0px;left:-135px;}</style><script type="text/javascript">var i=-135;var intHide;var speed=3;function showmenu(){clearInterval(intHide);intShow=setInterval("show()",10);}function hidemenu(){clearInterval(intShow);intHide=setInterval("hide()",10);}function show(){if (i<-12){i=i+speed;document.getElementById('myMenu').style.left=i;}}function hide(){if (i>-135){i=i-speed;document.getElementById('myMenu').style.left=i;}}setTimeout("hidemenu()",3);</script></head><body><table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()"><tr><td class="menu"><a href="/default.asp">HOME</a></td><td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr><tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr><tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr><tr><td class="menu"><a href="default.asp">DHTML</a></td></tr><tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr></table><p>Mouse over the MENU to show/hide the menu</p><p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p></body></html> the function of "setTimeout" not working, I want to create slide menu that after the menu 'show' (onmouseover)and when it hide(onmouseout) can pause or delay for 3 or 5 seconds where I must put the function of setTimeout()? please help me Thank you Link to comment Share on other sites More sharing options...
Ingolme Posted October 11, 2011 Share Posted October 11, 2011 Put the setTimeout inside the show() and hide() functions. Instead of passing a string, pass a function reference instead, it's far more efficient:setTimeout( hidemenu ,3000); The number is in milliseconds, not seconds, so you put 3000 instead of 3 if you want 3 seconds. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 11, 2011 Share Posted October 11, 2011 You wouldn't want to put the setTimeout in the hide() function. The hidemenu function calls the hide function. Change your onmouseout handler to this:onmouseout="setTimeout(hidemenu, 3000)" Link to comment Share on other sites More sharing options...
gongpex Posted October 12, 2011 Author Share Posted October 12, 2011 I had try, but it's not successful. <html><head><style>body{font-family:arial;}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu{background:lightblue}table.nav{background:black;position:relative;font: bold 80% arial;top:0px;left:-135px;}</style><script type="text/javascript">var i=-135;var intHide;var speed=3;function showmenu(){clearInterval(intHide);intShow=setInterval("show()",10);}function hidemenu(){clearInterval(intShow);intHide=setInterval("hide()",10);}function show(){if (i<-12){i=i+speed;document.getElementById('myMenu').style.left=i;setTimeout("show()",3000);}} function hide(){if (i>-135){i=i-speed;document.getElementById('myMenu').style.left=i;setTimeout("hide()",3000);}}</script></head><body><table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()"><tr><td class="menu"><a href="/default.asp">HOME</a></td><td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr><tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr><tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr><tr><td class="menu"><a href="default.asp">DHTML</a></td></tr><tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr></table><p>Mouse over the MENU to show/hide the menu</p><p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p></body></html> please tell me, Thank you Link to comment Share on other sites More sharing options...
ShadowMage Posted October 12, 2011 Share Posted October 12, 2011 Apparently you didn't read my last post... Link to comment Share on other sites More sharing options...
gongpex Posted October 13, 2011 Author Share Posted October 13, 2011 Apparently you didn't read my last post... Sorry, because yesterday I got problem on my internet connection, so, my posting unfinished, I had try your script, but the results menu cannot pause or delay for 3 seconds, but it's only shake till my computer stuck and I must stop the task manager can you give me another script? Please, don't misunderstand Thank's Link to comment Share on other sites More sharing options...
Ingolme Posted October 13, 2011 Share Posted October 13, 2011 Those setInterval() functions you have look strange. Every 10 milliseconds you're trying to call the show() function, which in turn keeps calling itself over every three seconds? This means that the function is called 100 times a second. Every time the showmenu() and hidemenu() functions are called, the number of times that the other functions are called per second is increased by 100. So if you execute showmenu() and hidemenu() twice each, you're making 400 function calls per second. That's enough to crash any browser. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 13, 2011 Share Posted October 13, 2011 You still didn't follow my advice, but what you have should work if you remove the setTimeouts from the show/hide functions. Do not remove them from the showmenu/hidemenu functions. You'll probably have to adjust the time, but don't remove them. Link to comment Share on other sites More sharing options...
gongpex Posted October 29, 2011 Author Share Posted October 29, 2011 You still didn't follow my advice, but what you have should work if you remove the setTimeouts from the show/hide functions. Do not remove them from the showmenu/hidemenu functions. You'll probably have to adjust the time, but don't remove them. hello, sorry I'm very very busy lately,this your advice: <html><head><style>body{font-family:arial;}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu{background:lightblue}table.nav{background:black;position:relative;font: bold 80% arial;top:0px;left:-135px;}</style><script type="text/javascript">var i=-135;var intHide;var speed=3;function showmenu(){clearInterval(intHide);intShow=setInterval("show()",10);}function hidemenu(){clearInterval(intShow);intHide=setInterval("hide()",10);}function show(){if (i<-12){i=i+speed;document.getElementById('myMenu').style.left=i;setTimeout("show()",3000);}}function hide(){if (i>-135){i=i-speed;document.getElementById('myMenu').style.left=i;setTimeout("hide()",3000);}}</script></head><body><table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="setTimeout(hidemenu, 3000)"><tr><td class="menu"><a href="/default.asp">HOME</a></td><td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr><tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr><tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr><tr><td class="menu"><a href="default.asp">DHTML</a></td></tr><tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr></table><p>Mouse over the MENU to show/hide the menu</p><p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p></body></html> I had tried your code, but it not successful, even I had try to change the onmoseout="setTimeout(hidemenu(),3000)"; but the results are same, so what your advice? I really appreciate it thank you Link to comment Share on other sites More sharing options...
Ingolme Posted October 29, 2011 Share Posted October 29, 2011 That should be hidemenu without the parentheses:Change setTimeout(hidemenu(),3000) to setTimeout(hidemenu,3000) Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.