We Keep Coding

Div toggle on checkbox but detect click when outside of the div to toggle off

I'm trying to make my burger menu detect click when outside of the menu (.NavMenu) and change the hamburger checkbox back to unselected.
I've tried using event.stopPropagation(); and trying to detect clicks in the document but my javascript knowledge is really limited so I am either not being able to show .NavMenu at all or .NavMenu closes when clicked outside but the hamburger menu stays as if it was open (X).
Can anyone help me with how to get the menu to close when clicked outside of the div that will also trigger the checkbox?
http://jsfiddle.net/s9ndequ2/

Add id 'burgerMenu' on div with class='NavMenu'.
And modify your JavaScript as
$('#burger').click(function() {
if( $(this).is(':checked')) {
$(".NavMenu").show();
} else {
$(".NavMenu").hide();
}
});
$('body').click(function(event){
removeBurger(event)
})
//this detects that user has clicked outside the menu
function removeBurger(e){
var targ;
if (!e) {
var e = window.event;
}
if (e.target) {
targ=e.target;
} else if (e.srcElement) {
targ=e.srcElement;
}
if(targ.id!="burgerMenu" && targ.id!="burger"){
if ( $('#burger').is(':checked')) {
$(".NavMenu").hide();
$( "#burger" ).prop( "checked", false );
}
}
}
Hope this will help.

You can achieve that by giving some id or class to the main div which will holding your page contents and then in script you can detect whether click has been performed inside that div or not :
Considering your main div has class mainDiv you can add below snippet to your script to achieve what you have asked for :
$(".mainDiv").click(function(){
if($('#burger').is(':checked'))
$('#burger').click();
});

Try this at your fiddle:
$('#burger').click(function(event) {
event.stopPropagation();
if( $(this).is(':checked')) {
$(".NavMenu").show();
} else {
$(".NavMenu").hide();
}
});
$('body').click(function() {
if ( $('#burger').is(':checked')) {
$(".NavMenu").hide();
$( "#burger" ).prop( "checked", false );
}
})
$('.NavMenu').click(function(event) {
event.stopPropagation();
})
http://jsfiddle.net/s9ndequ2/2/

Hide menu when ESC clicked using Javascript

I am currently customising an off-screen navigation menu.
I'd like to use Javascript to close the menu when ESC is clicked or if the user clicks outside of the menu's focus. How do I achieve this?
Here's my example: http://jsfiddle.net/q55xtcw4/
I've tried using this code:
$( document ).on( 'click', function ( e ) {
if ( $( e.target ).closest( elem ).length === 0 ) {
$( elem ).hide();
}
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$( elem ).hide();
}
});
but no success.
Many thanks for any guidance here.

Dirty but useful solution for you change your JS code into this
$(".nav-trigger").click(function(e){e.stopPropagation()})
$( document ).on( 'click', function ( e ) {
$( ".nav-trigger" ).prop("checked",false);
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$( ".nav-trigger" ).prop("checked",false);
}
});
Here is the working fiddle
here is the updated fiddle

Here is a working JSFiddle: http://jsfiddle.net/e9wa0093/2/
Basically, elem wasn't defined in your example. Same with show() and hide() methods. The changes I made to your code merely updates the checked property of the hidden checkbox used to control the position (i.e., visibility) of the menu.
Edit:
Corrected JSFiddle, as commented below: http://jsfiddle.net/e9wa0093/4/

Use This :-
$(document).keyup(function(e) {
if (e.keyCode == 13) $('.save').click(); // enter
if (e.keyCode == 27) $('.cancel').click(); // esc
});
FOR more info click here

elem is not something on your DOM
$( elem ).hide();
you should change it into your class or id like:
$('#menu').hide();

Try using something like this:
<script>
$(document).ready(function(){
$(document).keypress(function (evt) {
//Determine where our character code is coming from within the event
var charCode = evt.charCode || evt.keyCode;
if (charCode == 27) { //Enter key's keycode
//do what ever you want
$('#someid').hide();
}
});
});
</script>

The solution you are using is based on a CSS hack using a hidden checkbox.
You can control the status of the menu by toggling the value of this checkbox, rather than using javascript to hide the menu. Hiding the menu using javascript will actually break the CSS hack, as the CSS depends on the menu being visible but just offset from the side of the screen.
So replace:
$( elem ).hide();
With:
$("#nav-trigger").click();

The below code will collapse the menu on pressing escape
$(document).keyup(function(e) {
if (e.keyCode == 27) { $("#nav-trigger").removeAttr("checked") }
});

Prevent bootstrap dropdown from closing on click event [duplicate]

