We Keep Coding

add and remove classes that toggle open and close full screen navigation

I'm currently working on a full screen navigation menu that opens when I click the hamburger icon. Right now I am able to toggle the navigation by adding a class called "open" that triggers when I click on the menu. But I am stuck when it comes to closing it. Could you review my code and let me know what I'm missing?
$(document).ready(function() {
$('#menu').on('click', function() {
$('.overlay').addClass('open');
$('#menu').removeClass('open-menu');
$('#menu').addClass('close-menu');
});
$('.#menu').on('click', function() {
$('.overlay').removeClass('open');
$('#menu').addClass('open-menu');
$('#menu').removeClass('close-menu');
});
});

use toogle function for this like
$( "#target" ).toggle(function() {
alert( "First handler for .toggle() called." );
}, function() {
alert( "Second handler for .toggle() called." );
});

How can I edit this one to expand onmouseenter and collapse onmouseleave

I am using a wordpress plugin that I have managed to change it a bit but I was thinking of making it expand onmouseenter and collapse onmouseleave but I am not sure how to edit it.
$(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-menu-close", function(e) {
var $catParent = $(this).closest('li.cat-parent');
var state = 'opened'
$catParent.toggleClass(state);
$(this).nextAll('ul.children:first').slideToggle(state);
});

You need to bind a function to the div:
$( 'div you want to hover selector' )
.mouseover(function() {
$catParent.toggleClass(state);
})
.mouseout(function() {
$catParent.toggleClass(state);
});
jQuery Mouseover

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;
}
});
});

Stopping propagation on multiple hover event

My home page contains multiple boxes.
On each boxes, when mouseover in or out , the title disappears and the content appears.
It works fine.
The problem is that when mouseovering more than one box on a short period of time, it is a mess.
$( ".views-field-wrapper" ).each(function(){
$( this ).hover(function() {
$( "#front_panel",this ).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
});
How can I stop the previous mouseover reaction when mouseovering another box?
EDIT :
My intial code: http://jsfiddle.net/tz3d6ct6/
Kumar's code that works perfectly with jquery > 1.6 (I must use jquery1.4) http://jsfiddle.net/hrkf5p7w/

Try to use stop() and no need to use loop to bind hover event,
$( ".views-field-wrapper" ).hover(function() { // no need to use each loop
$( "#front_panel",this ).stop(true).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).stop(true).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
Try it without using using delay() like,
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='views-field-wrapper type-t nodetype-t'>
<div id='front_panel'>title</div>
<div style='display:none' id='back_panel'>teaser</div>
</div>

On click add/remove overflow hidden

I'm trying to add/remove .css('overflow-y','hidden') onclick, Which I did. The problem appears when I try to remove that css, also onclick. But this time, user needs to click on another element.
Idea is to have modal (twitter bootstrap 2.3) window where there is some data and when user click on modal button (triggers) the css applies to html element in order to prevent scrolling of the website. And now when I click anywhere on modal (modal shuts down) but there is still overflow-y styling and because of it I can't scroll my page.
So this is what I've made, but I have been stuck here and don't know where I am making mistake. Could anyone help me with this one, and if is possible give me some advice so I could take care in future.
Thanks!
<script type="text/javascript">
$('#myModal').modal('hide') // initializes and invokes show immediately</p>
$('.note').delay(10000).fadeOut('slow');
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
alert('WORKS!');
}
else {
$modal.onclick( function() {
$html.css('overflow-y','scroll');
});
};
});
});
</script>

Put your css in a class and use jquery's .toggleClass() to show/hide the overflow.
Here's a simplified example: http://jsbin.com/towiyaqa/1/

You can use like this:
$button.on('click', function(e) {
$html.css('overflow-y','hidden' ? 'scroll' : 'hidden');
e.preventDefault();
})

Here is solution for problem:
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$('.note').delay(10000).fadeOut('slow');
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
console.log("overflow-y: hidden added");
}
});
$('#myModal').on('hidden.bs.modal', function () {
// do something…
console.log("fires myModal");
$html.css('overflow-y','scroll');
});
});
</script>