Question

How can I draw two or more jQuery progressbar with diffrent values inside the same div?

I need to draw two progress bars in a single div, this means I can give only one id to the function that creates progressBar.

Currently my function is:

function drawbar(no,id_of_div) 
{
                 $(id_of_div).progressbar({ value:no });
                 $(id_of_div).css({background: '#99FF66'}); 
 }

I want a function that will also take a value for a second progress bar which should be drawn inside the same div.

Something like:

function drawbar(value_for_first , value_for_second ,id_of_div)
{
---------
------
}

Can any body help me?

Answer 1

I think you’re going to have to put divs within the div, since it looks like the jQuery UI progressbar fills its target element. E.g.:

function drawbar(value_for_first, value_for_second, id_of_div) {
    var target = $("#" + id_of_div);
    $("<div>").appendTo(target).progressbar({value: value_for_first});;
    $("<div>").appendTo(target).progressbar({value: value_for_second});
}

Live example

They may need height, if you’re not doing that with CSS (e.g., css("height", "50%")). (I haven’t used the jQuery UI progress bar.)

If you’re updating them with the same function, the we’d want to allow for them possibly already being there:

function drawbar(value_for_first, value_for_second, id_of_div) {
    var target = $("#" + id_of_div),
        first  = target.find(".first"),
        second = target.find(".second");
    if (!first[0]) {
        first  = $("<div>").addClass("first").appendTo(target);
        second = $("<div>").addClass("second").appendTo(target);
    }
    first.progressbar({value: value_for_first});
    second.progressbar({value: value_for_second});
}

Live example – note that it shows initial values, then pauses a second, then updates them