page event to hide floating div

**Dan Rumney** · Jun 27 '08, 07:13 PM

Re: page event to hide floating div

On Jun 3, 11:41 am, "Jeremy" <nos...@please. comwrote:

I've got a floating div which becomes visible when a link is clicked. I
want the div to be hidden when the user clicks anywhere on the page except
for whithin the div. What is the best way to do this? Really, I only need
to support ie6+ but cross browser is always nice.

You could use the BODY element's onClick event handler.

However, this is called whenever you click anything on the page, this
handler will get called.

The big questions are

1) Which will get called first, the floating div or the body?
2) How do you prevent the body's handler being called when you click
on the floating div?

http://www.quirksmode.org/js/events_order.html seems to be a pretty
respectable writeup of this very issue

**Jeremy** · Jun 27 '08, 07:13 PM

Re: page event to hide floating div

That's a good idea, the other issue that could happen is that the body
could already have an onclick event, in which case I wouldn't want to
overwrite it, I'd have to write code to handle chaining the events, and
restoring the original event after. As well, because I'm doing this as a
resusable component, what if the onclick event gets overwritten by someone
else.

I stumbled uppon the attachEvent and detachEvent
(addEventListen er/removeEventList ener for mozilla) methods. They allow you
to keep adding events to an element.

"Dan Rumney" <danrumney@warp mail.netwrote in message
news:a0111f44-aef0-4fb6-a6e7-86bc416b9cd8@c6 5g2000hsa.googl egroups.com...

On Jun 3, 11:41 am, "Jeremy" <nos...@please. comwrote:

>I've got a floating div which becomes visible when a link is clicked. I
>want the div to be hidden when the user clicks anywhere on the page
>except
>for whithin the div. What is the best way to do this? Really, I only
>need
>to support ie6+ but cross browser is always nice.

>
You could use the BODY element's onClick event handler.
>
However, this is called whenever you click anything on the page, this
handler will get called.
>
The big questions are
>
1) Which will get called first, the floating div or the body?
2) How do you prevent the body's handler being called when you click
on the floating div?
>
http://www.quirksmode.org/js/events_order.html seems to be a pretty
respectable writeup of this very issue

**Lee** · Jun 27 '08, 07:13 PM

Re: page event to hide floating div

This should work with IE6+ and Firefox. I havent tested on any other
browsers.

<html>
<body onclick="HideDi v(event)">
<a href="Javascrip t: ShowDiv()">Show Div</a>
<div id="floating" name="floating" style="border:s olid 2px red;width:
200;height:200; display:none;" >WELCOME
<div><input id="test" name="test" value="test"></div>
</div>
<Script>
var myFloatingDiv = "floating"

function ShowDiv() {
document.getEle mentById("float ing").style.dis play = "block";
}
function HideDiv(e) {
if(!e) e = event;
var myElement = e.target || e.srcElement;
var displyProperty = "none"
for(;myElement != null ;myElement = myElement.paren tNode) {
if(myElement.id == myFloatingDiv) {
displyProperty = "block";
break;
}
}
document.getEle mentById(myFloa tingDiv).style. display =
displyProperty;
}
</script>
</body>
</html>

**Dan Rumney** · Jun 27 '08, 07:13 PM

Re: page event to hide floating div

Lee wrote:

This should work with IE6+ and Firefox. I havent tested on any other
browsers.
>
<html>
<body onclick="HideDi v(event)">
<a href="Javascrip t: ShowDiv()">Show Div</a>
<div id="floating" name="floating" style="border:s olid 2px red;width:
200;height:200; display:none;" >WELCOME
<div><input id="test" name="test" value="test"></div>
</div>
<Script>
var myFloatingDiv = "floating"
>
function ShowDiv() {
document.getEle mentById("float ing").style.dis play = "block";
}
function HideDiv(e) {
if(!e) e = event;
var myElement = e.target || e.srcElement;
var displyProperty = "none"
for(;myElement != null ;myElement = myElement.paren tNode) {
if(myElement.id == myFloatingDiv) {
displyProperty = "block";
break;
}
}
document.getEle mentById(myFloa tingDiv).style. display =
displyProperty;
}
</script>
</body>
</html>

