Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hide div menu on mouseOut problem.... :(

Status
Not open for further replies.
gia999

gia999

Programmer
Mar 26, 2008
14
GB
Hello there,

I have this problem... basically I have a popup <div> tag which contains a heading, paragraph, floating divs and link lists - a sort of large menu pop up area... Anyway, I basically wanted to put a hide function onto the main <div> tag so that when you rollout of it it dissappears... but as soon as you rollover anything within it it also dissappears...

I have this script

function hideBox(div)
{
divObj = document.getElementById(div);
divObj.style.display = 'none';
}

This calls it on the <div> itself

<div class="popupBox" id="popupDirectory" onMouseOut="hideBox('popupDirectory');">

I have been trying to fix this for a couple of days but just no luck. I found this on a webpage But I dont know if this would fix it or how to integrate it into my code - whatever I have tried has sadly just not worked or errored :(...

As you can see, any help would be so so much appreciated in getting this to work...

Many thanks in advance,
Gia
 
Sort by date Sort by votes
My advice is to use a timer, as relying solely on events to fix this issue will probably result in flicker as things will be firing too fast.

So, on mouseout of the DIV, set a timer to close the popup after, say, 250msecs. Then attach a mousemove event to the popup which cancels that timer.

Unless you are doing extra work with the mousemove event for any of the content in the box, this should be fine, as they will fire it, and it should bubble up to the popup.

Anyway - I've used this technique in the past (the timer), and it always works just fine.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi Dan,

Many thanks for your suggestions, it makes absolute sense re the timer... but would it be at all possible to show me an example of this code you say you have used? I am afraid I am just no good with JS, I can code in ASP fine, but with javascript I am so limited and on this one whatever I haver attempted myself has just errored or not quite worked at all!!! I included the code I have in my inital message, even if you can just tell me what goes where, etc. Im sorry to be a pain with this :(.

Many many thanks for your help.

Gia
 
Upvote 0 Downvote
OK... Take this test harness:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
	<title>Popup rollover test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<style type="text/css">
		html, body, h1, p {
			margin: 0px;
			padding: 0px;
		}

		body {
			padding: 10px;
		}

		#instructions {
			border: 1px solid #000000;
			background: #CCCCCC;
		}

		#popupDirectory {
			border: 1px solid #000000;
			background: #FFCCCC;
			position: absolute;
			left: 200px;
			top: 100px;
			width: 380px;
			height: 100px;
			padding: 5px;
		}

		#popupDirectory * {
			background-color: #FF6666;
			margin-bottom: 10px;
		}
	</style>


	<script type="text/javascript">

		function showBox(div) {
			divObj = document.getElementById(div);
			divObj.style.display = 'block';
		}

		function hideBox(div) {
			divObj = document.getElementById(div);
			divObj.style.display = 'none';
		}

	</script>
</head>

<body>
	<p id="instructions" onmouseover="showBox('popupDirectory');">Roll over to show box...</p>

	<div class="popupBox" id="popupDirectory" onmouseout="hideBox(this.id);" style="display:none;">
		<h1>A box</h1>
		<p>With some content</p>
	</div>
</body>
</html>

Roll over the link to show the box, and then notice the problem when you roll over the darker portions of the content.

Let's take it to the next level. I've renamed the "hideBox" function to "reallyHideBox", as it's what really does the hiding ;-). Then I've added a new "hideBox" function which sets a timer off. When the timer fires (after 250msecs), the "reallyHideBox" function will be run and the box will hide.

Code: 
function hideBox(div) {
	setTimeout("reallyHideBox('" + div + "');", 250);
}

function reallyHideBox(div) {
	divObj = document.getElementById(div);
	divObj.style.display = 'none';
}

Now, we could attach an "onmouseover" event to each piece of content inside the popup... but that would be bad for so many reasons. However, we don't have to. Because of the way events work (they bubble up the DOM), the popup will get to know about the "onmouseover" event fired by any of its children (unless the event is stopped first, of course). This means we can attach a "showBox" call to the popup itself:

Code: 
<div class="popupBox" id="popupDirectory" onmouseover="showBox(this.id); onmouseout="hideBox(this.id);" style="display:none;">

However, by itself it's no good. We now need to get the "showBox" function to stop the timer (if it's started). For this we need to modify both "showBox" and "hideBox":

Code: 
var popupTimerHandle = null;
function showBox(div) {
	if (popupTimerHandle != null) {
		clearTimeout(popupTimerHandle);
		popupTimerHandle = null;
	}

	divObj = document.getElementById(div);
	divObj.style.display = 'block';
}

function hideBox(div) {
	popupTimerHandle = setTimeout("reallyHideBox('" + div + "');", 250);
}

We store the timer handle in a global variable, and use it to cancel the timer when show is called (if it is set).

The only thing about this you would need to change for handling multiple popups is to store the timer handle in a different variable for each window (personally, I'd use a map keyed on the id of the popup).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi Dan,

This is great thank you :) Sorry I did not get back to you sooner to thank you for your help, I have only just had chance to play with this tonight as I had to go away this week.

I have it in a test file, so am going to integrate this into my final site tomorrow, and remove all my messy code. I will let you know how I get on.

Not sure about the note re multiple menus, I will get to that once I get the main bit done, but what you have shown me looks perfect :).

Thank you again,
Gia
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
320
trevil620
trevil620
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
416
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
314
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
324
JScannell
JScannell
amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
143
amrmnabil
amrmnabil

Part and Inventory Search

Sponsor

Back
Top