jquery ui.progressbar label - Change text color on background passing letter

Question

I have added a label to the jquery ui progressbar using this demo.

What I want to do is change the text color depending on if the progress bar is behind the letter.

How can I tell if that has happened?

Answer 1

Its kinda ugly but if you duplicate the label, one outside the bar and one inside, and use overflow: hidden you can pull it off:

http://jsbin.com/ohiyo/21/

Only tested in Chrome dev and firefox 4

Answer 2

if (newVal >= 50)
    $('.pblabel').css('color', newColor);
else
    $('.pblabel').css('color', defaultColor);

Answer 3

Use the change event of .progressbar like so:

updateProgressColor = function() {
  if( $(this).progressbar('percentage').toFixed(0) == 100 ) {
    $(this).css('background', '#F000');
  }
}

$('#progressbar').progressbar({
  change: updateProgressColor
});