We Keep Coding

jQuery click event and settimeout

You can access full code with github pages link below.
Link
I'm developing the Matching game
When I click each li selector, class of the li will be change so it can change card open. But I want to make it after 2 second, class of the li selector will change class.
$(document).ready(function () {
$(".card").each(function () {
$(this).click(function () {
$(this).addClass("card open show"); // When click li element class will change to card open show
setTimeout(function(){
$(".card open show").addClass("card");
}, 2000);
});
});
});
when I click the li selector class will change to card open show and I want to make it after 2 seconds class will change to card.
I don't know why it's not working.

You need to remove the class from the element using $().removeClass()
Change $(".card open show").addClass("card"); to
$(this).removeClass("open show");
Also there is no need to iterate over the elements. You can directly attach the click event to the element
$(document).ready(function () {
$(".card").click(function () {
// since element already have class card, no need to add same class again
// only add the open and show class
$(this).addClass("open show");
setTimeout(function () {
$(this).removeCLass(" open show");
}, 2000);
});
});

Assuming every time click on any li it should close after 2 seconds.
$(this).click(function () {
var ele = $(this);
$(this).addClass("open show");
setTimeout(function(){
ele.removeClass("open show");
}, 2000);
});

You can use $().toggleClass() to toggle the classses before and after the timeout:
let element = this;
$(element).toggleClass("open show");
setTimeout(function() {
$(element).toggleClass("open show");
}, 2000);

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

Active thumb in image gallery

I made this image gallery but I want to give the active thumb a class="active". I can give the .small_image a class "active" if I click on it but then after I click the other thumbs they all get a class "active". So I thought if I make an if statement, if the rel and src of the big image and the Thumbnail are the same, give a class "active" but my code doesn't work. Can anyone tell me what I'm doing wrong?
http://jsfiddle.net/XNsHC/8/
$(document).ready(function () {
$(".small_image").click(function () {
event.preventDefault();
var image = $(this).prop("rel");
$('#under').prop('src', image);
$('#above').fadeOut(600, function () {
$('#above').prop('src', $('#under').prop('src')).css('display', 'block');
});
});
if($(".small_image").prop("rel") == $("#under").prop('src', image)){
$(this).addClass('active');
}
});

Try something like this: (working jsFiddle - added red border around .active)
$(".small_image").click(function () {
event.preventDefault();
$('.small_image.active').removeClass('active'); // remove "active" from current image
$(this).addClass('active'); // add "active" to the new one
var image = $(this).prop("rel");
$('#under').prop('src', image);
$('#above').fadeOut(300, function () {
$('#current_image #above').prop('src', $('#current_image #under').prop('src'));
});
}).eq(0).addClass('active'); // set the first one as "active" by default

On-click adding and removing background color of a table data(td)

i am using jquery for set background color to the table data and its working fine but i need when user again click the td the color should be deselect. its my script for add color.
java script:
jQuery('td').click(function () { $(this).addClass('active'); });
my css class:
.active{background-color:red;}
when user again click the td the class should remove. How to achieve this.

jQuery('td').click(function () { $(this).toggleClass('active'); });
toggleClass adds if it doesn't exist or removes if it does exist.

You can use
$(this).removeClass('active');
although you would need to do a check to see if it is already active, which would make your code look like this:
jQuery('td').click(function () {
if($(this).hasClass('active') {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
EDIT:
#Justice is more correct:
jQuery('td').click(function () { $(this).toggleClass('active'); });