We Keep Coding

Remove css class jQuery

I use my code for change css after click icon :
$(function () {
$(".icon-medium.icon-search").click(function () {
$(".nksub-tab-icon").addClass("newClass", 1000, callback);
});
function callback() {
setTimeout(function () {
$(".nksub-tab-icon").removeClass("newClass");
}, 1000);
}
});
My CSS:
<style>
.newClass { background-color:yellow; }
</style>
When I click icon change color but after I click but doesn't remove class.
For test website here
I would like change color and after with another click recover start style.

Try putting this code in <script> tags.
$( ".icon-medium.icon-search" ).click(function() {
$(".nksub-tab-icon").toggleClass("newClass");
});
If you want to provide a delay then use the following code
$( ".icon-medium.icon-search" ).click(function() {
$(".nksub-tab-icon").delay(1000).queue(function(next){
$(this).toggleClass("newClass");
next();
});
});
Check here: http://jsfiddle.net/zgsxoq3v/

jQuery hide and show text input

I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.

You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();

if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});

use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});

Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)

You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});

Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/

document.getElementById("username").style.display='block';

fade in fade out with two divs does not work

I have the following code http://jsfiddle.net/largan/2n2Lf/25/
The idea is the div called soc_text to fade and fade out when hover on the soc_button div.
I have this script, but it doesn't seems to work.
$(document).ready(function()
{
$("div.soc_button").hover(
function () {
$("div.soc_text").fadeIn('slow');
},
function () {
$("div.soc_text").fadeOut('slow');
}
);
});
Any ideas?
Thanks

$(document).on("mouseover", "div.soc_button", function(){
$(this).find("div.soc_text").fadeToggle("slow");
});

Here's the answer:
$(document).ready(function () {
$("div.soc_button img").hover(
function () {
console.log();
$(this).parent().find('div.soc_text').fadeIn('slow');
},
function () {
$(this).parent().find('div.soc_text').fadeOut('slow');
}
);
});
I guess the code is self explanatory,
Regards

This applies the method to all matches with all div tags with soc_text css class
$("div.soc_text").fadeIn('slow');
Change this to
$(this).children('div.soc_text').fadeIn('slow');

mouseenter/mouseout makes div flicker

I have a tooltip that shows on the mouseenter event and hides on the mouseout event. Sometimes, not always, when the mouse moves within the image for the tooltip the tooltip flickers. How can i prevent this happening? Is there a better way to do this?
Here is my code:
$('#home_pic').mouseenter(function() {
$('#home_tip').show();
});
$('#home_pic').mouseout(function() {
$('#home_tip').hide();
});

Use mouseleave instead of mouseout()
$('#home_pic').mouseleave(function() {
$('#home_tip').hide();
});
Or use .hover
$('#home_pic').hover(function() {
$('#home_tip').hide();
},function() {
$('#home_tip').show();
});

You can use the toggle() function for this, it accepts a boolean to set the state, so something like:
$('#home_pic').on('mouseenter mouseleave', function(e) {
$('#home_tip').toggle(e.type==='mouseenter');
});
FIDDLE

Try mouseleave instead of mouseout like this:
http://jsfiddle.net/tncbbthositg/dWKfX/

You need to write your mouseenter and mouseleave functions in a proper way, something like below:
$('#home_pic').mouseenter(function() {
$("#home_pic").show();
},mouseleave(function() {
$("#home_pic").hide();
}));
Note: Code Not tested to work.

you can also try something like this if the tooltip runs over the home pic - I've used very similar code to pop up bubbles on a image map
$('#research_area').mouseover(function() {
$('img#research').css('display', 'block');
runthis();
});
function runthis () {
if ( $('img#research').css('display') == 'block') {
$('img#research').mouseleave(function() {
$(this).css('display', 'none');
});
}
http://www.karpresources.com/

Simple jQuery function and action order

I have a very simple function where after click body class fades out and replacing class.
$(".a").click(function () {
('body').fadeOut();
$('body').removeClass();
$('body').addClass("green");
$('body').fadeIn();
});
$(".b").click(function () {
$('body').fadeOut();
$('body').removeClass()
$('body').addClass("pink"),
$('body').fadeIn();
});
The problem I have is that the class is changing before the body will fade out which is opposite to what I am trying to achieve.
Any help much appreciated.
Thanks
Dom

The fadeOut method takes a callback to run after the fade finishes.
You can change the class in that callback:
$(".a").click(function () {
$('body').fadeOut(function() {
$('body').removeClass().addClass("green").fadeIn();
});
});

Use callback functions.
$(".a").click(function () {
('body').fadeOut(function(){
$('body').removeClass();
$('body').addClass("green");
$('body').fadeIn();
});
});
$(".b").click(function () {
$('body').fadeOut(function(){
$('body').removeClass()
$('body').addClass("pink"),
$('body').fadeIn();
});
});

$('body').fadeOut(function(){
$(this).removeClass().addClass("green").fadeIn();
});