CODEWITHSUNDEEP
jqueryjquery-uiprogress-barjquery-ui-progressbar
foxybagga
foxybagga

Reputation: 4214

Automated jQuery Progress Bar

today I was implementing jQuery Progress-bars on a web-page. I needed to implement about 30 progress bars on the same page.

Its code goes like this

$( "#progressbar" ).progressbar({
value: 80
});

which displays a progress bar 80% full on the below div

<div id="progressbar"></div>

Now what happened is, I have to mention 30 different progressbar divs and then call them to run using 30 jquery calls...

Instead

What I tried was 

<div id="progressbar" title="54"></div>

with a call as 

$( "#progressbar" ).progressbar({
value: $(this).attr('title')
});

which should automatically give the value to the title of that div...

albeit this does not work...

anyone have a clue as to what is wrong here?

I also tried

$( "#progressbar" ).each( function(){
progressbar({
value: 80
});
});

Still no-go

Can anyone gimme a tip here... Many thanks!

Upvotes: 3

Views: 2046

Answers (1)

foxybagga
foxybagga

Reputation: 4214

Found out. Cheers!

It works like this

<div class="progressbar" rel="54"></div>

and then call like 

            $("div.progressbar").each (function () {
                var element = this;
                $(element).progressbar({
                value: parseInt($(element).attr("rel"))
                });
            });

Cheers to @volkan-er who answered it here - JQuery UI: multiple progress bar - problems to set dynamic values

:)

Upvotes: 4

Related Questions