jquery ui.progressbar label - изменить цвет текста на фоне проходящей буквы

Question

Я добавил метку в индикатор выполнения jquery ui, используя это демо .

Что я хочу сделать, это изменить цвет текста в зависимости от того, находится ли индикатор выполнения за буквой.

Как я могу узнать, произошло ли это?

Answer 1

Это немного уродливо, но если вы продублируете ярлык, один вне бара, а другой внутри, и используете overflow: hidden, вы можете снять его:

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

Проверено только в Chrome dev и firefox 4

Answer 2

Используйте change event .progressbar следующим образом:

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

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

Answer 3

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