I have a floating div that gets displayed, and I want it to be hidden when the user clicks off the div. This would be similar to the .hover() funtion callback when hovering off an element. Only I want to do this for click.
I tried just setting a click event for the body, which would hide the div, but that gave unexpected results.
Anyone have ideas on how I could easily do this?
If you want to clear the div when you click somewhere else in the page, you can do something like:
$('body').click(function(event) {
if (!$(event.target).closest('#myDiv').length) {
$('#myDiv').hide();
};
});
You're going to need to monitor the mouseDown event for the whole page, but you'll have to take note when the user is clicking inside your floating div.
I would suggest adding a hover event to your floated div so when the user is hovering over it, mouseDown is disregarded, but when it is not being hovered over mouseDown would close it
Another, possibly simpler, option would be to add a transparent div between the floating DIV and the rest of the page.
A simple click event on the transparent DIV could handle the hiding, and it would avoid the issues you are encountering with the click event.
Here's a full-fledged event-driven approach
Zee code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function()
{
var $layer = $('#layer');
var $body = $('html');
$layer
.bind( 'summon', function( e )
{
$layer.show();
$body.bind( 'click', dismissLayer );
} )
.bind( 'dismiss', function( e )
{
$layer.hide();
$body.unbind( 'click', dismissLayer );
} )
.click( function( e )
{
e.stopPropagation();
})
.trigger( 'dismiss' )
;
function dismissLayer( e )
{
$layer.trigger( 'dismiss' );
}
// This is optional - this just triggers the div to 'visible'
$('#control').click( function( e )
{
var $layer = $('#layer:hidden');
if ( $layer.length )
{
$layer.trigger( 'summon' );
e.stopPropagation();
}
} );
});
</script>
<style type="text/css">
#layer {
position: absolute;
left: 100px;
top: 20px;
background-color: red;
padding: 10px;
color: white;
}
#control {
cursor: pointer;
}
</style>
</head>
<body>
<div id="layer">test</div>
<span id="control">Show div</span>
</body>
</html>
It's a lot of code I know, but here just to show a different approach.
You can try this. http://benalman.com/projects/jquery-clickoutside-plugin/
If you're using Jquery, you could use a selector like:
$("*:not(#myDiv)").live("click", function(){
$("#myDiv").hide();
});
Using an event handler on the document works well for me:
function popUp( element )
{
element.onmousedown = function (event) { event.stopPropagation(); };
document.onmousedown = function () { popDown( element ); };
document.body.appendChild( element );
}
function popDown( element )
{
document.body.removeChild( element );
document.onmousedown = null;
}