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