jnf555 Posted April 18, 2009 Share Posted April 18, 2009 hi i am haveing trouble makeing each menu working individually, anyone help<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><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>thanks jnf555 Link to comment Share on other sites More sharing options...
jeffman Posted April 18, 2009 Share Posted April 18, 2009 Things to think about:An id is supposed to be a unique identifier. Two page elements cannot have the same id. If they do, JavaScript will only recognize the first one. If you revise your code, you can refer to your tables this way:onmouseover="showmenu(this)"where this refers to the table you moused over. But then the rest of the code must be revised so that your functions expect a reference to the table. A function definition might look like this:function showmenu(the_table) {and then your statements would look like this:the_table.style.left = i;Of course your calls to setInterval will have to change also.You will also need a unique interval variable for each table. If you keep using the same variable over and over, then mousing over one table could stop the sliding movement of another table before it is done, and this will look bad. Users like to play with menus, and they will move their mouses over them very quickly, so you should assume this will happen. Link to comment Share on other sites More sharing options...
jnf555 Posted April 18, 2009 Author Share Posted April 18, 2009 thanks, looks like i have a bit of altering to dojnf555 Link to comment Share on other sites More sharing options...
jeffman Posted April 18, 2009 Share Posted April 18, 2009 Yup. Intervals are not a difficult concept, but having more than one going on simultaneously takes a bit more planning. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.