how would you show the progress bar greater than 100%

Question

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?

Answer 1

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.

Answer 2

Depending on the number involved, what about changing the scale to not be linear, and making it for example, logarithmic? You 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 progress bar. If you exceed the dimensions of the progress bar, then it makes the UI difficult to design and maintain...

Answer 3

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

Answer 4

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.