weaksauce
08-06-2008, 05: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>
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>