4

I have a JQuery progress bar I want to theme (documentation here) dynamically: it will start out red, then as it progresses turn yellow, and finally turn green. It seems like this would just be a matter of setting a style color attribute, but I can't seem to find what the appropriate attribute is.

kerkeslager
  • 1,364
  • 4
  • 17
  • 34
  • Can't you add color when you change value of progressbar? i.e. $( ".selector" ).progressbar({ value: 37 }).css('color', 'green'); – enoyhs May 16 '11 at 04:14
  • Just tried that. It doesn't work. Thanks for the suggestion, though! – kerkeslager May 16 '11 at 04:22
  • Just realized that this actually initializes progress bar. You can try: $( ".selector" ).progressbar( "option", "value", 37 ).css('color', 'green');. And if it doesn't work, add css before .progressbar(..) (Though I don't think that would make any difference) – enoyhs May 16 '11 at 04:26
  • 1
    Alright, using your help I finally found the Google search terms to get the info I wanted. Apparently it works by setting the background color in an inner div, so instead of `$('#progressbar').css('color','red');` you have to use `$('#progressbar > div').css('background','red');`. Thanks for your help; I couldn't have found the answer without you! – kerkeslager May 16 '11 at 04:34

1 Answers1

10

The jQuery UI progress bar doesn't have an explicitly set color; instead, it inherits the "widget header" background image from your UI theme. The simplest way to change the color, then, is to set up styles which override the background. For example:

.ui-progressbar.beginning .ui-progressbar-value { background: red; }
.ui-progressbar.middle .ui-progressbar-value { background: yellow; }
.ui-progressbar.end .ui-progressbar-value { background: green; }

(Alternatively, you could use different background images.) Then, you simply change the class on the progress bar when setting its value:

function updateProgressbar(current, target) {
    var value = parseInt(current / target * 100);

    $progressbar
        .progressbar("value", value)
        .removeClass("beginning middle end")
        .addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");
}

Working example.

Ben Blank
  • 54,908
  • 28
  • 127
  • 156