Develop Reference

Toggle div and keep open

I have some jquery to toggle a div to reveal some extra search fields on clicking a button. However those fields have an onchange event ("this.form.submit()" ) so every time they are used the div closes.
I guess I need to set some sort of cookie that keeps the div open until a reset button is pressed. The current script is
<script type="text/javascript">
$(function ($) {
var reveal_wrapper = $('.advancedsearch');
$('button.advancedsearchbutton').click(function () {
$(this).toggleClass('open');
reveal_wrapper.slideToggle(400);
return false;
});
});
</script>

You don't need any cookie... You can use variables to keep the div open/close.
Every time your onchange event is called you can test the status of your div. In the event you can choose to close the div or open

Use:
$('button.advancedsearchbutton').click(function (e) {
$(this).toggleClass('open');
reveal_wrapper.slideToggle(400);
e.stopPropagation();
return false;
});
See more about e.stopPropagation() here: https://api.jquery.com/event.stoppropagation/

how can I check if a particular item is clicked with .blur() in jquery

I have an autocomplete dropdown that appears when a user starts typing in a textbox (I'm using jquery mobile but I don't think that's important to my problem). I want to be able to hide the whole dropdown list when a user clicks anywhere on the page. However, I don't want to hide the dropdown when a user actually clicks on the dropdown itself.
Is there a way I could catch the click event in order to know what was clicked?
Here's my blur function:
//hide autocomplete when dropdown is not clicked
$("#search-div input").blur(function () {
$("#autocomplete-list").hide();
});
I was thinking of somehow putting an if statement in my blur function. Here's my pseudo code:
if( dropdown clicked)
{
run code to take text from dropdown and place in textbox
}
else
{
hide dropdown
}
Would it be possible to know whether my dropdown is clicked or something else is clicked while in my blur function? When I debug my javascript I'm only seeing an event that's related to the textbox doing the blur()
Edit:
Here is a function I'm using to handle when the dropdown is clicked:
$( document).on( "click", "#autocomplete-list li", function() {
var selectedItem = event.target.innerHTML;
$(this).parent().parent().find('input').val(selectedItem);
$('#autocomplete-list').hide();
runSearchQuery();
});

You can listen for any click, not just a blur, and then check what the clicked element was. e.currentTarget gives you what was clicked.
var clickHandler = function(e) {
if ($(e.currentTarget).hasClass('dropdown')) {
// do nothing
} else {
// Make sure you unregister your event every
// time the dropdown is hidden.
$(window).off('click', clickHandler);
// hide
}
}
// When the dropdown comes down, register an event on the whole page.
$(window).on('click', clickHandler);

Hide when click outside div box, but if and only if mouse up and down start at outside

I have a login button (class = login-button), where if the button click, it will show a div box with login form in it (class = login-box) e.g:
$(document).ready(function(){
$('.login-button').click(function(){
$( ".login-box" ).show();
});
});
and now, the way I hide the .login-box if user click outside is like this
$(document).mouseup(function(e){
var targetbox = $('.login-box');
if(!targetbox.is(e.target) && targetbox.has(e.target).length === 0){
$('.login-box').fadeOut('fast');
}
});
But the problem is on Chrome and Safari only (not Firefox), if user select a textbox as in would like to delete the text, highlight the text, but release the button outside the div, it will hide the login-box, but on Firefox it's not.
My question is how to prevent this from happening. Is there anyway to hide the box if and only if user click the mouse outside the box and release the mouse outside the box ?

Just use click instead of mouseup - what you described is what click does. Prevent the event bubbling up to stop the click of the button clicking document.
Demo
$(document).ready(function(){
$('.login-button').click(function(event){
event.stopPropagation();
$( ".login-box" ).show();
});
});
$(document).click(function(e){
var targetbox = $('.login-box');
if(!targetbox.is(e.target) && targetbox.has(e.target).length === 0){
$('.login-box').fadeOut('fast');
}
});

Detecting when a user clicks outside a div

I'm showing the user a modal/lightbox. The modal shows up and the rest of the page goes dim when the user clicks a button. Usual stuff.
However I want to do this. If the user clicks any element outside of the modal, I want the modal to go away and the page to return to normal.
How can this be done? I know I can set an onclick event for body, and then check if event target is my modal, but what if the user clicks on a link/textbox/button within the modal? In that case, target won't be the modal. How can I solve this?
Is there a way to check if the event target is contained with <div id="modal"></div>, so if it is, I won't close the modal, and if not, that means user clicked outside the modal and I can close it?

jsBin demo
$(document).mouseup(function(e){
if(e.target.id !== 'modal' ){
$('#modal').hide();
}
});
$('#modal').mouseup(function(e){
e.stopPropagation(); // prevent mouseup propagate to underneath layers
});

You could put a div under the modal that fills the entire space and attach your click handler to it.

$("body").click(function(e){
if( ! $(e.target).closest("#modal").length ){
$('#modal').hide();
}
});
demo

Another one approach:
var mouseOverModal = false;
$(document).click(function(e){
if ( ! mouseOverModal ){
// close modal
}
});
$('#modal').bind("mouseenter mouseleave", function(e){
mouseOverModal = ( "mouseenter" == e.type );
})
$('#open-modal-handler').click(function(){
// open modal
return false; // <- IMPORTANT
})

jQuery: Hide element on click anywhere else apart of the element [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 1 year ago.
I'm trying to achieve that a div hides if user clicks anywhere except on the element. I've got following code doing toggle() if user clicks on a button. I want the button click to stay plus if the Details element is visible, reacts to other parts of the screen.
$('.nav-toggle').click(function() {
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function() {
if ($(this).css('display') == 'none') {
//change the button label to be 'Show'
toggle_switch.html('Show Details');
} else {
//change the button label to be 'Hide'
toggle_switch.html('Hide Details');
}
});
});

You can resort to the concept of event delegation.
$(function() {
$(document).on('click', function(e) {
if (e.target.id === 'div1') {
alert('Div Clicked !!');
} else {
$('#div1').hide();
}
})
});​
Check FIDDLE
I did not understand what you meant by integrating with the other part.. This is the basic idea..

You can use the jQuery .blur() function to hide a div when user click on other element (like link, boutton, whathever..)
The blur event is fire when an element is loosing the focus (user select another element on the DOM tree)
I don't understand the link with your toggle. If your toggle button manage the DIV, its inside the toggle function that you should place the hide()/show() on the div, in the same time as updating the text of the button.