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

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