...

View Full Version : Simple setTimeout problem



weaksauce
08-06-2008, 06:02 PM
Ok, I haven't done anything with JS for a few months so I'm rather rusty. I started developing a simple drop down menu, and It works fine but when I went to add a timeout effect for the onmouseout="" I completely don't understand what I'm doing wrong.

I searched the web as well as this forum, and I found alot of posts and tried their solutions. One thing I did notice is people have been using style.visibility="visible" and style.visibility="hidden" and im using display="block/hidden".

Heres my JS:


<script type="text/javascript">
<!--
window.onload=close_all;
function close_all () {
for (var i = 1; i<5; i++) {
document.getElementById('smenu'+i).style.display="none";
}
}
function menu_over(smenu) {
var item1 = document.getElementById(smenu);
item1.style.display="block";
}
function menu_out(smenu) {
var item1 = document.getElementById(smenu);
setTimeout("item1.style.display=\'none\';",0)
}
//-->
</script>


Heres a sample html code :



<div onmouseover="menu_over('smenu1');" onmouseout="menu_out('smenu1');">
<a href="#">Home</a>
</div>
<div id="smenu1">
<li><a href="#">CHE</a></li>
<li><a href="#">CHA</a></li>
<li><a href="#">Womens</a></li>
</div>

ninnypants
08-06-2008, 06:27 PM
You can do this all with CSS now but you do need a JavaScript fallback for IE6


<!-- ++HTML++ -->
<ul id="nav">
<li><a>nav</a>
<ul>
<li><a>subnav</a></li>
<li><a>subnav</a></li>
<li><a>subnav</a></li>
<li><a>subnav</a></li>
</ul>
</li>
<li><a>nav</a></li>
<li><a>nav</a></li>
<li><a>nav</a></li>
</ul>

/*== CSS ==*/
#nav li ul{
display:none;
position:absolute;
list-syle-type:none;
margin:0;
padding:0;
}
#nav li:hover ul{
display:block;
}

//== JavaScript fallback ==//
overOut(el){
curr = el.getElementsByTagName('ul').display;
el.getElementsByTagName('ul').display = ( curr == 'none'?'block':'none')
}

With the JavaScript fall back you will put it in both the onmouseover and onmouseout of the 'li', and you will use the 'this' keyword in place of 'el'

weaksauce
08-06-2008, 06:41 PM
Thanks, Yeah I started off with going with full CSS, but then I got interested in the time out effect.

ninnypants
08-06-2008, 06:48 PM
Well a timeout probably wouldn't be good for this because it pauses the action until after the specified time has run out so your menus would stay open after the users mouse moved off the link, but I guess you could use it for some sort of animation.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum