471,338 Members | 1,294 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,338 software developers and data experts.

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

Ryh
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>
Jul 23 '05 #1
3 14293


Ryh wrote:
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
http://JavaScript.FAQTs.com/
Jul 23 '05 #2


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.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #3
Ryh
Martin thank you. You did a great job that helped me a lot. Thanks again.
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Mel | last post: by
3 posts views Thread by Sunil Menon | last post: by
6 posts views Thread by jeet_sen | last post: by
1 post views Thread by louvino | last post: by
3 posts views Thread by therealvibe | last post: by
7 posts views Thread by pb | last post: by
1 post views Thread by Z1P2 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.