473,322 Members | 1,408 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 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 14409


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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Mel | last post by:
i need to have 2 side by side iframes, a link on top of the one will show/hide the other can someone help me pleeeeezzzzz ?
3
by: Sunil Menon | last post by:
Dear All, I am using a menu control that is inside an iFrame...the parent page contains around three iFrames...after rendering the menu control...on click of the menu..the sub menus appear behind...
6
by: jeet_sen | last post by:
Hi, I have generated a table and have attached a pop up to display at onmouseover event of each cell. For each cell the pop up will display cell specific detailed data. I have generated the pop...
4
by: Jayyde | last post by:
Is there any way to capture a button click inside an iFrame and perform both an action on that page and one on the parent page? Basically I have a page atm that allows the user to add a record to...
1
by: louvino | last post by:
Hi, I have a button. When I click on this button, a menu in a iframe appears. I can't put the code of the iframe in the same div. I would like that : if I do a "mouseout" of the button and...
3
by: therealvibe | last post by:
I have made a simple page with show hide layers with javascript and css. http://www.icatt.nl/special/test/salarisstrook_algemeen.html The idea is that the blue help text rechtangle will have...
7
by: pb | last post by:
Hi all, I have some code that automatically generates a url depending on user selections. This url is then set as a hyperlink and the user clicks on the link that has the target as an iframe on...
1
by: Z1P2 | last post by:
I would like to gradually resize an iframe in an onmouseover event. I can easily do it with an image, but when I try to do it with an iframe, it doesn't do anything. So first of all, is it possible...
10
by: AC | last post by:
I had a page that does some event setup on window.onload: function prepEvents() { document.getElementById("menumap_sales").onmouseover = swapMenuSales; // etc } window.onload = prepEvents;
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.