Solved

Firing onclick event when clicked "anywhere" in the page

Posted on 2007-03-28
8
208 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__
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

738 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