__php__
asked on
Firing onclick event when clicked "anywhere" in the page
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.
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";),
But I am not sure how to implement it. Please advise.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
ASKER
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("m yDiv");
// Functionality that displays the "content" in the "myDiv" area.
....
....
theObj.style.visibility="v isible";
}
</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!
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("m
// Functionality that displays the "content" in the "myDiv" area.
....
....
theObj.style.visibility="v
}
</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!
ASKER
actually I have this:
html>
<head>
<style>
#myDiv { display: block;}
</style>
<script>
function showDiv(content, someArg, e) {
theObj = document.getElementById("m yDiv");
// Functionality that displays the "content" in the "myDiv" area.
....
theObj.style.visibility="v isible";
}
</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.
html>
<head>
<style>
#myDiv { display: block;}
</style>
<script>
function showDiv(content, someArg, e) {
theObj = document.getElementById("m
// Functionality that displays the "content" in the "myDiv" area.
....
theObj.style.visibility="v
}
</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.
ASKER
Actually I found a way :)
Thanks for your help regarding "onclick" in the body tag. Is it valid in all browsers?
Thanks for your help regarding "onclick" in the body tag. Is it valid in all browsers?
Well, onclick in <body> is standard. But I cannot guarantee that this will work absolutely everywhere...
The onClick event of the body tag is standard for every browser that supports JavaScript and DOM, and that mean: all browsers.
<body onclick="thediv.style.visi
<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.canc
</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.