10

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

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
Hailwood
  • 89,623
  • 107
  • 270
  • 423

3 Answers3

12

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

PetersenDidIt
  • 25,562
  • 3
  • 67
  • 72
0

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
});
fx_
  • 1,932
  • 13
  • 17
  • that will just update the color if the progressbar has finished, please see my image – Hailwood Mar 14 '11 at 01:50
  • I wouldn't do what you're asking in CSS at all. There is no feasible way to do what you ask in pure CSS and Javascript. – fx_ Mar 14 '11 at 16:12
-1
if (newVal >= 50)
    $('.pblabel').css('color', newColor);
else
    $('.pblabel').css('color', defaultColor);
GG.
  • 21,083
  • 14
  • 84
  • 130
  • please see the attached image, I want it to be slightly more precise than that. – Hailwood Mar 14 '11 at 01:45
  • still not exactly what I need, The label could be any text at all, I need to almost find out where each letter is positioned relative to its parent... – Hailwood Mar 14 '11 at 01:48
  • its stupid, in the early release of progressbar they actually had this in there, but they took it out :/ – Hailwood Mar 14 '11 at 01:57