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 11 of 11

Thread: Progress Bar

  1. #1
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Progress Bar

    I need a script for a progress bar with the following specifications:

    - I can have several bars on one page
    - I can set up each bar to load with a preset percentage
    - I can set up links to increase or decrease one or more bars by a specified percentage
    - I can make each bar have several functions to execute when it reaches certain percentages
    - Each of these functions will randomly select another function to execute out of a list of two (or more)
    - Set up a priority level for each function compared to other functions

    For example:
    I have loaded the page. Bar 1 is at 20%, bar 2 is at 60%, and bar 3 is at 0%. I click a link that increases bar 1 by 10% and decreases bar 2 by 20%. Bar 1 is set to execute either func1() or func2() at 30% (where it is now), and bar 2 is set to execute either func3() or func4() at 40% (where it is now). Bar 1 executes func2(), and bar 2 executes func3() (by random). Func2() is set to have a higher priority than func3(), so only it is executed.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    "Paid work offers and requests" is a better forum for this post. "Javascript Programming" is where we HELP you with YOUR code....
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by vwphillips
    I asked the same question but then didn't get a response for weeks:

    Quote Originally Posted by thesmart1
    That hides the bar (or whatever) when it reaches 100%. How would I make it, for example, execute function dothis() when it reaches 30%?

  • #5
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Quote Originally Posted by thesmart1
    I asked the same question but then didn't get a response for weeks:
    Hey you are lucky someone coded it for you to start out.....I think a little trial and error on your part would have figured it out!

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    read this again
    // parameter 2 = (optional) 'hide' will hide bar <DIV> if the inner bar is at 100%. (string, 'hide')
    // or if a function Name as a string
    // the bar object and percentage wil be passed to the function. (function name as a string)

    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts
    I'm sorry, but I'm not that great with javascript, can you please give me an example?

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Progress Bar (16-August-2006)
    // By Vic Phillips  - http://www.vicsjavascripts.org.uk
    
    // A simple progress bar which is controlled by passing a percentage to the controlling function.
    // The bar may be horizontal or vertical and the colors may be specified.
    // Passing a percentage prefixed with '+' or '-' will increment the size by that percentage.
    // A percentage without a prefix will set the size to the specified percentage.
    // Options allow the percentage to be displayed in the bar and the bar to be hidden at 100%
    // or the controlled percentage may be passed to a function of choice.
    // There may be as many applications on a page as required.
    
    
    // ****** Application Notes
    
    // **** The HTML Code
    //
    // Each bar is specified in the HTML Code
    // e.g.
    //  <div id="T1" style="position:relative;width:100px;height:20px;border:solid black 1px;" ></div>
    //  <div id="T2" style="position:relative;width:20px;height:120px;border:solid black 1px;" ></div>
    //
    // The <DIV> must be assigned a unique ID name
    // The style position, 'position:relative;' or 'position:absolute;" and the style width and height defined  'inline'
    
    
    // ***** Initialising
    //
    // Each bar would normally be initialised from a <BODY> or window on load event.
    // e.g.
    //  <body onload="zxcBar('T1','50%','red','txt1');zxcBar('T2','50%','blue');">
    // where:
    // parameter 0 = the unique ID name if the bar <DIV>.                       (string)
    // parameter 1 = the initial size as a percentage of the bar <DIV>.         (string)
    // parameter 2 = the color of the inner bar.                                (string)
    // parameter 3 = (optional) the class rule for a display of the percentage. (string)
    //               example class rules:
    //                .txt1 { left:0px;top:0px;text-align:center;font-weight:bold;color:white; }
    //                .txt2 { left:0px;top:40px;text-align:center;color:white; }
    
    
    // ***** The Controls
    // The inner bar size may be controlled by an event call to function 'zxcBar'
    // e.g.
    //  <input type="button" name="" value="+ 10" onclick="zxcBar('T1','+10%','hide');">
    //  <input type="button" name="" value="- 10" onclick="zxcBar('T1','-10%','hide');">
    //  <input type="button" name="" value="80%" onclick="zxcBar('T1','80%','hide');">
    // where
    // parameter 0 = the unique ID name if the bar <DIV>.                                                       (string)
    // parameter 1 = (Prefix '+' or '-') will increment the inner bar size by that percentage of the bar <DIV>. (string)
    //               (No Prefix) the inner bar size as a percentage of the bar <DIV>.                           (string)
    // parameter 2 = (optional) 'hide' will hide bar <DIV> if the inner bar is at 100%.                         (string, 'hide')
    //                          or if a function name as a string
    //                          the bar object and percentage wil be passed to the function(see next section).  (function name as a string)
    
    
    // ***** Passing the Bar Object and Percentage to a Function
    // The the Bar Object and Percentage to may be passedd to a function of choice
    // by specifying a function name as a string in parameter 2 of the control call to function 'zxcBar'
    // e.g.
    //  <input type="button" name="" value="+ 10" onclick="zxcBar('T1','+10%','MyFunction');" >
    // The Bar object will be passed as parameter 0 and the percentage(digits) as parameter 1 to function 'MyFunction'
    // where example 'MyFunction' is:
    // function MyFunction(obj,percent){
    //  document.getElementById('TstTB').innerHTML='Bar ID name '+obj.id+' is at '+percent+' %';
    // }
    // The content of the fuction customised against the speciic requirement
    //
    
    
    // ***** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
    // These characters are easily changed to characters of choice using global find and replace.
    
    // The functional code (about 1.6K) is best as an external JavaScript
    
    // Tested with IE6 and Mozilla FireFox
    
    
    
    // ***** Functional Code NO NEED to Change
    
    function zxcBar(zxcid,zxcsrt,zxccol,zxctxt){
     zxccol=zxccol||'';
     var zxcobj=document.getElementById(zxcid);
     var zxcobjw=parseInt(zxcobj.style.width);
     var zxcobjh=parseInt(zxcobj.style.height);
     var zxcwh=(zxcobjw>zxcobjh)?'width':'height';
     var zxcbar=zxcobj.getElementsByTagName('DIV')[0];
     var zxcbtxt=zxcobj.getElementsByTagName('DIV')[1];
     if (!zxcbar){
      zxcbar=zxcStyle('DIV',{position:'absolute',overflow:'hidden',left:'0px',top:'0px',width:(zxcobjw)+'px',height:(zxcobjh)+'px',backgroundColor:zxccol});
      zxcobj.appendChild(zxcbar);
      if (zxctxt){
       zxcbtxt=zxcStyle('DIV',{position:'absolute',zIndex:'1',overflow:'hidden',width:(zxcobjw)+'px',height:(zxcobjh)+'px'});
       zxcbtxt.className=zxctxt;
       zxcobj.appendChild(zxcbtxt);
      }
     }
     var zxcpsz=parseInt(zxcobj.style[zxcwh]);
     var zxcbsz=parseInt(zxcbar.style[zxcwh]);
     var zxcinc=((zxcwh=='width')?zxcobjw:zxcobjh)*parseInt(zxcsrt)/100;
     if ((zxcsrt.charAt(0)=='+')||(zxcsrt.charAt(0)=='-')){
      zxcbsz=(zxcbsz+zxcinc);
      zxcbsz=(zxcbsz>zxcpsz)?zxcobjw:(zxcbsz<0)?0:zxcbsz;
      zxcbar.style[zxcwh]=(zxcbsz)+'px';
     }
     else { zxcbar.style[zxcwh]=(zxcpsz*parseInt(zxcsrt)/100)+'px'; }
     zxcbsz=parseInt(zxcbar.style[zxcwh]);
     if (zxccol=='hide'){ zxcobj.style.visibility=(zxcbsz>=zxcpsz)?'hidden':'visible'; }
     else if (window[zxccol]){ window[zxccol](zxcobj,Math.round(100/(zxcpsz/zxcbsz))); }
     if (zxcbtxt){ zxcbtxt.innerHTML=Math.round(100/(zxcpsz/zxcbsz))+' %'; }
    
    
    }
    
    function zxcStyle(zxcele,zxcstyle){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     return zxcele;
    }
    
    //-->
    </script>
    <script type="text/javascript">
    <!--
    function InitScripts(){
     zxcBar('T1','50%','red','txt1');
     zxcBar('T2','85%','blue','txt2');
    }
    
    
    function MyFunction(obj,percent){
     document.getElementById('TstTB').innerHTML='Bar ID name '+obj.id+' is at '+percent+' %';
    }
    
    //-->
    </script>
    </head>
    
    <body onload="InitScripts();">
    <div id="T1" style="position:relative;width:100px;height:20px;background-color:#FFFFCC;border:solid black 1px;" ></div>
    <br>
    <input class="TxtArea" style="width:40px;" type="button" name="" value="+ 10" onclick="zxcBar('T1','+10%','MyFunction');">
    <input class="TxtArea" style="width:40px;" type="button" name="" value="- 10" onclick="zxcBar('T1','-10%','MyFunction');">
    <input class="TxtArea" style="width:40px;" type="button" name="" value="80%" onclick="zxcBar('T1','80%','MyFunction');">
    <br>
    <span id="TstTB" ></span><br>
    <div style="position:relative;left:0px;top:20px;width:80px;text-align:left;" >
    <div style="position:absolute;left:50px;top:20px;width:40px;" >
    <input class="TxtArea" style="width:40px;" type="button" name="" value="+ 5" onclick="zxcBar('T2','+5%','MyFunction');">
    <input class="TxtArea" style="width:40px;" type="button" name="" value="- 5" onclick="zxcBar('T2','-5%','MyFunction');">
    <input class="TxtArea" style="width:40px;" type="button" name="" value="0%" onclick="zxcBar('T2','0%','MyFunction');">
    </div>
    <div id="T2" style="position:relative;width:20px;height:120px;background-color:#FFFFCC;border:solid black 1px;" ></div>
    </div>
    <br>
    <br>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts
    okay, but how would I make it execute function1() for example when the first bar reaches 80%?

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    function function1(){
     alert('Bang');
    }
    
    function MyFunction(obj,percent){
     if (percent==80&&obj.id=='T1'){ function1(); }
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #11
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts
    OK thanks! And I got the random function thing with a script on w3schools.com. Thanks for all your help (and patience)!


  •  

    Posting Permissions

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