We Keep Coding

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 - Turning event handler off and then back on

Having a bit of trouble figuring out how to turn an event handler back on.
I'm trying to stop the function from executing multiple times before the animation is finished.
Here's a Fiddle:
http://jsfiddle.net/MkmnW/1/
Here's my code:
$("#buttons a").click(function () {
$('a').off();
// Remove class from current active
$("#buttons a").removeClass('active');
// Change class on clicked button
$(this).addClass("active");
// Hide Non-Clicked Content
$(".main_content").fadeOut("fast");
$("#content_container").slideUp("slow");
// Find Selected
var selected = $(this).attr("href");
// Show Selected
$("#content_container").slideDown("slow", function () {
$(selected).fadeIn("slow");
});
return false;
});

If i understand your example correctly you want to prevent the animation from running multiple times by removing the event.
If your removing the event you will not be able to click it again unless you attach your event again.
Here's an example based on your code: http://jsfiddle.net/MkmnW/4/
$(document).ready(function () {
$("#buttons a").click(function () {
$('a').off("click");
clickMenu(this);
return false;
});
function clickMenu(el){
// Remove class from current active
$("#buttons a").removeClass('active');
// Change class on clicked button
$(el).addClass("active");
// Hide Non-Clicked Content
$(".main_content").fadeOut("fast");
$("#content_container").slideUp("slow");
// Find Selected
var selected = $(this).attr("href");
// Show Selected
$("#content_container").slideDown("slow", function () {
$(selected).fadeIn("slow");
$("#buttons a").click(function () {
$('a').off("click");
clickMenu(this);
return false;
});
});
}
});

You can $(element).unbind('click'); for unbinding click events. The same with all the other types of events.
Then, you could bind them again with $(element).bind('click', function(evt) { ... });
In the case of animations, you can $(element).click(function(evt) { $(this).stop().fadeOut("fast").whatever... });

toggle class on hover?

I have written the following code:
$(document).ready(function () {
$("#rade_img_map_1335199662212").hover(function () {
$("li#rs1").addClass("active"); //Add the active class to the area is hovered
}, function () {
$("li#rs1").addClass("not-active");
});
});
The problem is it doesnt seem to toggle the class on hover?
But how can i get it so that the class toggles based on hover and non-hover..?

Do not add a different class on hover-out just remove the active class
$(document).ready(function(){
$("#rade_img_map_1335199662212").hover(function(){
$("li#rs1").addClass("active"); //Add the active class to the area is hovered
}, function () {
$("li#rs1").removeClass("active");
});
});
or if all elements are inactive at first you could use a single function and the toggleClass() method
$(document).ready(function(){
$("#rade_img_map_1335199662212").hover(function(){
$("li#rs1").toggleClass("active"); //Toggle the active class to the area is hovered
});
});

Try like below,
$(document).ready(function () {
$("#rade_img_map_1335199662212").hover(function () {
$("#rs1")
.removeClass("not-active")
.addClass("active"); //Add the active class to the area is hovered
}, function () {
$("#rs1")
.removeClass("active");
.addClass("not-active");
});
});

How check mouseover on two elements ?

I need hide tooltip on mouseout of link, BUT not if mouseover on tooltip (both have different parents)
For example: we can see it on Facebook when hover on names or avatars friends
I try this but every time i get FALSE
$('a').bind('mouseleave', function () {
var i = $('div.tooltip').is('hover');
if(i===true){
console.log('cursor over the tooltip, so dont hide');
}
else{
console.log('hide tooltip');
}
});
How i can check both condition?

Put both the link and the tool tip in the same parent:
<div id="parent">
link
<div id="tooltip">tooltip</div>
</div>
And then in the script you can just put the mouseleave function on the parent:
$("#parent a").mouseenter(function(){
$("#tooltip").css("display","block"); //or however you handle this
});
$("#parent").mouseleave(function(){
$("#tooltip").css("display","none");
});

If you can't change your markup, use a timed event and abort it when the mouse enter either element, like so:
var timer;
$("a, .tooltip").mouseleave(function() {
timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
clearTimeout(timer);
});
function doSomething() {
console.log('hide tooltip');
}
Here's a FIDDLE

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