473,854 Members | 1,672 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.getEle mentById('testD iv');
obj.style.visib ility = 'hidden';
}
function show() {
obj = document.getEle mentById('testD iv');
obj.style.visib ility = 'visible';
}
</script>
<head>
<body>
<form action="">
<input type="button" value="Show" onclick="show() ">
</form>
<div id="testDiv" style="border: 10px solid red;" onmouseover="sh ow()"
onmouseout="hid e()">
<p>Text inside DIV</p>
<iframe id="testIframe" ></iframe>
</div>
</body>
Jul 23 '05 #1
3 14453


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.contain s !=
'undefined') {
return !element.contai ns(evt.toElemen t);
}
else if (typeof evt.relatedTarg et != 'undefined' && evt.relatedTarg et) {
return !contains(eleme nt, evt.relatedTarg et);
}
}

function contains (container, containee) {
while (containee) {
if (container == containee) {
return true;
}
containee = containee.paren tNode;
}
return false;
}
</script>
<script type="text/javascript">
function hideElement (element) {
if (element.style) {
element.style.v isibility = 'hidden';
}
}

function showElement (element) {
if (element.style) {
element.style.v isibility = 'visible';
}
}
</script>
<style type="text/css">
#div1 {
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div1"
onmouseout="if (mouseLeaves(th is, event)) {
hideElement(thi s);
}">
<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.FAQT S.com/" width="100%">
<a href="http://JavaScript.FAQT S.com/">JavaScript.FA QTS.com</a>
</iframe>
</p>
</div>
<p>Here you can
<input type="button" value="show"
onclick="var div;
if (document.getEl ementById) {
div = document.getEle mentById('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.contain s !=
'undefined') {


Replace that line with

if (typeof evt.toElement != 'undefined' && evt.toElement && typeof
element.contain s != '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
35580
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
6735
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 the iFrame...how do I get the sub menus in front.... The menus are plain HTML tags... Please help...
6
4766
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 up using iframe and it is working fine. On mouseout event of each cell I have destroyed the created the iframe. This is working fine. But if I try to move the cursor over the iframe, the mouseout event is fired and my iframe is vanishing off.
4
19522
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 a table and what I would like to have are save and cancel buttons (or maybe just a save button with a close image on the DHTML "window") on the page that, when save is clicked for instance, will save the record (code in that page) and close the...
1
2063
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 if the mouse is not on the iframe
3
4640
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 to remain visible when mouse over (because there will be soon links in it) and invisible when onmouseout. I have now placed javascript on the small numbered balls and within
7
3354
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 the same page. What is the easier way to automatically fill the iframe with the required new web page without having to get the user to click on the link first.
1
8141
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 to gradually zoom an iframe, and if so, what am I missing? Here is the script I am trying to manipulate, between the head tags: <script language=JavaScript> /**** adjust these two parameters to control how fast or slow
10
3792
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
9750
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11024
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10672
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10744
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9510
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7909
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
1
4550
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4150
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3182
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.