This question already has answers here:
How do I prevent my dropdown from closing when clicking inside it?
(3 answers)
Closed 4 years ago.
My menu uses Bootstrap 3 and I can't prevent dropdown from closing on click. How can I do it?
JSFiddle
// Add open class if active
$('.sidebar-nav').find('li.dropdown.active').addClass('open');
// Open submenu if active
$('.sidebar-nav').find('li.dropdown.open ul').css("display","block");
// Change active menu
$(".sidebar-nav > li").click(function(){
$(".sidebar-nav > li").removeClass("active");
$(this).addClass("active");
});
// Add open animation
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Add close animation
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

You need to stop event from bubbling up the DOM tree:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.
Demo: http://jsfiddle.net/wkc5md23/3/

I believe this should be a more proper solution, as stopping propagation on the click event might sometimes cause issues later on in development. You may read more into it here: http://css-tricks.com/dangers-stopping-event-propagation/ Instead this solution stops propagation on the Bootstrap hide (hide.bs.dropdown) event, which stops it from continuing on to the hidden (hidden.bs.dropdown) event.
The following code has been taken and edited by myself to make it work on all Bootstrap dropdowns, as it has originally been taken from here: Preventing bootstrap dropdown from closing on click I personally prefer this way also because it uses the built in Bootstrap dropdown events, which could be found here: https://getbootstrap.com/docs/3.4/javascript/#dropdowns-events.
$(function () {
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
$(this).data('closable', true);
} else {
$(this).data('closable', false);
}
},
'hide.bs.dropdown': function (event) {
hide = $(this).data('closable');
$(this).data('closable', true);
return hide;
}
});
});

You can disable the dropdown functionality temporarily. This is a workaround.
Example with input field inside the drop-down "menu":
//for dropdown field not closing when clicking on inputfield
$(document).on('focus', 'input', function (e) {
// this attribute can be anything except "dropdown", you can leave it blank
$('#yourDropdownID').attr('data-toggle', 'off');
});
//for dropdown field back to normal when not on inputfield
$(document).on('focusout', 'input', function (e) {
$('#yourDropdownID').attr('data-toggle', 'dropdown');
});
This can be used on anything that is clickable and you can define individually what items clicked can close or not close the drop-down menu.

Not close in click out side menu
$(function() {
var closeble = false;
$('body').on('click', function (e) {
if (!$(event.target).is('a.dropdown-toggle')) {
closeble = false;
}
});
$('.dropdown').on({
'click': function (event) {
if ($(event.target).closest('.dropdown-toggle').length) {
closeble = true;
} else {
closeble = false;
}
},
'hide.bs.dropdown': function () {
return closeble;
}
});
});

select div but not inputs within div jquery

I'm trying to select a div for a click event but not the inputs within said div. I thought this would do it but it does not work. here is a demo. Thank you
html
<div id = "test"><input></div>
js
$('#test:not(input)').click(function(){
alert();
});

You could check to see if the clicked element is an input element using !$(e.target).is('input')
Updated Example
$('#test').on('click', function (e) {
var $target = $(e.target);
if (!$target.is('input')) {
alert('clicked');
}
});

When you click on the input, the click event bubbles to the div above it.
You can stop this by calling stopPropagation or stopImmediatePropagation on the event object.
http://jsfiddle.net/t66f06oL/1/
$( '#test' ).on( 'click', function() {
alert();
} );
$( '#test' ).on( 'click', 'input', function( e ) {
e.stopImmediatePropagation();
} );

When you click on the input control your click event is actually caught by the parent div. You can fix this by changing your code to this:
$('#test:not(input)').click(function(){
alert();
});
$('#test').find('input').click(function(e){
e.stopPropagation();
});

jquery slidetoggle how to set if mouse click other, close slidetoggle

I using jquery slidetoggle to show a DIV
but I need set if mouse click not in div.list go close this slideToggle
$( "#list_button" ).click(function() {
$( ".list" ).slideToggle( "fast" );
});
I only found if mouseout.... I cant find how to set if click any "anywhere on the page" to close this toggle
for testing : http://jsfiddle.net/sdgwbyv8/

$( "body" ).click(function( event ) {
if(
event.target.className!='list' && event.target.parentNode.parentNode.className!="list"
) {
$( ".list" ).slideToggle('fast');
}
});
Demo: http://jsfiddle.net/sdgwbyv8/9/ One possible solution, i guess there are better ones....

You can do it by event.stopPropagation():
$("#list_button").click(function (event) {
if ($(".list").is(":hidden")) {
event.stopPropagation();
$(".list").slideToggle("fast");
}
});
$('body').click(function () {
$(".list").hide();
});
$(".list").click(function (event) {
event.stopPropagation();
});
Working Fiddle