We Keep Coding

Unable to repeat click event

This is basically a menu toggle feature which I want to repeat but can't achieve the intended unless I refresh the page. Clicking on .fa-bars adds class .animate to body which slides in the menu from the left, when the menu is visible clicking anywhere outside the menu area, it hides the menu as well as removes the class.animate from body.
This only works once then I refresh the page.
Any help in this regard will be appreciated
jQuery code
$(document).ready(function()
{
$(document).on('click', function()
{
if($('body').hasClass('animate'))
{
$('body.animate').on('click', function()
{
$(this).removeClass('animate');
});
}
else
{
$('.fa-bars').on('click', function()
{
$('body').addClass('animate');
});
}
});
});

I think he want to close menu when click on body only. This code may help:
$(document).ready(function () {
$('.fa-bars').on('click', function (evt) {
$('body').addClass('animate');
evt.stopPropagation();
});
$('body').on('click', function () {
if ($('body').hasClass('animate')) {
$('body').removeClass('animate');
}
});
});
Click on fb-bars to open menu
Click on body to close menu if already opened

Add/remove class on click - how do I remove the class on a second click area?

I have a menu with a dropdown, where the LI element gets an activeclass on click. I have, after a lot if struggle, managed to set a script that sets an active class to an div that I have hidden, which shows on the click as an overlay of the site (under the dropdown). everything works as It should, except if I click outside the dropdown to close it instead of clicking the menubutton. This doesnt change my overlay div's class- how do I change my script to work on clicks outside the dropdown aswell, and what should I target here?
The hidden div:
<div id="site-overlay"></div>
script:
$.noConflict();
jQuery(document).ready(function(){
jQuery('li').on('click', function(){
if(jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
})
});

This will work:
$.noConflict();
jQuery(document).ready(function () {
jQuery('li').on('click', function () {
if (jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
});
jQuery("#site-overlay").click(function () {
jQuery(this).removeClass("active");
});
});
Notice the new event handler.

You can add a click event to the document body and then check the click location:
$(document).click(function(event) {
if(!$(event.target).closest('#site-overlay').length) {
if($('#site-overlay').is(":visible")) {
$('#site-overlay').hide()
}
}
})

jQuery('li').on('click', function(){
...
}
This executes only when you click on 'li' element.
But what about clicking outside 'li' element?
Try to add or replace:
jQuery('body').on('click', function(){
if(jQuery('.megamenu li').hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
}

Jquery Delay overrule on next link or div hovered

I wrote a code where a div appears if someone hovers other div, I added the 5 seconds delay so the shown div stays but the problem is that I want it to stay until next link hovered. Means I need the first div to be disappeared if the second link hovered.
Here's JS Fiddle link of my existing code:
http://jsfiddle.net/np87e/880/
$( document ).ready(function() {
$("#theLink3").hover(
function () {
$("#theDiv3").slideDown();
},
function () {
$("#theDiv3").delay(5000).slideUp();
}
);
$("#theLink4").hover(
function () {
$("#theDiv4").slideDown();
},
function () {
$("#theDiv4").delay(5000).slideUp();
}
);
});

You need to call slideUp() of the div in next elements mouseenter callback
$("#theLink3").hover(function () {
$("#theDiv4").stop(true, true).slideUp();
$("#theDiv3").slideDown();
}, function () {
$("#theDiv3").delay(5000).slideUp();
});
Demo: Fiddle
Note: I'm not a fan of writing individual hover handlers like you have done. So
hover here
<div id="theDiv3" class="target">this is the div</div>
<hr />
hover here
<div id="theDiv4" class="target">this is the div</div>
<hr />
then
jQuery(function ($) {
var $targets = $('.target');
$(".trigger").hover(function () {
var $target = $(this).next('.target').stop(true, true).slideDown();
$targets.not($target).stop(true, true).slideUp();
}, function () {
$(this).next('.target').stop(true, true).delay(5000).slideUp();
});
});
Demo: Fiddle

Close footer by clicking anywhere on the DOM

I have a question concerning collapsing/expanding a footer. I have a simple basic collapse/expand script going, where when the "Open" button is clicked, the hidden footer slides up and when you click "Close" it slides back down and hides again. Now, I want to attach an instance where I can click anywhere on teh DOM when the footer is open and it will close.
This is the script:
$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
Thanks

$(document).ready(function () {
// Expand Panel
$("#footerOpen").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideDown("slow");
});
// Collapse Panel
$("#footerClose").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
// click anywhere on teh DOM when the footer is open and it will close.
$("body:not(#footerClose)").click(function (e) {
e.preventDefault();
$("div#footerPanel").slideUp("slow");
});
});
try this one, im using jquery not selector.

Attach a click handler to the document, and do the slideUp in there. You can use the event.target to determine whether or not to perform the slideUp:
$(document).on('click', function(e) {
// Don't slideUp if #footerOpen or #footerPanel are clicked
if ($(e.target).is('#footerOpen, #footerPanel')) {
return;
}
// Do the slideUp!
$('#footerPanel').slideUp('slow');
});
Here's a fiddle
If you have other elements within your #footerPanel, the above probably won't work as the target will likely be something other than #footerPanel, the best thing to do would be to add a click handler to #footerPanel, and prevent the event from propagating and triggering the above click handler:
$('#footerPanel').on('click', function(e) {
e.stopPropagation();
});
Here's another fiddle

Try this it worked for me...
$(document).click(function(event) {
var $target = $(event.target);
if(!$target.is("#footerPanel")){
$("#footerPanel").slideUp('slow');
}
});

Hover highlight child should not highlight parent

I am trying to highlight the element when I hover over it (adding class). I have nested elements on my page. What I want is, if i hover over the element, the immediate element gets highlighted not all the parent ones.
Here is the snippet
$("body *").hover(function (e)
{
$(this).addClass('test');
}, function ()
{
$(this).removeClass('test');
});`
http://jsfiddle.net/3ZGQr/1/

Try
$(document).ready(function (){
$("body").mouseover(function (e){
$(e.target).addClass('test');
}).mouseout(function (e) {
$(e.target).removeClass('test');
});
});
Demo: Fiddle