CODEWITHSUNDEEP
jquerycssif-statementbackground-image
Paul Schneider
Paul Schneider

Reputation: 325

JQuery if condition on css not working

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?

Upvotes: 0

Views: 124

Answers (3)

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33880

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.

Upvotes: 1

somethinghere
somethinghere

Reputation: 17350

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.

Upvotes: 2

Sudharsan S
Sudharsan S

Reputation: 15393

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
}

Upvotes: 0

Related Questions