Hide layers onMouseOut

[michelledebeer]

I have a pop-up menu system that uses layers to show the different sections.

I have noticed on other web sites that when the mouse-pointer exits the layer, the menus are hidden automatically.

In my script I have solved this by just setting a timeout to 5 second if there has been no activity whatsoever on the webpage (see function hideAll). I don't really like this approach.

Does anyone know how to create this onMouseOut event.

Please let me know if you need to know anything else.

Here is the code:

var remember = new Array();
var remember2 = new Array();
var checkIt;
var DHTML = (document.getElementById || document.all || document.layers);

function show(name,lvl,obj)
{

if (!DHTML) return;

checkTimeOut();
if (remember[lvl] && remember[lvl] == name) return;
if (remember[lvl])
{
hideAll(lvl);
}
if (name)
{
var x = getObj(name);
x.visibility = 'visible';
}

remember[lvl] = name;
if (obj.parentNode) y = obj.parentNode;
else if (obj.parentElement) y = obj.parentElement;
else return;
if (y.className) return;
y.className = 'over';
if (remember2[lvl]) remember2[lvl].className = '';
remember2[lvl] = y;

}

function hideAll(lvl)
{
for (i=remember.length - 1;i>=lvl;i--)
{
if (remember)
{
var x = getObj(remember);
x.visibility = 'hidden';
}

remember = null;

if (remember2)
{
remember2.className = '';
remember2 = null;
}
}
}

function checkTimeOut()
{
if (checkIt) clearTimeout(checkIt);
checkIt = setTimeout('hideAll(1)',5000);
}


function getObj(name)
{
if (document.getElementById)
{
return document.getElementById(name).style;
}
else if (document.all)
{
return document.all[name].style;
}
else if (document.layers)
{
return document.layers[name];
}
else return false;
}

 

[crazyboybert]

It very much depends on how your menu is built. Javascript menu systems can be a real headache to get working especially when they work on mouseover and out events. However for a simple example which you should be able to apply to your menu try this

<a href=&quot;#&quot; onmouseout=&quot;hideIt('div1')&quot;>My Link</a>

function hideIt(divId){
document.getElementById(divId).style.visibility=&quot;hidden&quot;;
}

when you moused out of the link the function would be called and this will hide div1 in this case.

good luck!

rob

 

[michelledebeer]

That is the essens of what I want to do, but it is a little more complicated than that.
Here is the function I want to do:

function setArea(xleft,xright,ytop,ybottom)
{
// Get the current coordinates for X and Y in some way...
var xPos=currentXpos
var ypos=cyrrentYpos

if (xPos<xleft || xPos>xright || yPos<ytop || yPos>ybottom)
{
document.getElementById(divId).style.visibility=&quot;hidden&quot;;
}
}

setArea(12,112,20,220);

setArea is the width and the height of the layer. If the mouse pointer is outside of these values, the layer would be hidden...

I hope this makes any sense...

 

[bbruggemeyer]

Another technique you could try is to have another layer (transparent, full screen-size) underneath your popup menu. You then call the code to hide your menus from the onmouseover event of the bottom layer.

This technique is especially useful if you have sub-menus linked from the main menu. You then don't need to worry about the mouseout occurring when the mouse moves between the two menus. Bill Bruggemeyer

 

[michelledebeer]

Hmmm... Interesting.
How do I set the onmouseover event of the bottom layer?

 

[bbruggemeyer]

It depends on how you create the layer. If you do this dynamically then you'll need to add

layerObj.onmouseover=&quot;hideAll()&quot;;

Alternatively just create the layer in your html and make sure it includes the onMouseOver=&quot;hideAll()&quot; attribute.

Don't forget to hide this layer as well as the pop-up menu layer(s) in the hideAll() function, otherwise you'll block all other events from getting through to the page.

I haven't given much code here because mine's all tied in with other bits 'n' pieces at the moment so I couldn't guarantee giving you code that works. However, the technique is good just beware of cross browser issues.

Hope that makes sense, Bill Bruggemeyer