That won't do what the OP is looking for in the case that the user
clicks outside of the floating div, but not directly on the page
background... eg on an image or a button.

Whether this is a significant problem depends on the makeup of the rest
of the page.

That alternative is to prevent the event from bubbling up from the
floating div. That means that the floating div will catch all onClick
events associated with it and its children and prevent them from
reaching the body's onclick handler.

**Lee** · Jun 27 '08, 07:13 PM

Re: page event to hide floating div

On Jun 3, 2:37 pm, Dan Rumney <danrum...@7761 7270mail.netwro te:

Lee wrote:

This should work with IE6+ and Firefox. I havent tested on any other
browsers.

>

<html>
<body onclick="HideDi v(event)">
<a href="Javascrip t: ShowDiv()">Show Div</a>
<div id="floating" name="floating" style="border:s olid 2px red;width:
200;height:200; display:none;" >WELCOME
<div><input id="test" name="test" value="test"></div>
</div>
<Script>
var myFloatingDiv = "floating"

>

>
That won't do what the OP is looking for in the case that the user
clicks outside of the floating div, but not directly on the page
background... eg on an image or a button.
>
Whether this is a significant problem depends on the makeup of the rest
of the page.
>
That alternative is to prevent the event from bubbling up from the
floating div. That means that the floating div will catch all onClick
events associated with it and its children and prevent them from
reaching the body's onclick handler.- Hide quoted text -
>
- Show quoted text -

The request was to hide the div if anything on the page (Image,
button, link, etc.) was clicked other than within the div in
question.

Of course there are instances where this would break. For example: if
a image, button or other element on the page (not in the hidden div)
had script that canceled the bubble.

But, Images and buttons should bubble up to the body onclick event and
fire the HideDiv() function (given that they do not
window.event.ca ncelBubble = true; as I mentioned earlier). The
HideDiv() function is smart enough to know if the event was fired from
within the div or not.

Of course you could do onclick="window .event.cancelBu bble = true;"
inside the hide able div, but you would still need a function that
hides the div on the body. Both my last post and the following code do
the same thing, just in different ways.

Example of cancelBubble in div:
--------------------------------------------------------------------------------------
<html>
<body onclick="HideDi v(event)">
<a href="Javascrip t: ShowDiv()">Show Div</a>
<div id="floating"
name="floating"
style="border:s olid 2px red;width: 200;height:200; display:none;"
onclick="window .event.cancelBu bble = true;">
WELCOME
<div>
<input id="test" name="test" value="test" onclick="alert( 'u did
it')">
</div>
</div>
<BR><BR>
<img src="pagerror.g if" onclick="alert( 'hi')">
<input type=button value=test onclick="window .event.cancelBu bble =
true; alert('dont press me')">
<Script>
var myFloatingDiv = "floating"

function ShowDiv() {
document.getEle mentById(myFloa tingDiv).style. display =
"block";
}

function HideDiv(e) {
document.getEle mentById(myFloa tingDiv).style. display = "none"
}
</script>
</body>
</html>
------------------------------------------------------------

Maybe I missunderstood you Dan, have you broken my code :), please
post.

**Dan Rumney** · Jun 27 '08, 07:13 PM

Re: page event to hide floating div

Lee wrote:
[snip]

>That won't do what the OP is looking for in the case that the user
>clicks outside of the floating div, but not directly on the page
>background.. . eg on an image or a button.

[snip]

Of course there are instances where this would break. For example: if
a image, button or other element on the page (not in the hidden div)
had script that canceled the bubble.
>
But, Images and buttons should bubble up to the body onclick event and
fire the HideDiv() function (given that they do not
window.event.ca ncelBubble = true; as I mentioned earlier). The
HideDiv() function is smart enough to know if the event was fired from
within the div or not.

Doy!

This is just a simple case of Dan being wrong due to late engagement of
brain.

Perhaps I can pretend that this was an attempt at the Socratic Method to
allow you to further explain your code ;o)

page event to hide floating div

page event to hide floating div

Comment

Comment

Comment

Comment

Comment

Comment