We Keep Coding

If statement only checks variable value once in javascript

I am trying to understand how javascript (jquery in this case) if statements work. I thought i understood but i don't fully get some things. Please see the code below. Why is it when i click on the element with the class of "cat" that it does not remove the class of "black" and add the class of "red".
$(function() {
var cat = true;
$( ".cat" ).click(function() {
cat = false;
});
if (cat === true) {
$('.cat').removeClass('red').addClass('black');
} else {
$('.cat').removeClass('black').addClass('red');
}
});
i know there is probably a very simple answer to this but i'm just learning so any help would be appreciated, thanks in advance.

Toggle the value of cat and put the if block inside the function that you want to bind with the event 'click':
$(".cat").click(function() {
cat = !cat;
if (cat === true) {
$('.cat').removeClass('red').addClass('black');
} else {
$('.cat').removeClass('black').addClass('red');
}
});
Edit: Simpler way to do this is to use .toggleClass():
$(".cat").click(function() {
$(this).toggleClass('red black');
});

If you want to check on click, put the if inside the click event. The reason why your solution doesn't work is because you attach a listener to the element, but you immediately do a check. The check doesn't happen every time the user clicks, just once. You must put it in the listener's callback function so it executes every time the element is clicked:
$(function() {
$(".cat").click(function() {
$(".cat").toggleClass("black red");
});
});
How this works is it attaches a click event to .cat and, on click, toggles the classes black and red. This completely gets rid of the checking because that isn't necessary. Just toggle the classes on click. Also, no need to repeat the selector, just use this. Here's a snippet:
$(function() {
$(".cat").click(function() {
$(this).toggleClass("black red");
});
});
.black {
color: black;
}
.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat red">Test</div>

Your code is not removing class black and adding class red because your if(){}else{} code block running when your page is loading. When you are clicking the cat class it is only assigning the value of cat variable to false. since your if else code block is out of your click function that is why it is not executing again. and that is why it is not working. To work your code place your if else code block in the click function like this:
$( ".cat" ).click(function() {
cat = false;
if (cat === true) {
$('.cat').removeClass('red').addClass('black');
} else {
$('.cat').removeClass('black').addClass('red');
};
});

How to control check element from jquery dropdown button

I've used this jQuery dropdown button. This is my fiddle. This is the step of this:
So, the functionality:
At the time of selecting one option, a new box will appearing containing the title of that option. For example, if you click on the "Low" on the dropdown, a new box will come containing text, "Low" with a cross button.
I've written the script like this:
$('.low-option input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('#low-box').show();
} else {
$('#low-box').hide();
}
});
If you remove the boxes by clicking cross button, the box will be removed and adjacent checkbox will be unchecked.
So, I wrote this:
$('.option-box').on('click', '.cross', function() {
$(this).parent().remove();
});
if($('#low-box').is(":hidden")) {
$('.low-option input[type=checkbox]').prop('checked', false);
}
div.option-content is hidden at first. If any div.option-box will be visible, div.option-content will be visible too. If there is no div.option-box visible, div.option-content will be hidden always.
To do this, I wrote this:
var count = $('.option-content .option-box').is(":visible").length;
if (count > 0){
$('.option-content').show();
} else{
$('.option-content').hide();
}
But, my script is not working properly. As, I am not very good at jQuery, I can't find the reason and can't make it right way. Can you please help me removing the problem in the script?

Here I rewrite your code so it will become more scalable.. The important part that you missed is to relate/connect the checkbox with your option-box, so it will be easier for you to hide or show related element.. Check out this working Fiddle.
$('.dropdown-menu input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$('.option-content').show();
$('.option-content #'+$(this).prop('id')).show();
} else {
$('.option-content #'+$(this).prop('id')).hide();
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
}
});
$('.option-box').on('click', '.cross', function() {
$('.dropdown-menu #'+$(this).parent().prop('id')).prop('checked', false);
$(this).parent().remove()
if($('.option-content .option-box:visible').length == 0){
$('.option-content').hide();
}
});
Cheers..

Attaching onmouseover after page is rendered?

