#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Posts
    570
    Rep Power
    60

    Exclamation Javascript counter as table cell percentage


    Hey all:

    I have a table with width 200 pixels. I then I have two cells inside. One on the left, with bgcolor red, has a percent 'x' and the one on the right has percent '100%'. What I want is in Javascript, for 'x' to be an activly incrimenting number starting from 0-100. Is this possible? I know to use setTimeout or setInterval... but it is bewildering me.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Posts
    570
    Rep Power
    60
    if that doesn't work, I will do this:

    make an image 20px wide. THen I make a counter to count up to 100. And if the counter reaches 10/20/30/40/50/60/70/80/90/100, it will print out an image 1x,2x,3x,4x,5x,6x,7x,8x,9x,10x, respectivly. (where x is the image). Anyone know how to do this as an alternate? Thanks
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    Sounds like some kind of progressbar...whatever:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    table#optimum {
                   width: 200px;
                   height: 40px;
                   border-collapse: collapse;
                  }
    
    td.normal     {
                   width: 100%;
                   padding: 0px;
                   border: #c0c0c0 ridge;
                   border-width: 4px 4px 4px 0px;
                   background: ivory;
                  }
    
    td#grower     {
                   width: 0px;
                   border: #a0a0a0 ridge;
                   padding: 0px;
                   border-width: 4px 0px 4px 4px;
                   background: red;
                  }
    
    body          {
                   margin: 100px;
                   background: black;
                  }
    
    </style>
    <script type="text/javascript" language="javascript">
    
    $bar.speed = 10; // 1 - 100
    
    function $bar() {
         if (typeof $bar.el == 'undefined') $bar.el = document.getElementById('grower');
         if (typeof $bar.n == 'undefined') $bar.n = 0;
         $bar.el.style.width = String($bar.n + '%');
         if (++$bar.n < 100) setTimeout('$bar()', 100/$bar.speed);
         else {
                              $bar.el.style.borderColor = '#f0f0f0';
                              $bar.el.nextSibling.style.borderColor = '#f0f0f0';
       }
    }
    
    onload = $bar;
    
    </script>
    </head>
    <body>
    <table id="optimum">
    <tr>
    <td id="grower"></td>
    <td class="normal"></td>
    </tr>
    </table>
    </body>
    </html>
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Posts
    570
    Rep Power
    60
    dude... thank you SOOOO freaking much!
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Posts
    570
    Rep Power
    60
    hey, just wondering... how can I reset the bar? thanks
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Posts
    570
    Rep Power
    60
    still looking for an answer... thank again!
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    Optimum -

    Bundle your requests together - think about them for a minute - and I'll try and modify the code to suit.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Posts
    570
    Rep Power
    60
    lol, ok...

    it IS a progress bar as you suspected. Anyway, what happens is that when someone clicks a button, it brings up a function 'execute' to write to another field. But it also calls the $bar() function, so start the time bar. The time bar is simply a visual to when they can press that one button again. What I want it to do is:

    1 - go a speed depending on the accounts "spd" (I already got this working)

    2 - when the bar reaches full, it will blink from one color to the next (I already got this one, just figured it out)

    3 - when that button is clicked (like I said, it brings up a function 'execute' to do something, but it also starts the timebar), I want it to start the time bar. But the problem here is that I can only start it once. Is there a way that once function 'execute' is called, it resets the time bar and starts it also? (also just got this to work)

    well then... forgot all of that. I've figured everythihng out! Thanks
    Last edited by Optimum; April 7th, 2003 at 04:52 PM.

IMN logo majestic logo threadwatch logo seochat tools logo