By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,679 Members | 1,063 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,679 IT Pros & Developers. It's quick & easy.

page event to hide floating div

P: n/a
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.
Jun 27 '08 #1
Share this Question
Share on Google+
6 Replies


P: n/a
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
Jun 27 '08 #2

P: n/a
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
(addEventListener/removeEventListener for mozilla) methods. They allow you
to keep adding events to an element.
"Dan Rumney" <da*******@warpmail.netwrote in message
news:a0**********************************@c65g2000 hsa.googlegroups.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

Jun 27 '08 #3

P: n/a
Lee
This should work with IE6+ and Firefox. I havent tested on any other
browsers.

<html>
<body onclick="HideDiv(event)">
<a href="javascript: ShowDiv()">Show Div</a>
<div id="floating" name="floating" style="border:solid 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.getElementById("floating").style.display = "block";
}
function HideDiv(e) {
if(!e) e = event;
var myElement = e.target || e.srcElement;
var displyProperty = "none"
for(;myElement != null ;myElement = myElement.parentNode) {
if(myElement.id == myFloatingDiv) {
displyProperty = "block";
break;
}
}
document.getElementById(myFloatingDiv).style.displ ay =
displyProperty;
}
</script>
</body>
</html>
Jun 27 '08 #4

P: n/a
Lee wrote:
This should work with IE6+ and Firefox. I havent tested on any other
browsers.

<html>
<body onclick="HideDiv(event)">
<a href="javascript: ShowDiv()">Show Div</a>
<div id="floating" name="floating" style="border:solid 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.getElementById("floating").style.display = "block";
}
function HideDiv(e) {
if(!e) e = event;
var myElement = e.target || e.srcElement;
var displyProperty = "none"
for(;myElement != null ;myElement = myElement.parentNode) {
if(myElement.id == myFloatingDiv) {
displyProperty = "block";
break;
}
}
document.getElementById(myFloatingDiv).style.displ ay =
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.
Jun 27 '08 #5

P: n/a
Lee
On Jun 3, 2:37*pm, Dan Rumney <danrum...@77617270mail.netwrote:
Lee wrote:
This should work with IE6+ and Firefox. *I havent tested on any other
browsers.
<html>
<body onclick="HideDiv(event)">
<a href="javascript: ShowDiv()">Show Div</a>
<div id="floating" name="floating" style="border:solid 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.getElementById("floating").style.display = "block";
}
function HideDiv(e) {
* *if(!e) e = event;
* *var myElement = e.target || e.srcElement;
* *var displyProperty = "none"
* *for(;myElement != null ;myElement = myElement.parentNode) {
* * * * * *if(myElement.id == myFloatingDiv) {
* * * * * * * * * *displyProperty = "block";
* * * * * * * * * *break;
* * * * * *}
* *}
* *document.getElementById(myFloatingDiv).style.disp lay =
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.- 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.cancelBubble = 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.cancelBubble = 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="HideDiv(event)">
<a href="javascript: ShowDiv()">Show Div</a>
<div id="floating"
name="floating"
style="border:solid 2px red;width: 200;height:200;display:none;"
onclick="window.event.cancelBubble = true;">
WELCOME
<div>
<input id="test" name="test" value="test" onclick="alert('u did
it')">
</div>
</div>
<BR><BR>
<img src="pagerror.gif" onclick="alert('hi')">
<input type=button value=test onclick="window.event.cancelBubble =
true; alert('dont press me')">
<Script>
var myFloatingDiv = "floating"

function ShowDiv() {
document.getElementById(myFloatingDiv).style.displ ay =
"block";
}

function HideDiv(e) {
document.getElementById(myFloatingDiv).style.displ ay = "none"
}
</script>
</body>
</html>
------------------------------------------------------------

Maybe I missunderstood you Dan, have you broken my code :), please
post.
Jun 27 '08 #6

P: n/a
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.cancelBubble = 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)
Jun 27 '08 #7

This discussion thread is closed

Replies have been disabled for this discussion.