...

View Full Version : Keep Visibility Between Divs



rlemon
04-18-2005, 08:52 PM
I'm making a dropdown menu with JS and Layers and i'm having troubles keeping the submenu open after the mouse cursor leaves the first Div Tag.

I'm not looking for any code awnsers here (which is why i'm not posting all my source) All i need is a little direction on where to go.

So, say my div tags look like this:



<div onMouseOver="showMe()" id="mnu1" style="position:relative; z-index:1; border:1px solid #000000; width:75;">my Div</div>

<div id="Sub_mnu1" style="position:absolute; z-index:2; border:1px solid #000000; visibility:hidden; width:110;">This is my other Div</div>


and i'm using the Javascript:



function showMe(){
if(document.getElementById(Sub_mnu1).style.visibility == "hidden"){
var showMe = 1;
} else {
var showMe = 0;
}
document.getElementById(Sub_mnu1).style.visibility = showMe ? "visible" : "hidden";
}


So what i've tried as far as keeping this open:

using timers to give a .2 sec 'buffer' between cells. (this somewhat worked cept i couldn't get the cleartimeout to work)

Harry Armadillo
04-18-2005, 09:58 PM
Mouseover/mouseout can fire in such rapid succession that it's not worth the bother to clear the associated timeouts in this sort of situation. Make your timed function tolerate changes.
function showIt(who){
document.getElementById(who).setAttribute('state','');
setTimeout("setIt('"+who+"')",0);
}

function hideIt(who){
document.getElementById(who).setAttribute('state','none');
setTimeout("setIt('"+who+"')",200);
}

function setIt(who){
document.getElementById(who).style.display=document.getElementById(who).getAttribute('state');
}

rlemon
04-18-2005, 10:40 PM
yea sorry for not closing this topic.

I have since then figured it out. The problem was:
i'm making a dropdown menu script using Divs, and changing between the menu header and menu body divs would cause my menu body to close (because of the onMouseOut) property.

so to solve this problem i used a timer to leave a small buffer of time to switch from the menu header to the body (and vica versa) before they close.


all works great in IE / Mozilla

www.rlemon.com/new_menu.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum