CODEWITHSUNDEEP
jqueryjquery-uiprogress-bar
Maanstraat
Maanstraat

Reputation: 1251

JqueryUI progressbar value in a span

I am want to display the value in a span but i am stuck how to do this.

This is my 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)
});

As you can see i have the progressbar animated so the value in the span must count with the animated progressbar.

And my HTML:

<span class="percent"></span>
<div class="progressbar-count" value="100%"></div>

Upvotes: 0

Views: 987

Answers (3)

ThmHarsh
ThmHarsh

Reputation: 601

<div id="progressBar">
<span class="caption" style="position:absolute;margin-left: 5%;margin-top: -5px;">
</span>
</div>

$j("#progressBar").children('span.caption').html($j( "#progressBar" ).progressbar( "value" ) + "%");

Upvotes: 0

ThmHarsh
ThmHarsh

Reputation: 601

>

Show Value: $j("#progressBar").children('span.caption').html($j( "#progressBar" ).progressbar( "value" ) + "%");

Upvotes: 0

Kevin B
Kevin B

Reputation: 95027

Try this http://jsfiddle.net/Tentonaxe/tePc3/, it uses an easing plugin built by Ben Nadel at http://www.bennadel.com/blog/2007-Using-jQuery-s-animate-Method-To-Power-Easing-Based-Iteration.htm

The power of google at work.

Upvotes: 1

Related Questions