Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post

    Help to fix javascript progress bar!

    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!

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

    Here is the original code:
    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:
    Code:
    <script language="javascript">drawPercentBar(171, <%=totaltotal/EstHours*100%>, '#aadba2', '#F2F2F2'); </script>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,073
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Perhaps outer div to have "overflow:hidden" in the CSS style.

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    solved. i actually just wrote an asp if statement... if over 100, display only up to 100.

    thanks!

  • Users who have thanked rtown for this post:

    Hashim1 (12-29-2010)

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post
    Quote Originally Posted by rtown View Post
    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?
    Last edited by Hashim1; 12-29-2010 at 03:42 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •