Menu
Is anyone familiar with the onmouseout event? Seems like it doesn’t recognize nested elements inside a div?
I just discovered the problem [URL=http://www.sitepoint.com/forums/showthread.php?t=509106]here
If someone comes up with a solution, I’ll be sure to point here.
[CODE]<html>
<head>
<script type="text/javascript">
var elements = [];
elements['addInformation'] = '<a href="http://www.google.com">google</a>';
elements['linkToThisPage'] = '<p>Paragrpah Element</p>';
elements['bookmarkThisPage'] = '<h3>H3 elment</h3>';
function showDiv(element){
document.getElementById(element).innerHTML = elements['addInformation'] + elements['linkToThisPage'] + elements['bookmarkThisPage']
document.getElementById(element).style.backgroundColor="#3CF"
}
function hideDiv(element){
document.getElementById(element).innerHTML='';
document.getElementById(element).style.backgroundColor="#FFF"
}
</script>
</head>
<body>
<div onmouseover="showDiv('addInformation')"><div align="center" class="green">Add some information</div></div>
<div style="background-color:#33CCFF" align="center" id="addInformation" onmouseleave="hideDiv('addInformation')"></div>
</body>
</html>[/CODE]Care to share the solution?Bring all your codes here, and present the problem in this thread, please. [/QUOTE]
by the way, you should have also told us which was the problem[/QUOTE]It's not too hard to click a
Anyway, I'll do it for you.[/QUOTE]Do what for me?
The problem seems to be that onmouseleave event was not implemented in other browsers than IE. Thus, when moving the mouse out of the new displayed div, that will not disappear in Moz, Opera, etc..., as it does in IE.[/QUOTE]I know.
On the other hand, the simple using onmouseout instead of onmouseleave is not a solution, because of the event bubbling model ( when the mouse moves over a nested element inside the DIV, the browsers consider that it has left the DIV element, so the onmouseout fires the function, and the DIV disapears, even you might think the mouse is still over the DIV[/QUOTE]Yes, we know, that was al9’s original problem.
A solution for this problem is to be found at:Have you tested this for yourself? The example you are talking about does not work.
http://www.quirksmode.org/js/events_mouse.html [/QUOTE]
Not a huge fan of thehttp://www.alopc.ro/ "Produse" menue tab.
Not because it shows all the items at once, but because of the fade in/out action on mouseover. As a user the last thing I want is something that *intentionally* slows down how fast I can get information.
Sort of like the matrix "bullet-time" effect - neat the first time. Annoying as heck the 10th or 11th time.
To whom ever the developer is, I'd suggest just popp'ing the menu out as quick as possible or maybe setting some cookie to limit it to just 2 or 3 times per visit.[/QUOTE]
[url=http://dynamic-tools.net/toolbox/isMouseLeaveOrEnter/]I prefer this technique.[/url] And no, that's not a bug. :p It's a feature called event bubbling.[/QUOTE]
Sort of. You're not using relatedTarget or toElement/fromElement though.[/QUOTE]
... it is not a [B]fade[/B], it is a dynamic changing of the [B]clip[/B] attribute)....[/QUOTE]
I prefer this technique. [/QUOTE]
0.1.9 — BETA 5.5