Hi,
When the page first is rendered my div elements looks like this :
<div onmousedown="this.className='showhideExtra_down_click';"
onmouseout="this.className='showhideExtra_down';"
onmouseover="this.className='showhideExtra_down_hover';"
class="showhideExtra_down" id="extraFilterDropDownButton"> </div>
Then i manually updates the onmouse attributes with javascript so it looks like this :
<div onmousedown="this.className='showhideExtra_down_click';"
onmouseout="this.className='showhideExtra_down';"
onmouseover="this.className='showhideExtra_down_hover';"
class="showhideExtra_down" id="extraFilterDropDownButton"> </div>
They looks the same, the big difference is that the first one will change class when hovering and the second will not? Is it not possible to set this after page is rendered?
Please note : I need IE6 compability, thats why I use onmouse instead of CSS hover
BestRegards
Edit : This is what I found and that works grate, I haven´t tested it in IE6 just yet :
$("#extraFilterButton").hover(function() {
$(this).attr('class','showhideExtra_down_hover');
},
function() {
$(this).attr('class','showhideExtra_down');
});

you can use:
$('#selector').live('mouseover',function(){//something todo when mouse over})
live() allows for dynamic changes
(you can do the same for 'mouseout')

To expand on #maniator's correct answer, I would use:
$("#some_id").live("hover",
function() {
// do on mouseover
},
function() {
// do on mouseout
});

This is what I ended up with :
$("#extraFilterDropDownButton").hover(function() {
if($('#divCategoryFilter').css("display") == 'block'){
$(this).attr('class','showhideExtra_up_hover');
}
else{
$(this).attr('class','showhideExtra_down_hover');
}
},
function() {
if($('#divCategoryFilter').css("display") == 'block'){
$(this).attr('class','showhideExtra_up');
}
else{
$(this).attr('class','showhideExtra_down');
}
});
This is however not yet tested in IE6.

How to call a function with jQuery blur UNLESS clicking on a link?

I have a small jQuery script:
$('.field').blur(function() {
$(this).next().children().hide();
});
The children that is hidden contains some links. This makes it impossible to click the links (because they get hidden). What is an appropriate solution to this?
This is as close as I have got:
$('.field').blur(function() {
$('*').not('.adress').click(function(e) {
foo = $(this).data('events').click;
if(foo.length <= 1) {
// $(this).next('.spacer').children().removeClass("visible");
}
$(this).unbind(e);
});
});
The uncommented line is suppose to refer to the field that is blurred, but it doesn't seem to work. Any suggestions?

You can give it a slight delay, like this:
$('.field').blur(function() {
var kids = $(this).next().children();
setTimeout(function() { kids.hide(); }, 10);
});
This gives you time to click before those child links go away.

This is how I ended up doing it:
var curFocus;
$(document).delegate('*','mousedown', function(){
if ((this != curFocus) && // don't bother if this was the previous active element
($(curFocus).is('.field')) && // if it was a .field that was blurred
!($(this).is('.adress'))
) {
$('.' + $(curFocus).attr("id")).removeClass("visible"); // take action based on the blurred element
}
curFocus = this; // log the newly focussed element for the next event
});

I believe you can use .not('a') in this situation:
$('.field').not('a').blur(function() {
$(this).next().children().hide();
});
This isn't tested, so I am not sure if this will work or not.

jQuery overlapping issue with animation

The whole problem is that I have a header that is fixed and there's a div under it that I need to move accordingly. Though there is a problem if I click really fast like 3 or 4 times one of the animations messes up and I end up having the 'under' div inside the content. I use stop before animating and sliding. I tried using queue and such.. No avail.
$(".header").click(function () {
$header = $(this);
$content = $header.next();
$content.stop().slideToggle(500, function () {
if(($('.lol').css('margin-top')) == '47px')
{
$(".under").stop().animate({'margin-top': "100px"}, 500)
}
else
{
$(".under").stop().animate({'margin-top': "47px"}, 500)
}
});
});
https://jsfiddle.net/zddzvxLy/8/
Here's jsfiddle to show the problem. Try clicking on the header a few times really fast and 'This one must be under" will appear inside CONTENT.

Firstly, you have no item with the class .lol - change that to .under
Secondly, change your stop() calls to stop(true, true)
Thirdly, I would take your animation call for .under out of the completed function and call it in parallel with your first animation.
https://jsfiddle.net/zddzvxLy/10/

Avoid calling animate() when the element is already being animated:
if ($('.content').is(':animated') === false)
{
// animate
}
else
{
return false;
}