RopeADope Posted April 22, 2011 Share Posted April 22, 2011 Hi all. Just working on something simple to show/hide navigation divs. Here's what I have so far... <script language="Javascript" type="text/javascript"> function show(id){ if(t!=''){ clearTimeout(t); }else{ document.getElementById(id).style.display = 'block'; } } function hide(id){ var t=setTimeout("document.getElementById('" + id + "').style.display = 'none'",1000); } </script> The problem that I'm having is that the clearTimeout(t) seems to prevent anything from showing. If I comment it out, everything works fine. Ideally, the point of the clearTimeout bit was to clear any remaining time when you mouseover another item. Tips on fixing that problem and improving this script would be greatly appreciated! Quote Link to comment Share on other sites More sharing options...
sunfighter Posted April 22, 2011 Share Posted April 22, 2011 Your var t is not global so function show(id) does not know what it is. Also Your else statement does not execute if you have time left. Just do an if on the time and execute the show display as a seperate statement Quote Link to comment Share on other sites More sharing options...
RopeADope Posted April 22, 2011 Author Share Posted April 22, 2011 So something like this? <script language="Javascript" type="text/javascript"> function show(id){ if(t!=''){ clearTimeout(t); } document.getElementById(id).style.display = 'block'; } function hide(id){ t=setTimeout("document.getElementById('" + id + "').style.display = 'none'",1000); } </script> EDIT: Tried this and it permanently puts the sub-divs on the page...they never time out. Also, the first div that I roll over to show a subdiv, doesn't work. For some reason, it works on the second div I roll over, then when i roll over the first one again it will show the sub div. Quote Link to comment Share on other sites More sharing options...
sunfighter Posted April 23, 2011 Share Posted April 23, 2011 My question here is why do you want to delay the removal of a div? It sounds funny to me. Here is how to make something global for use in multiple functions and the answer to your question. <html> <head> <script type="text/javascript"> var t = 0; // This Makes t Global function show(id){ if(t!=''){clearTimeout(t);} document.getElementById(id).style.display = 'block'; } function hide(id){ t=setTimeout("document.getElementById('" + id + "').style.display = 'none'",1000); } </script> </head> <body> <div id="id">Text here</div> <form action=""> <input type="button" value="Text will disappear in in 1 second" onclick="hide('id')"> <input type="button" value="Make text reappear" onclick="show('id')"> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
RopeADope Posted April 25, 2011 Author Share Posted April 25, 2011 This navigation is my first trial into JavaScript so I may be thinking about it the wrong way. I'm attempting a 3 tier navigation menu. Without the delay, the 2nd tier will disappear when you mouseoff the 1st tier. So my thought was to add a delay so you could make it to the second tier and subsequently the 3rd tier. The reason for the clearTimeout was so that the divs don't stack when you mouseover different divs. One thing that I've noticed however is that when you mouseover a 2nd or 3rd tier, they disappear before you can click a link anyway. So I guess what I really need is a was to say "if the mouse is on a parent div, set the child div to be visible". Which is sort of what I have now, but particularly on the 3rd tier, I need to keep the second tier menu from closing. As you can probably tell, this is quite a task considering I've never really done any JavaScripting. Any help would be great! Quote Link to comment Share on other sites More sharing options...
sunfighter Posted April 25, 2011 Share Posted April 25, 2011 It is far better to do navigation in css. Here are some things to read on how it's done: http://lwis.net/free-css-drop-down-menu/ http://www.freelancermagazine.com/navigation-css-level-3/ http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.