i want to use the jquery ui progress bar to show pct of daily total. In my case, you can actually go over the total allocated. (as i am showing pct complete of a certain distance, and you could actually go above the required distance. Does this tool support having a value of greater than 100% or are there any other gui tools to do this sort of thing?
+34
A:
You might be better off positioning two progress bars side by side, colour the first one green and the second one red, and have the left progress bar 0-100% and the red one 100-whatever %
You'll get a nice effect then.
SLC
2010-05-01 12:38:36
Same as Nero when you burn a CD with too much space allocated.
labilbe
2010-05-29 16:14:21
Ah, I was thinking the same, except I would put the second on top of the first, so it overlaps.Also, If you make the bottom one look like fire and then the top one look like a string of barbed wire, that would be really bad ass.
Tom Dignan
2010-06-04 08:31:36
+1
A:
I haven't tested this, but the bar itself has its own class, ui-progressbar-value. So if you put the progress bar into a div myDiv you could probably set the width manually like this:
$('#myDiv .ui-progressbar-value').width('120%')
or if you wanted to animate it:
$('#myDiv .ui-progressbar-value').animate({width:'120%'}, 'fast')
In the example here: http://jqueryui.com/demos/progressbar/#theming, the width is at 37%, so I think that would work.
colinmarc
2010-05-29 15:58:00
that 120% is 120% of it's parent's size, not of it's own current size, so while resizing it like that might work (I don't know), your exact sample will resize to an unrelated size.
Jasper
2010-06-03 16:42:28
@Jasper I'm pretty sure that's how the widget is supposed to work. .ui-progressbar-value is inside .ui-progressbar, so it should work perfectly. Sorry if that wasn't clear in my answer. The myDiv bit is just so that you can select the right progressbar.
colinmarc
2010-06-03 17:45:16
@colinmarc I see now, you are absolutely right and I was just wrong, I'm sorry
Jasper
2010-06-03 20:32:39
A:
The current jQuery implementation of progressbar doesn't allow values outside the range spanning from 0 to 100. I've been working on a replacement implementation for said plugin, which can be found at http://github.com/azatoth/jquery-ui/tree/progressbar but I've not yet implemented any functionality to visualize ranges outside 100%, but it's an nice idea and I might implement an option to show different ranges. at the moment any input range is recalculated to be inside the 100% range.
azatoth
2010-05-29 16:42:43
+3
A:
Depending on the number involved, what about changing the scale to not be linear, and making it for example, logarythmic? Yout then end up with a bar that moves at different speeds depending on the size of the value... If you define whatever is 100% as 2/3rds of the bar you can see an overrun, but still be within the confines of the progressbar. If you exceed the dimensions of the progress bar, then it makes the UI difficult to design and maintain....
JohnnyJP
2010-06-02 16:13:55
+1
A:
There is probably some way to do this, but you would have to modify jquery, which is something I wouldn't recommend. Instead, I would recommend trying to "fake" a similar result. One option would be - as SLC mentioned - to simply put two progressbars next to each other.
However, I think I would go with an overlay instead. For example, first you have a progressbar with a white background and a green bar, but to display 120%, you just use a progressbar with a green background and a red bar at 20%. Perhaps a code example will be clearer:
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var val = 40;
$(document).ready(function() {
$("#progressbar").progressbar({ value: val });
$("#plusTen").bind("click", function ()
{
setValue($( "#progressbar" ), val + 10 );
val += 10;
});
$("#minusTen").bind("click", function ()
{
setValue($( "#progressbar" ), val - 10 );
val -= 10;
});
});
function setValue(bar, value)
{
if (value > 100)
{
value -= 100;
bar.removeClass("belowMax");
bar.addClass("aboveMax");
}
else
{
bar.removeClass("aboveMax");
bar.addClass("belowMax");
}
bar.progressbar( "option", "value", value);
}
</script>
<style type='text/css'>
#progressbar.aboveMax.ui-progressbar
{
background-image: none;
background-color: #00FF00;
}
#progressbar.aboveMax .ui-progressbar-value
{
background-image: none;
background-color: #FF0000;
}
#progressbar.belowMax.ui-progressbar
{
background-image: none;
background-color: #FFFFFF;
}
#progressbar.belowMax .ui-progressbar-value
{
background-image: none;
background-color: #00FF00;
}
</style>
</head>
<body style="font-size:62.5%;">
<div id='progressbar' class='belowMax'></div>
<br />
<input type='button' value='+10' id='plusTen' />
<input type='button' value='-10' id='minusTen' />
</body>
</html>
Jasper
2010-06-03 16:51:46
+1
A:
Personally, I would just roll my own... this one is entirely CSS based and I am only using the jQuery UI slider for the demo.
HTML (Note: classes added to match jquery ui classes, but there is no ui-progressbar-text class, that I know of).
<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
<div class="ui-progressbar-value ui-widget-header ui-corner-left">
<span class="ui-progressbar-text">10%</span>
</div>
</div>
CSS
.ui-progressbar {
height: 20px;
width: 50%;
border: silver 4px solid;
margin: 0;
padding: 0;
}
.ui-progressbar-value {
height: 20px;
margin: 0;
padding: 0;
text-align: right;
background: #080;
width: 10%;
}
.ui-progressbar-text {
position: relative;
top: -3px;
left: 0;
padding: 0 5px;
font-size: 14px;
font-weight: bold;
color: #000;
}
fudgey
2010-06-04 14:33:14
A:
A progress bar is a good idea when you can predict when a task will end.
For example, downloading a file using bytes.
Given your case has a required and actual distance, I recommend using a formatted text box in place of your progress bar.
Here are two examples:
Actual distance: 3.4 of 4.5
Actual distance: 4.7 of 4.5
You can play with colour or add icons to indicate when you exceed the required distance.
Zamboni
2010-06-05 15:21:16