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?
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.
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.
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.
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....
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>
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;
}
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.