Display value in jQueryUI ProgressBar

Question

I've set up a simple jQuery UI ProgressBar:

<script type="text/javascript">     $(function() {         $("#progressbar").progressbar({                 value: 35         });     }); </script> <div id="progressbar">  </div> 

Among other things, I'd like to display some text in the progress-bar (for starters, I'd just use the "value").

I can't seem to get this to work.

Bonus Question: How do I format the displayed text (e.g. color, alignment)?

Answer 1

Instead of introducing another element (span) and a new style, leverage what is already there like this:

var myPer = 35; $("#progressbar")     .progressbar({ value: myPer })     .children('.ui-progressbar-value')     .html(myPer.toPrecision(3) + '%')     .css("display", "block"); 

The css("display", "block") is to handle the case where the value is 0 (jQuery UI sets a display: none on the element when the value is 0).

If you look at the source of The demo, you'll notice that a <div class="ui-progressbar-value"> is added. You can simply override this class in your own CSS, like:

.ui-progressbar-value {     font-size: 13px;     font-weight: normal;     line-height: 18px;     padding-left: 10px; } 

Answer 2

The way I did it was:

<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div> 

You can adjust the margin-top and margin-left so that the text is in the center of the progress bar. Then you apply the progressbar plugin for the elements which have class progressbar in the javascript section of the page

Hope this help