jQuery: add text to the progressbar

Question

hi all,

is there some tweak to add a caption to the progressbar control? i'd love to put a centered caption which displays current percentage.

thx

Answer 1

This is more a CSS question. I've gotten the label to be centered directly over the progress bar. The way I've done it is to:

Wrap your progress bar code in a div with a clearing div at the end of the container. Then, prepend your label in the container and float it to the left. Add some space in the label so it's not touching the side of the progress bar:

<div id='pb_container'>
    <div style='float: left' id='label'>&nbsp;&nbsp;&nbsp;My Label</div>
    <div id='pb'></div>
    <div style="clear: both;"></div>
</div>

Instantiate the progress bar and the label should be floating in the progress bar, to the left a little. You will have to play with padding and width/height of the elements to get it to float where you want it. (Like the center of the bar, for example)

Try it here. As you can see from my CSS code, it takes a little fiddling to center it just right, but it looks nice.

Answer 2

You can just add a <div> with some styling to get a centered caption underneath, like this:

$("#progressbar").progressbar({
    value: 37
}).append("<div class='caption'>37%</span>");​​​​​​​​​​

And some CSS:

​#progressbar .caption​ { width: 50px; margin: 0 auto; }​

You can give it a try here, just use $("#progressbar .caption").html(value) to update it.