Horizontal progress bar

Question

In html and jQuery, how do you show multiple horizontal progress bars? I have an idea for class. Students vote on topics and as they vote, the progress bars move left and right. If you've ever participated in a poll on Adobe Connect, that's the kind of look I'm thinking about.

It can be in html5 because I'll be the only person displaying the results (at the front of the class).

It cannot be in flash because I don't know flash that well.

I'll just have the page auto refresh every 15 seconds or so.

Answer 1

doc: http://docs.jquery.com/UI/Progressbar demo: http://jqueryui.com/demos/progressbar/

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

Just create multiple elements if You need multiple progress bars

Answer 2

I would use simple nested divs and set the inner, colored div's width percentage to the percentage of whatever you are trying to measure. The outer div could have a border and a fixed width/height. I would get this basic functionality working first. You can then add a nice looking progress bar as an enhancement.

You can use jQuery to help out with coding this, but this would mostly be an exercise in basic JavaScript/HTML coding. You won't be able to simultaneously (in the true definition of the word) update the progress bars because JavaScript is single threaded, but you can loop through the progress bars using some sort timed interval and update each progress bar's % completed individually reflecting each individual's (or whatever's) progress.

Answer 3

Surely you searched for this and found http://jqueryui.com/demos/progressbar/? What additional questions do you have?

Answer 4

How about using a div inside a div?

HTML/CSS:

<div id="progress" style="width:200px; border:1px solid black">
    <div style="background:green; width:0%">
    </div>
<div>

jQuery:

$(document.ready(function() {
    window.setInterval(function() {
        $('#progress div').css('width', your_way_of_measuring_percentage + '%');
    }, 15000);
});

Haven't tested this code, so putting community wiki on :)