CODEWITHSUNDEEP
javascripthtmljquery-ui
Saurabh Bayani
Saurabh Bayani

Reputation: 3500

How do I get two vertical jQuery UI progress bars next to each other?

I have two progressbars using jQuery UI in single div (by subdividing the div). I also managed them to draw vertically using a modified version of the jQuery UI progressbar code (drawn from this forum thread). But they don't get drawn next to each other as expected.

Here's the code where I'm setting them up:

function drawVBar(self,average,eid)
{
var mainid="#"+eid;
var target = $ ("#" + eid),
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: self,orientation: 'vertical'});

second.progressbar({value: average,orientation: 'vertical'});
}

Can anybody please tell me how can I style them so that they show next to each other?

Upvotes: 1

Views: 1057

Answers (2)

Saurabh Bayani
Saurabh Bayani

Reputation: 3500

Actually the ans was right there... easy one. all i had to do is set css of both objs (first,second)

e.g to place second progress bar at any place

second.progressbar({value: average,orientation: 'vertical'});
second.css({"position":"absolute","left":"30px"});

and so on... for other css values

Upvotes: 1

Jordan Wallwork
Jordan Wallwork

Reputation: 3114

If they are wrapped in a div, then you could try float:left, or possibly even display:inline. If you are floating them and it messes up your page layout, try wrapping them in a div with overflow:auto

function drawVBar(self,average,eid)
{
var mainid="#"+eid;
var target = $ ("#" + eid),
first= target.find(".first"),
second= target.find(".second");
if(!first[0])
{
    first= $("<div style='float:left'>").addClass("first").appendTo(target);
    second= $("<div style='float:left'>").addClass("second").appendTo(target);         
}
first.progressbar({value: self,orientation: 'vertical'});

second.progressbar({value: average,orientation: 'vertical'});
}

Upvotes: 1

Related Questions