Question

I have cobbled together some code to build an animated percentage bar. Everything works sweet when only one bar is present on a page. I have the following code

<div id="progress_bar" class="ui-progress-bar ui-container"> 
<div class="ui-progress" style="width: 60%;"> 
<span class="ui-label" style="display:none;"><b class="value"><span class="client_overall_progress">60</span>%</b></span> 
</div> 
</div>


$(function() {
var overall_progress = $(".client_overall_progress", this) .text();

// Hide the label at start
$('#progress_bar .ui-progress .ui-label').hide();
// Set initial value
$('#progress_bar .ui-progress').css('width', '7%');

// Simulate some progress
$('#progress_bar .ui-progress').animateProgress(overall_progress);
});

I would like to be able to place multiple percent bars on my page but i am not sure how to separate all the different values and have each bar render to the correct percent.

Can anyone help me out?

Answer 1

You are addressing your progress bars with an id of #progress_bar. Because elements IDs are suppose to be unique in the DOM, this will cause unexpected behaviors when trying to reach an element by it’s ID, like you do on your jQuery selectors.

What you can do, is change #progress_bar into .progress_bar, and instead of defining it with the id of progress_bar, add it as another class to that top DIV.

(edited into the answer from the comments on it for future references)

You are calling .animateProgress on the whole set of .client_overall_progress. The solution is to iterate each .progress_bar .ui-progress and animate each element seperately. I’ve set up a jsfiddle to show you the problem and how to fix it: jsfiddle.net/4xgzq/1

You should just look at the jQuery code and comment out the alert and uncomment the .animateProgress.

BTW, I also placed an alert() before the .each(), to show you what happened with the first client_overall_progress selector you used in your script – it grabbed the text of the whole set of them. (That’s why the first alert() shows you 6060)