Solved

Firing onclick event when clicked "anywhere" in the page

Posted on 2007-03-28
8
203 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

813 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

11 Experts available now in Live!

Get 1:1 Help Now