CODEWITHSUNDEEP
jqueryjquery-uiprogress-barjquery-ui-progressbar
Hailwood
Hailwood

Reputation: 92591

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

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?enter image description here

Upvotes: 10

Views: 6858

Answers (3)

PetersenDidIt
PetersenDidIt

Reputation: 25620

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

Upvotes: 12

GG.
GG.

Reputation: 21854

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

Upvotes: -1

fx_
fx_

Reputation: 1932

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
});

Upvotes: 0

Related Questions