2

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 commented 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!

0

3 Answers 3

5

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.

2
  • Brilliant David, thank you! Yours is the only one that seemed to work for all bars simultaneously. Check it out in action, here.
    – DylRicho
    Nov 30, 2013 at 22:49
  • Hi there David. Would it be possible for you to take a look at this question, which relates to your answer for this one? I'm hoping I've explained in enough detail, but if not, please do ask for further clarification. :) Thank you!
    – DylRicho
    Dec 4, 2013 at 15:09
1

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.net/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");
        }
    });
});
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.