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?
Source: Tips4all
Another, possibly simpler, option would be to add a transparent div between the floating DIV and the rest of the page.
ReplyDeleteA simple click event on the transparent DIV could handle the hiding, and it would avoid the issues you are encountering with the click event.
If you want to clear the div when you click somewhere else in the page, you can do something like:
ReplyDelete$('body').click(function(event) {
if (!$(event.target).closest('#myDiv').length) {
$('#myDiv').hide();
};
});
The Best way to do this is:-
ReplyDelete$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("divtohide")) {
$(".divtohide").hide();
}
});
Surely you're looking for the blur event?
ReplyDeleteIf you're using Jquery, you could use a selector like:
ReplyDelete$("*:not(#myDiv)").live("click", function(){
$("#myDiv").hide();
});
Here's a full-fledged event-driven approach
ReplyDeleteCustom events handle the "summoning" and "dismissing" of the layer as to not step on the toes of other click-based events
document.body listens to for a dismiss event only when the layer in question is actually visible
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.
ReplyDeletehttp://benalman.com/projects/jquery-clickoutside-plugin/
Using an event handler on the document works well for me:
ReplyDeletefunction 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;
}
This is a function to handle the click out event, I feed it the selector of the popup, and the jquery element. Probably better served as a jquery plugin, but this is simple enough.
ReplyDeleteclickOut = function(selector, element) {
var hide = function(event) {
// Hide search options if clicked out
if (!$(event.originalEvent.target).parents(selector).size())
$(element).hide();
else
$(document).one("click",hide);
};
$(document).one("click", hide);
};
So if you have a popup element like test you can use my function like clickOut("div.popup", $("div.popup"));
I've found the solution in a forum... but I can't find it back to credit the orginal author.
ReplyDeleteHere is the version (modified that lives in my code).
$(document).bind('mousedown.yourstuff', function(e) {
var clicked=$(e.target); // get the element clicked
if( clicked.is('#yourstuff')
|| clicked.parents().is('#yourstuff')) {
// click safe!
} else {
// outside click
closeIt();
}
});
function closeIt() {
$(document).unbind('mousedown.emailSignin');
//...
}
I also have ESC keyup bindings and a 'close' html anchor not pictured above.
If you do not want to hide the element that you will show by clicking itself:
ReplyDeletevar div_active, the_div;
the_div = $("#the-div");
div_active = false;
$("#show-the-div-button").click(function() {
if (div_active) {
the_div.fadeOut(function(){
div_active = false;
});
} else {
the_div.fadeIn(function(){
div_active = true;
});
}
});
$("body").click(function() {
if div_active {
the_div.fadeOut();
div_active = false;
}
});
the_div.click(function() {
return false;
});
example you click a link element to display div menu , you simply bind blur function to link element to hide div menu
ReplyDelete$('a#displaymenu').click(function(){
$("#divName").toggle();
}).blur(function() {$("#divName").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.
ReplyDeleteI 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
$('#divName').click(function(){
ReplyDelete$(this).toggle();
})