Solved

Firing onclick event when clicked "anywhere" in the page

Posted on 2007-03-28
8
204 Views
Last Modified: 2008-02-01
Hai,

I have a div content which is visible when an image is clicked. I want that div to disappear when I click "anywhere other than the div visible" area.

I thought this logic might work:  When the mouse is inside the div content, set a variable say "temp" to true (i.e. onmouseover="temp=true";), else if the mouse is outside the div content, set it to false (i.e. onmouseout="temp=false";). Now *whenever* the mouse is clicked "anywhere" in the page, look if the "temp" is true or false. If it is false, then make the div content disappear (visibility:hidden).

But I am not sure how to implement it. Please advise.
0
Comment
Question by:__php__
  • 3
  • 3
  • 2
8 Comments
 
LVL 11

Expert Comment

by:alexcohn
ID: 18814373
A simple example is like this:

<body onclick="thediv.style.visibility = 'hidden';">
<a onclick="if (thediv.style.visibility == 'hidden') { thediv.style.visibility = 'visible'; window.event.cancelBubble = true; } return false;" href="#">show the div</a>
<a onclick="alert('ignore the click'); window.event.cancelBubble = true; return false;" href="#">Click Ignored</a>
<div id="thediv" onclick="window.event.cancelBubble = true;" style="visibility: hidden; width: 200px; height: 200px; text-align: center; line-height: 200px; background: yellow; border: solid 2px black">This is the div</div>
</body>

Here we have the expected behavior for all clicks except for the clicks on the "Click Ignored" area, because this requested not to send the click notification to the <body> handler. If this limitation is acceptable, you can use this approach.
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 18814384
Check this method:


<html>
<head>
<title>Zvonko &#42;</title>
<style>
#myDiv { display: none;}
</style>
</head>
<body onClick="document.getElementById('myDiv').style.display='none';">
<a href="#" onClick="setTimeout('document.getElementById(\'myDiv\').style.display=\'block\'',100);return

false">Click me</a>
<div id="myDiv">Here we go</div>
</body>
</html>



0
 
LVL 63

Expert Comment

by:Zvonko
ID: 18814402
By the way, you can reduce the timeout from 100 to 1 to reduce the flicker.
And if you want, then you can put the same event handler from the image or in my example from the anchor to the div. By that second onclick event handler on the div is the div immediately redisplayed after it was hidden by the body onclick event handler.

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:__php__
ID: 18814529
Hi,

Thanks for your comments. Please assume my code is like this:

<html>
<head>
<style>
#myDiv { display: none;}
</style>
<script>
function showDiv(content, someArg, e) {
 theObj = document.getElementById("myDiv");
 // Functionality that displays the "content" in the "myDiv" area.
 ....
 ....
 theObj.style.visibility="visible";
}
</script>
</head>
<body>
<div id="myDiv"></div>
<a href="#" onClick="showDiv('some text<br>supporting html', true, event); return false">Click me</a>
</body>
</html>

Please advise how can I get the result for the above code!
0
 

Author Comment

by:__php__
ID: 18814580
actually I have this:

html>
<head>
<style>
#myDiv { display: block;}
</style>
<script>
function showDiv(content, someArg, e) {
 theObj = document.getElementById("myDiv");
 // Functionality that displays the "content" in the "myDiv" area.
 ....
 theObj.style.visibility="visible";
}
</script>
</head>
<body>
<div id="myDiv"></div>
<a href="#" onClick="showDiv('some text<br>supporting html', true, event); return false">Click me</a>
</body>
</html>

I cannot change the "display: block" in the style sheet :(

Please advise.
0
 

Author Comment

by:__php__
ID: 18814650
Actually I found a way :)

Thanks for your help regarding "onclick" in the body tag. Is it valid in all browsers?
0
 
LVL 11

Expert Comment

by:alexcohn
ID: 18814740
Well, onclick in <body> is standard. But I cannot guarantee that this will work absolutely everywhere...
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 18815149
The onClick event of the body tag is standard for every browser that supports JavaScript and DOM, and that mean: all browsers.



0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question