Progressbar color setting using page item value

Question

Hey guys! I hope this is not the wrong forum to ask for your help, but since I need to accomplish it in Apex I though I'd just give it a try here.
Have been reading, working many hours on this issue without finding the proper solution.
I have a progressbar, which and a page_item. The progressbar's status is set according to my page_item. It works all fine so far.
Now the problem is that I want to change the colouring of the progressbar depending on the percentage achieved. In order to do this however, I would have to know how to change or override the default ui-theme colouring for this jQuery progressbar.
My code right now is:
<script type="text/javascript">
$(function(){
   var pValue=$v('P1110_COUNTSTAT') ;
   $("#progressbar").progressbar({ value: pValue });
</script>I tried to add progressbar.style.background = "red"; which colours the background and not the "overlay element". I read the entire source code but couldn't figure out how to address this part of the progressbar.
If anybody here has some experience with this, please let me know!
Many thanks,
Seb

Answer 1

Hi,
If you define class like
<style type="text/css">
.bar_red { background:red!important; }
.bar_blue { background:blue!important; }
</style>And then with jQuery add and remove class e.g.
$('.ui-progressbar-value').removeClass('bar_blue');
$('.ui-progressbar-value').removeClass('bar_red');
if(something){
  $('.ui-progressbar-value').addClass('bar_blue');
}else if(something){
  $('.ui-progressbar-value').addClass('bar_red');
}br, Jari