Solved

Firing onclick event when clicked "anywhere" in the page

Posted on 2007-03-28
8
202 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Close "X" button on window popup in Firefox 7 36
Google Map JavaScript API 4 39
Message not shown 5 30
two layers of simple javascript validation 2 21
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now