Entry
How can I ensure that an element containing an iframe is hidden when the mouse leaves the element?
How can I ensure that an element containing an iframe is hidden when the mouse leaves the element?
How can I ensure that an element containing an iframe is hidden when the mouse leaves the element?
Nov 10th, 2004 08:08
Martin Honnen,
When scripting mouseover/mouseout events you often want to hide an
element when the mouse leaves it. However the way DOM events work
mouseover/mouseout events are not only fired when the mouse moves
outside of an element but also when the mouse moves over a child element
thus you need to check the toElement (IE's event model) respectively the
relatedTarget (W3C DOM event model) and check whether it is contained in
the element you want to hide.
If iframes are involved things get a bit more complicated as some
browsers (Mozilla, Opera) also fire events when the mouse is moved
inside of an iframe. As far as I have tested in this case toElement
respectively relatedTarget is null so the following script checks
against that to ensure the div element to be hidden is only hidden when
the mouse leaves it.
The code has been tested with IE 6, Netscape 7.2, Firefox 1.0, and Opera
7 and should work with IE 5/5.5, Netscape 6/7, Mozilla 1.x too.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>event handling to hide an element when the mouse leaves it</title>
<script type="text/javascript">
function mouseLeaves (element, evt) {
if (typeof evt.toElement != 'undefined' && evt.toElement && typeof
element.contains != 'undefined') {
return !element.contains(evt.toElement);
}
else if (typeof evt.relatedTarget != 'undefined' && evt.relatedTarget) {
return !contains(element, evt.relatedTarget);
}
}
function contains (container, containee) {
while (containee) {
if (container == containee) {
return true;
}
containee = containee.parentNode;
}
return false;
}
</script>
<script type="text/javascript">
function hideElement (element) {
if (element.style) {
element.style.visibility = 'hidden';
}
}
function showElement (element) {
if (element.style) {
element.style.visibility = 'visible';
}
}
</script>
<style type="text/css">
#div1 {
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div1"
onmouseout="if (mouseLeaves(this, event)) {
hideElement(this);
}">
<p>This is a div element which contains child nodes like a paragraph and
an iframe.
When the mouse leaves the element completely it should be hidden but
when the mouse
enters a child element the div should remain visible.</p>
<p>
<iframe src="http://JavaScript.FAQTS.com/" width="100%">
<a href="http://JavaScript.FAQTS.com/">JavaScript.FAQTS.com</a>
</iframe>
</p>
<p>This is text below the iframe but still inside of the div.</p>
</div>
<p>Here you can
<input type="button" value="show"
onclick="var div;
if (document.getElementById) {
div = document.getElementById('div1');
showElement(div);
}">
the div element again.
</p>
</body>
</html>
