...

View Full Version : Help to fix javascript progress bar!



rtown
12-28-2010, 05:41 PM
Hey guys!
I have a progress bar written in javascript. Its pretty simple, consisting of a couple divs, where the inside one grows with the given percentage.

Anyways, the problem we are having is that sometimes the percentage that is dynamically calculated is over 100% (we are using it as an job completion progress bar, so if more hours are spent than estimated the bar will be over 100%.

I guess thats fine, except the inside div goes right off the container and keeps growing. Can we make the inside div max out at 100% somehow? Hoping someone can help me out with this, im not sure how this can be done! :D:D

I should add that the original script with example I found here: alpinemeadow.com/stitchery/weblog/HTML-morsels.html

Here is the original code:


<script language="javascript">
function drawPercentBar(width, percent, color, background)
{var pixels = width * (percent / 100);
if (!background) { background = "none"; }
document.write("<div style=\"position: relative; line-height: 1em; background-color: "
+ background + "; border: 1px solid #979797; width: "
+ width + "px\">");
document.write("<div style=\"height: 1.5em; width: " + pixels + "px; background-color: "
+ color + ";\"></div>");
document.write("<div style=\"position: absolute; text-align: center; padding-top: .25em; width: "
+ width + "px; top: 0; left: 0\">" + percent + "%</div>");
document.write("</div>"); }
</script>

Called for here:

<script language="javascript">drawPercentBar(171, <%=totaltotal/EstHours*100%>, '#aadba2', '#F2F2F2'); </script>

jmrker
12-28-2010, 07:24 PM
Perhaps outer div to have "overflow:hidden" in the CSS style.

rtown
12-28-2010, 09:00 PM
solved. i actually just wrote an asp if statement... if over 100, display only up to 100.

thanks!

Hashim1
12-28-2010, 09:36 PM
solved. i actually just wrote an asp if statement... if over 100, display only up to 100.

thanks!

I'm interested, what exactly was the line of code that you used tsolve the problem?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum