DIV/IFRAME hide/show problem onMouseOut - please help :)

Ryh · Nov 10, 2004

I have the following scritpt. It hides div layer when mouse is out of
the div layer. Inside DIV I have IFRAME box. Unfortuantely it does not
work in Mozilla or IE 5.5. It hides div when cursor is inside IFRAME.
NOte that IFRAME is inside DIV so it should not hide DIV. It Works
fine in IE6.0.

Could any one help?

Example:

<html>
<head>
<script type="text/javascript">
function hide() {
obj = document.getElementById('testDiv');
obj.style.visibility = 'hidden';
}
function show() {
obj = document.getElementById('testDiv');
obj.style.visibility = 'visible';
}
</script>
<head>
<body>
<form action="">
<input type="button" value="Show" onclick="show()">
</form>
<div id="testDiv" style="border: 10px solid red;" onmouseover="show()"
onmouseout="hide()">
<p>Text inside DIV</p>
<iframe id="testIframe"></iframe>
</div>
</body>

Martin Honnen · Nov 10, 2004

Ryh said:
I have the following scritpt. It hides div layer when mouse is out of
the div layer. Inside DIV I have IFRAME box. Unfortuantely it does not
work in Mozilla or IE 5.5. It hides div when cursor is inside IFRAME.
NOte that IFRAME is inside DIV so it should not hide DIV. It Works
fine in IE6.0.

You need to check whether the toElement/relatedTarget is contained
inside of the div element:

<!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' && 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>
</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>

Martin Honnen · Nov 10, 2004

Martin Honnen wrote:

function mouseLeaves (element, evt) {
if (typeof evt.toElement != 'undefined' && typeof element.contains !=
'undefined') {

Replace that line with

if (typeof evt.toElement != 'undefined' && evt.toElement && typeof
element.contains != 'undefined') {

to work around an Opera 7 problem.

Ryh · Nov 20, 2004

Martin thank you. You did a great job that helped me a lot. Thanks again.

How do I hide the modal after 5 seconds?	4	Jun 1, 2023
Please Help?	0	Jul 23, 2022
Help with code	0	Jun 12, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Show text on-click with transition	2	Feb 14, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
Help please	8	Jul 7, 2023

DIV/IFRAME hide/show problem onMouseOut - please help :)

Ryh

Martin Honnen

Martin Honnen

Ryh

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads