Jquery UI progressbar with HTML values

Question

I am busy with some progressbars and the simple ones i can get working but how can i put the values of the progressbar in the HTML?

Example what i want:

<span>here the value</span>
<div class="progressbar" value="50"></div>

Here is the JS what i now have

$("div.progressbar").each(function() {
    var element = this;

    $(element).progressbar({
        value: parseInt($(element).attr("value"))
    });
});

And how can i let them grow? (Like from 0 to 50)

Answer 1

You can set the value of the progressbar like this:

$( ".progressbar" ).progressbar({ value: 50 });

or you can get the value, min and max like this:

 var value = parseInt($(".progressbar").attr('value'));
 var min = parseInt($(".progressbar").attr('min'));
 var max = parseInt($(".progressbar").attr('max'));

and then set the value to the progresbar.

For example:

if ( value >= min && value <= max)
{
  $( ".progressbar" ).progressbar({
      value: value
  });
}

For number animation see: Jquery Plugin for animating numbers

Answer 2

This is working for me:

HTML:

<div class="progressbar" value="20%"></div>

JavaScript:

$(".progressbar-count").each(function() {
    $(this).progressbar({
        value: parseInt($(this).attr("value"))
    }), $(".progressbar-count .ui-progressbar-value").animate({
        width: 0
    }, 0).stop().animate({
        width: $(".progressbar-count").attr("value")
    }, 3500)
});

Now i can set the value in the HTML and it's counting up to that number!

Answer 3

Give the span an id and Use the change event:

$("div.progressbar").each(function() {
    var element = this;

    $(element).progressbar({
        value: parseInt($(element).attr("value")),
        change: function (e, ui) {
            $("#id_of_your_span").text(ui.value);
        }
    });
});