I'm wanting to use jQuery to dynamically modify the background color of a <div>, based on its CSS property, width value.

The usage is for some form of color-coded meter, which indicates how well (or poorly) a device performs in a specific category (there are 5), and then there is one 'overall' category, which produces the overall score, based on a little math (add all 5 together and divide the answer by 5).

I have tried two methods, one based on the little jQuery knowledge I have, and the other adapted from an answer on SO. Both are included in the JSFiddle I have provided, with the latter mented out.

Here are the colors and the ranges of the widths for each:

• 0-24% = red - #a41818
• 25-49% = orange - #87581c
• 50-74% = yellow - #997815
• 75-90% = yellowgreen - #7ba01c
• 91-100% = green - #3a8d24

Thanks!

I'm wanting to use jQuery to dynamically modify the background color of a <div>, based on its CSS property, width value.

The usage is for some form of color-coded meter, which indicates how well (or poorly) a device performs in a specific category (there are 5), and then there is one 'overall' category, which produces the overall score, based on a little math (add all 5 together and divide the answer by 5).

I have tried two methods, one based on the little jQuery knowledge I have, and the other adapted from an answer on SO. Both are included in the JSFiddle I have provided, with the latter mented out.

Here are the colors and the ranges of the widths for each:

• 0-24% = red - #a41818
• 25-49% = orange - #87581c
• 50-74% = yellow - #997815
• 75-90% = yellowgreen - #7ba01c
• 91-100% = green - #3a8d24

Thanks!

• javascript
• jquery
• html
• css

3 Answers 3

I'd suggest:

$('.rating-bar').css('background-color', function(){
    var percentage = parseInt($(this).data('size'), 10);
    if (percentage > 0 && percentage < 25){
        return '#a41818'
    }
    else if (percentage > 24 && percentage < 50) {
        return '#87581c';
    }
    else if (percentage > 49 && percentage < 75) {
        return '#997815';
    }
    else if (percentage > 74 && percentage < 90) {
        return '#7ba01c';
    }
    else if (percentage > 89 && percentage <= 100) {
        return '#3a8d24';
    }    
});

JS Fiddle demo.

There were a few semantic problems ($(e) used instead of $(this), ($(document).ready nested strangely), and the logic you've used requires the ratio of each bar's width to the parent bar, not the width itself.

Try this: http://jsfiddle/VFSUN/1/

$(document).ready(function () {
    var bar = $('.rating-bar');
    bar.css("background-color", "#7ba01c");

    var parentWidth = parseInt($('.rating-bar-bg').css("width"));
    $('.rating-bar').each(function () {
        var e = $(this).css("width");
        e = parseInt(e);
        ratio = e / parentWidth * 100;
        if (ratio <= 24) {
            $(this).css("background-color", "#a41818");
        } else if (ratio >= 25 && e < 50) {
            $(this).css("background-color", "#87581c");
        } else if (ratio >= 50 && e < 75) {
            $(this).css("background-color", "#997815");
        } else if (e >= 75 && e < 91) {
            $(this).css("background-color", "#7ba01c");
        } else if (ratio >= 91) {
            $(this).css("background-color", "#3a8d24");
        }
    });
});

I suggest you are starting at wrong point by checking width, when in fact you need to be setting width based on the data-size attribute. This size can then be used to set bckground color

$(document).ready(function() {
  $('.rating-bar').each(function(){
        var $bar=$(this), size=$bar.data('size');
        $bar.width(size+'%').css("background-color", getBackground( size))
    });       
});    


 function getBackground( e){
    var  color= "#a41818";/* < 24*/
     if (e >= 25 && e < 50) {
             color= "#87581c";
        } else if (e >= 50 && e < 75) {
            color=  "#997815";
        } else if (e >= 75 && e < 91) {
            color=  "#7ba01c";
        } else if (e >= 91) {
            color=  "#3a8d24";
        }    
    return color

}

DEMO