JQuery if condition on css not working

Question

I have a server sending status-updates every 50ms.

I want to set the buttons on my page up to display the according state.

I had

if (data.playspeed == 100) {
    console.log("play");
    $('#prev').css('background-image','url(../public/images/skipr.png)');
    $('#next').css('background-image','url(../public/images/skipf.png)');
    $('#rwd').css('background-image','url(../public/images/rwdbutton.png)');
    $('#stop').css('background-image','url(../public/images/stopbutton.png)');
    $('#play').css('background-image','url(../public/images/playbutton-active.png)');
    $('#ffwd').css('background-image','url(../public/images/ffwdbutton.png)');
}

and it worked as intended. Problem: on an ipad, the buttons are blinking, because the images are refreshed too often. so i changed the code to:

if (data.playspeed == 100) {
    if ($('#play').css('background-image') != 'url(../public/images/playbutton-active.png)') {
        console.log("play");
        $('#prev').css('background-image','url(../public/images/skipr.png)');
        $('#next').css('background-image','url(../public/images/skipf.png)');
        $('#rwd').css('background-image','url(../public/images/rwdbutton.png)');
        $('#stop').css('background-image','url(../public/images/stopbutton.png)');
        $('#play').css('background-image','url(../public/images/playbutton-active.png)');
        $('#ffwd').css('background-image','url(../public/images/ffwdbutton.png)');
    }
}

my logic: only update the buttons to play-state, if the play-button is not yet set to be active.

but it doesn't work and i have NO idea why. the console.log still fires everytime (and the buttons still blink).

why?

somethinghere · Accepted Answer · 2015-04-02 14:10:06Z

2

I would suggest not using the style itself to check against as browser are prone to correcting tiny mistakes, meaning things aren't exactly as expected. Heres what I would suggest:

if (data.playspeed == 100) {
    if (!$('#play').hasClass("js-activated")) {
        $('#play').addClass("js-activated");

        console.log("play");
        $('#prev').css('background-image','url(../public/images/skipr.png)');
        $('#next').css('background-image','url(../public/images/skipf.png)');
        $('#rwd').css('background-image','url(../public/images/rwdbutton.png)');
        $('#stop').css('background-image','url(../public/images/stopbutton.png)');
        $('#play').css('background-image','url(../public/images/playbutton-active.png)');
        $('#ffwd').css('background-image','url(../public/images/ffwdbutton.png)');
    }
}

Add a class to your play button and check for that. However, when doing that it might be best to just move the entire background-declaration into an external CSS file instead of setting it with javascript.

What I'd suggest is adding these lines to your CSS:

#prev.js-activated { background-image: url(../public/images/skipr.png); }
#next.js-activated { background-image: url(../public/images/skipf.png); }
#rwd.js-activated  { background-image: url(../public/images/rwdbutton.png); }
#stop.js-activated { background-image: url(../public/images/stopbutton.png); }
#play.js-activated { background-image: url(../public/images/playbutton-active.png); }
#ffwd.js-activated { background-image: url(../public/images/ffwdbutton.png)');

(make sure you path is from your CSS file, though!) And replacing your JS with the following:

if (data.playspeed == 100 && !$('#play').hasClass("js-activated")) {
    $('#play, #next, #rwd, #stop, #prev, #ffwd').addClass("js-activated");
}

This makes both your JS and your CSS much more parseable and separated.

answered Apr 2, 2015 at 14:10

somethinghere

17.5k2 gold badges36 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Paul Schneider Over a year ago

problem is that i always have to remove the class from all others, but i think it's gonna work this way. actually it looks pretty easy this way, gonna try it

somethinghere Over a year ago

@PaulSchneider It might actually be a lot easier if you actually give all your elements a class to begin with (say class="button") and then use that in your scripts and CSS, much easier! Good luck though :)

Paul Schneider Over a year ago

how would that help? sry i might not grasp what you mean. i'd still have to check/change every specific button, right?

somethinghere Over a year ago

@PaulSchneider Well mostly to simplify your code. Use classes to group objects with similar properties. Say you want every one of those buttons to have a red background color, then you can define the rule .button { background-color: red; } in CSS. In jQuery, you can address all these buttons using $(".button") instead of naming ten IDs. In short, it simplifies and abstracts away your code a bit. Thats what classes are for, to group multiply objects with similar properties. My CSS above, for example, could be used to move your bg 100px to the left, revealing a hidden part of backrgound.

Paul Schneider Over a year ago

sure, but in the end i'm still gonna have to set each button a seperate bg-image, right? stopbutton.png for stopbutton, playbutton-active.png for playbutton and the same for other states (imagine fast forwarding), every state has to have a special button-representation for each button so in the end, i'll still have to address every button on its own

|

Karl-André Gagnon · Accepted Answer · 2015-04-02 14:14:26Z

That behavior happen because the browser change the relative url to an absolute one.

In other, if the background image is ../test.png in the CSS, .css() will return http://www.example.com/parents/of/current/folder/test.png.

Just get the file name and compare it instead :

if ($('#play').css('background-image').split('/').pop() != 'playbutton-active.png)')
//The ending parenthesys is still there though...

But there is a problem, no browser work the same way. So maybe that condition will not work because some browser wrap the URL between quotes.

That being said, the best way to do what you wanna do is to use a flag. You could use a class as flag :

if (data.playspeed == 100) {
        if (!$('#play').hasClass('active')) {
            console.log("play");
            $('#prev').css('background-image','url(../public/images/skipr.png)');
            $('#next').css('background-image','url(../public/images/skipf.png)');
            $('#rwd').css('background-image','url(../public/images/rwdbutton.png)');
            $('#stop').css('background-image','url(../public/images/stopbutton.png)');
            $('#play').css('background-image','url(../public/images/playbutton-active.png)')
            .addClass('active');
            $('#ffwd').css('background-image','url(../public/images/ffwdbutton.png)');
        }
    }

That way, you are sure that no matter which browser you are, it will work.

Sudharsan S · Accepted Answer · 2015-04-02 14:07:36Z

0

Reduce to using background property or anyother css property in jquery whether use add class and check because the property created inline style in html and classes must be reusable and we use any where with class

 $('#prev').addClass('prev');

in css

.prev{
  background-image : 'url(../public/images/skipr.png)' ;
}

if you check with jquery using hasClass().it returns boolean

if (data.playspeed == 100) {   
  if($(#prev).hasClass(prev)){

    }
   // if condition here like that
}

edited Apr 2, 2015 at 14:07

answered Apr 2, 2015 at 14:03

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

4 Comments

Frédéric Hamidi Over a year ago

Avoid using background property in jQuery. Why?

somethinghere Over a year ago

@FredericHamidi Not really a need to avoid it, but classes are faster. And easier to control.

Sudharsan S Over a year ago

because the property created inline style in html and classes must be reusable and we use any where

somethinghere Over a year ago

@JqueryKing Then you meant avoid setting CSS directly, not just backgrounds. Then the statement makes sense. There is no reason for background setting to be worse than, say, color setting.

Collectives™ on Stack Overflow

JQuery if condition on css not working

3 Answers 3

7 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related