[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Firing onclick event when clicked "anywhere" in the page

Posted on 2007-03-28
8
Medium Priority
?
215 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 2000 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

650 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