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

Why doesn't the hidden container reappear when I click on it?

I have a hidden container that contains comments, and a <div> with a <p> inside that says "Show all comments" that I click to show the comments. When I click the div it shows the hidden comments container perfectly, but when I click it again it doesn't hide the comments container. I am thinking there is something wrong with my jQuery code maybe?
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};

When you initialize commentsHidden it is never updated so it always has its initial value. You need to check if its hidden on every click. So you don't need an if statement to attach the event. Just attach a single click event and check inside the event if its hidden and continue accordingly.
$(".see-all").click(function() {
var commentsHidden = $(".comments-container").is(":hidden");
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});

When you call on('click', ..) or its shortcut click(..), you install a new handler. What ends up happening is that you have multiple handlers on the same object, and they all get called. Instead, either install the handler only once:
// In global code or code that gets executed upon module load
// Only once!
$(".see-all").click(function() {
if ($( ".comments-container" ).is( ":hidden" )) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});
or unbind the old handler:
$( ".see-all" ).off('click'); // Unbind all click handlers
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};

You need to check the flag state inside the click function(). The way you have it now will only bind the click handler once on page load.
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});

Try changing to
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
}
});
The click handler should only be bound once, and you need to check whether comments are hidden each time the p element is clicked.

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

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>

Modernizr.mq not working in Safari & multiple event triggers?

I've got a sub navigation that has 3 different styles and functions based on browser width. See it live here.
$(function() {
$(window).resize(function() {
if(Modernizr.mq('(min-width:641px) and (max-width: 1200px)')) {
$(".subnav-menu").click(function() {
$('.primary-subnav').slideToggle();
$('.subnav-close').show();
});
$(".subnav-close").click(function() {
$('.primary-subnav').slideToggle();
$('.subnav-close').hide();
});
$(".tablet-subnav li").click(function() {
$('.primary-subnav').slideToggle();
$('.subnav-close').hide();
});
}
else if(Modernizr.mq('(max-width: 640px)')) {
$(".subnav").click(function() {
$('.primary-subnav').slideToggle();
$('.subnav-mobile-open').toggle();
$('.subnav-mobile-close').toggle();
});
}
}).trigger('resize');
});
The menu that should be showing up on click is not showing up at all on Safari on my desktop or phone, tested on several other macs and got nothing. It's working fine in Chrome/Firefox other than sometimes it will fire the menu's slideToggle multiple times. What am I doing wrong?
Edit:: The menu appears to not expand in mobile safari or mobile chrome at all, whereas I thought this was purely a safari issue. The little arrow on mobile and the menu button tablet do change though, and if I tap under there were the menu should be, it reacts as if going to the link, but the menu is not visible... Really strange.

Try using .off( "click", "**" ) on the click event handlers that were added from one media query and replace them with the .on( "click" ) event handlers that you need for the current media query.
Also, you can create a nice fade effect without the common problem of multiple queued animations by adding .stop( true, true ) to the chain.
Without your html, I couldn't really test it, but here's about what it should look like:
$( window ).on( "resize", function ()
{
if( Modernizr.mq( "(min-width:641px) and (max-width: 1200px)" ))
{
$( ".subnav" ).off( "click", "**" );
$( ".subnav-menu" ).on( "click", function ()
{
$( ".primary-subnav" )
.stop( true, true)
.slideToggle();
$( ".subnav-close" )
.stop( true, true )
.show();
});
$( ".subnav-close, .tablet-subnav li" ).on(" click", function ()
{
$( ".primary-subnav" )
.stop( true, true )
.slideToggle();
$( ".subnav-close" )
.stop( true, true )
.hide();
});
}
else if ( Modernizr.mq( "(max-width: 640px)" ))
{
$( ".subnav-menu, .subnav-close, .tablet-subnav li" ).off( "click", "**" );
$( ".subnav" ).on( "click", function ()
{
$( ".primary-subnav" )
.stop( true, true )
.slideToggle();
$( ".subnav-mobile-open, .subnav-mobile-close" )
.stop(true, true)
.toggle();
});
}
})
.resize();