473,888 Members | 1,662 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

page event to hide floating div

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
6 2534
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
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" <da*******@warp mail.netwrote in message
news:a0******** *************** ***********@c65 g2000hsa.google groups.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
Lee
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>
Jun 27 '08 #4
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.
Jun 27 '08 #5
Lee
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"
function ShowDiv() {
* *document.getEl ementById("floa ting").style.di splay = "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.i d == myFloatingDiv) {
* * * * * * * * * *displyProperty = "block";
* * * * * * * * * *break;
* * * * * *}
* *}
* *document.getEl ementById(myFlo atingDiv).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.- 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.
Jun 27 '08 #6
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)
Jun 27 '08 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
22025
by: Pete | last post by:
I have some funky form/event behavior. Access 97. Split frontend/backend, using Access security. I have the same behavior (or lack of behavior) for the pag_Click() event of two separate pages on different menu forms. Details: frmTRNMenu is the main menu of the application. It uses tabbed pages to logically separate menu items. The last tab on the list is different - it has an image and then "O&M". Clicking on this last page will...
4
1420
by: NH | last post by:
Hi, I have a mouseover event on a control, is there a way of opening another asp.net webform and having it close automatically when the mouseoff even occurs? I can easily open a new window but cant figure out how to make it close automatically on the mouseoff event. I think I need to wrap the page in a div and dynamically hide and display it.
1
2076
by: DJG79 | last post by:
Hi all, I am using an open source menu that i found and it works great, except for one thing that when the web page is not scrolled to the very top the drop down links will not stay visible. Has anyone else had this sort of problem with javascript? and any ideas how to fix it would be greatly appreciated.. I have included a copy of the code below, thanks. /**
10
2441
by: Benton | last post by:
Hi there, I have a UserControl with a couple of textboxes and a couple of buttons ("Save" and "Cancel"). The Click event for this buttons is in the UserControl's codebehind of course, so here's my question. Once the UserControl is dropped onto the container page, how can I perform some action on the codebehind of the container page from the codebehind of the UserControl? For instance, suppose that the UserControl is dropped inside one...
2
4906
by: vunet.us | last post by:
Hello JavaScript experts, I have a floating div which I drag all over the page. If the page has scrollbars and users drag the floating div to the very top, page scrolls up too. The problem occurs at this moment. As page scrolls up, the div gets detached from the mouse while dragging. How can I keep the floating div to always stay attached to the mouse during a dragging process and scrolling the page? Plug and Play code is a good example...
4
1909
by: sid | last post by:
Can someone tell me how to detect "Action Cancelled" page with out polling. I have a frame set and I want to make sure the other frame is displaying what it is supposed to without polling. For some reason the page does not file OnError or OnLoad events. Any help is appreciated. Thanks
1
4859
by: mbruyns | last post by:
i have been trying (and sometimes succeeding) to use the modalpopupextender to show various panels of controls on my asp pages. the strange problem that i keep on running into is that sometimes it works, displaying an awesome popup, while other times, it doesn't show a popup at all, but rather just page posts back and the panel becomes visible at the bottom of the page (where it is situated in the designer). what is even stranger to me is that...
3
3942
by: PhilTheGap | last post by:
Hello, I woulf like to hide an activeX object in a aspx page. The ActiveX is decalred statically in the HTML code, and I'e tried to set the html visible "property" to "false" in the javascript page_load function (in the aspx page). It didn't do anything although the code is executed correctly (I check with an alert...). Do you see why ?
1
9416
by: Bali | last post by:
Default.aspx is the starting page containing a control(ascx) which has asp:button control on it. On the button click event it has to open a new page as a modal control. Since refreshing a page in a dialog box ended up opening up a new browser window with the aspx page, I read on a forum that I should use the iframe control and since I have to open a bunch of pages as diaogboxes, I created a general page(Container.aspx) which has an...
0
11176
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
10772
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...
0
10434
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9593
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
7988
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...
0
7144
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5812
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
6012
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4241
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.