if/else statement checking css attributes jquery

Question

I'm writing an if/else statement which I've simplified to the fiddle link below. Basically I check for the value of a CSS attribute, and if it's one specific value then I want one thing to happen, and if it's a different value (nonspecific, just any other value), then I want another thing to happen.

$(document).ready(function (){
if($(".header-wrapper").css("height") == "100px"){
    alert("true");
}
else{
    alert("false");
}
$(".below").click(function(){
    $(".header-wrapper").css("height", "200px");
});
});

But for some reason my code checks the CSS value once and doesn't do anything if the CSS value changes, and I want to trigger this event every time the CSS value changes to and from the specific value. Thanks for the help in advance.

https://jsfiddle.net/hyfpw92w/

o_O · Accepted Answer · 2015-10-08T21:29:46.523

0

You need to put the IF/ELSE in a function. Then call that function when you want it to run on the change in height.

Like so:

function myFunction(){
        if($(".header-wrapper").height() == 100){
            console.log("true");
        } else {
            console.log("false");
        };
    };

then when you want to use it you can do myFunction();

edited Oct 08 '15 at 21:29

answered Oct 08 '15 at 21:16

o_O

5,527
12
52
90

score 0 · Answer 2 · answered Oct 08 '15 at 21:18

You can put the check inside a function like so:

$(document).ready(function (){
  $(".below").click(function(){
    $(".header-wrapper").css("height", "200px");
    ifElse();
  });
});
function ifElse() {
  if($(".header-wrapper").css("height") == "100px"){
    alert("true");
  }
  else{
    alert("false");
  }
}

score 0 · Answer 3 · edited May 23 '17 at 11:44

The problem with your code is that document.ready() only happens once, so the provided function can only be called once. instead, you'll need to attach an event listener to an element (perhaps the one that is changing the css) so that it can be called multiple times. You can read more about event listeners here. You could also look at a similar question posed about listening to style changes here

// attach this event to the specific element which is changing
// the css instead

document
  .addEventListener('click', function(){
     if($(".header-wrapper").css("height") == "100px"){
        alert("true");
      }
      alert("false");
  });

if/else statement checking css attributes jquery

3 Answers3