site/progressbar-example.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3
   4 <html>
   5 <head>
   6         <title>jsProgressBarHandler Demo | Javascript Progress/Percentage Bar</title>
   7         <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   8
   9         <!-- jsProgressBarHandler prerequisites : prototype.js -->
  10         <script type="text/javascript" src="js/prototype/prototype.js"></script>
  11
  12         <!-- jsProgressBarHandler core -->
  13         <script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script>
  14
  15
  16         <style type = "text/css">
  17
  18                 /* General Links */
  19                 a:link { text-decoration : none; color : #3366cc; border: 0px;}
  20                 a:active { text-decoration : underline; color : #3366cc; border: 0px;}
  21                 a:visited { text-decoration : none; color : #3366cc; border: 0px;}
  22                 a:hover { text-decoration : underline; color : #ff5a00; border: 0px;}
  23                 img { padding: 0px; margin: 0px; border: none;}
  24
  25                 body {
  26                         margin : 0 auto;
  27                         width:100%;
  28                         font-family: 'Verdana';
  29                         color: #40454b;
  30                         font-size: 12px;
  31                         text-align:center;
  32                 }
  33
  34
  35
  36                 .content {
  37                         margin:20px;
  38                         line-height:20px;
  39                 }
  40
  41                 body h1 {
  42                         font-size:14px;
  43                         font-weight:bold;
  44                         color:#CC0000;
  45                         padding:5px;
  46                         border-bottom:solid;
  47                         border-bottom-width:1px;
  48                         border-bottom-color:#333333;
  49                 }
  50
  51                 body h2 {
  52                         font-size:14px;
  53                         font-weight:bold;
  54                         color:#CC0000;
  55                         padding:5px;
  56                         border-bottom:solid;
  57                         border-bottom-width:1px;
  58                         border-bottom-color:#333333;
  59                 }
  60
  61                 #demo {
  62                         margin : 0 auto;
  63                         width:100%;
  64                 }
  65
  66                 #demo .extra {
  67                         padding-left:30px;
  68                 }
  69
  70                 #demo .options {
  71                         padding-left:10px;
  72                 }
  73
  74                 #demo .getOption {
  75                         padding-left:10px;
  76                         padding-right:20px;
  77                 }
  78
  79         </style>
  80
  81 </head>
  82
  83 <body>
  84
  85         <div style="width:540px;margin : 0 auto; text-align:left;" >
  86
  87                 <p style="background: #ffff99; text-align: center; color: #000; border: 1px solid #ff9900; padding: 5px; font-size: 12px; font-weight: bold;">Looking for the <a href="http://www.bram.us/demo/projects/jsprogressbarhandler/ajaxprogressbar.html" title="">ajax demo</a>?</p>
  88
  89                 <h1>jsProgressBarHandler 0.3.3 | Javascript Progress/Percentage Bar</h1>
  90
  91                 <div id="demo">
  92
  93                         <h2>1. Automatically created Progress Bars (Default Styling)</h2>
  94                         <span style="color:#006600;font-weight:bold;">Program Efficiency</span> <br/>
  95                         <span class="progressBar" id="element1">15%</span>
  96                         <span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Empty Bar'"/></a></span>
  97                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','+5');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Add 5%'"/></a></span>
  98                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','-5');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Minus 5%'" /></a></span>
  99                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','15');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Set 15%'"/></a></span>
 100                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','100');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Fill 100%'" /></a></span>
 101                         <span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element1'));return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='&laquo; Select Options'" onmouseover="$('Text1').innerHTML ='Get Current %'"/></a></span>
 102                         <span id="Text1" style="font-weight:bold">&laquo; Select Options</span>
 103                         <br/><br/>
 104
 105
 106                         <span style="color:#006600;font-weight:bold;">Website Projects Progress</span> <br/>
 107                         <span class="progressBar" id="element2">35%</span>
 108                         <span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='&laquo; Select Options'" onmouseover="$('Text2').innerHTML ='Empty Bar'"/></a></span>
 109                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','+10');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='&laquo; Select Options'" onmouseover="$('Text2').innerHTML ='Add 10%'"/></a></span>
 110                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','-5');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='&laquo; Select Options'" onmouseover="$('Text2').innerHTML ='Minus 5%'" /></a></span>
 111                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','35');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='&laquo; Select Options'" onmouseover="$('Text2').innerHTML ='Set 35%'"/></a></span>
 112                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','80');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='&laquo; Select Options'" onmouseover="$('Text2').innerHTML ='Fill 80%'" /></a></span>
 113                         <span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element2'));return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='&laquo; Select Options'" onmouseover="$('Text2').innerHTML ='Get Current %'"/></a></span>
 114                         <span id="Text2" style="font-weight:bold">&laquo; Select Options</span>
 115                         <br/><br/>
 116
 117                         <span style="color:#006600;font-weight:bold;">Weight Loss Progress</span> <br/>
 118                         <span class="progressBar" id="element3">50%</span>
 119                         <span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='&laquo; Select Options'" onmouseover="$('Text3').innerHTML ='Empty Bar'"/></a></span>
 120                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','+25');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='&laquo; Select Options'" onmouseover="$('Text3').innerHTML ='Add 25%'"/></a></span>
 121                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','-15');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='&laquo; Select Options'" onmouseover="$('Text3').innerHTML ='Minus 15%'" /></a></span>
 122                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','50');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='&laquo; Select Options'" onmouseover="$('Text3').innerHTML ='Set 50%'"/></a></span>
 123                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','65');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='&laquo; Select Options'" onmouseover="$('Text3').innerHTML ='Fill 65%'" /></a></span>
 124                         <span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element3'));return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='&laquo; Select Options'" onmouseover="$('Text3').innerHTML ='Get Current %'"/></a></span>
 125                         <span id="Text3" style="font-weight:bold">&laquo; Select Options</span>
 126                         <br/><br/>
 127
 128                         <span style="color:#006600;font-weight:bold;">Upload Progress Bar</span> <br/>
 129                         <span class="progressBar" id="element4">80%</span>
 130                         <span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element4','0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='&laquo; Select Options'" onmouseover="$('Text4').innerHTML ='Empty Bar'"/></a></span>
 131                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element4','+45');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='&laquo; Select Options'" onmouseover="$('Text4').innerHTML ='Add 45%'"/></a></span>
 132                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element4','-30');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='&laquo; Select Options'" onmouseover="$('Text4').innerHTML ='Minus 30%'" /></a></span>
 133                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element4','80');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='&laquo; Select Options'" onmouseover="$('Text4').innerHTML ='Set 80%'"/></a></span>
 134                         <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element4','50');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='&laquo; Select Options'" onmouseover="$('Text4').innerHTML ='Fill 50%'" /></a></span>
 135                         <span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element4'));return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='&laquo; Select Options'" onmouseover="$('Text4').innerHTML ='Get Current %'"/></a></span>
 136                         <span id="Text4" style="font-weight:bold">&laquo; Select Options</span>
 137                         <br/><br/>
 138
 139                         <h2>2. Manually created Progress Bars (Custom Styling)</h2>
 140
 141                         <span style="color:#006600;font-weight:bold;">Custom Progress Bar (without text, without animation)</span> <br/>
 142                         <span id="element5">50%</span>
 143                         <span class="extra"><a href="#" onclick="manualPB.setPercentage('0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='&laquo; Select Options'" onmouseover="$('Text5').innerHTML ='Empty Bar'"/></a></span>
 144                         <span class="options"><a href="#" onclick="manualPB.setPercentage('+15');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='&laquo; Select Options'" onmouseover="$('Text5').innerHTML ='Add 15%'"/></a></span>
 145                         <span class="options"><a href="#" onclick="manualPB.setPercentage('-30');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='&laquo; Select Options'" onmouseover="$('Text5').innerHTML ='Minus 30%'" /></a></span>
 146                         <span class="options"><a href="#" onclick="manualPB.setPercentage('80');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='&laquo; Select Options'" onmouseover="$('Text5').innerHTML ='Set 80%'"/></a></span>
 147                         <span class="options"><a href="#" onclick="manualPB.setPercentage('50');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='&laquo; Select Options'" onmouseover="$('Text5').innerHTML ='Fill 50%'" /></a></span>
 148                         <span class="getOption"><a href="#" onclick="alert(manualPB.getPercentage());return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='&laquo; Select Options'" onmouseover="$('Text5').innerHTML ='Get Current %'"/></a></span>
 149                         <span id="Text5" style="font-weight:bold">&laquo; Select Options</span>
 150                         <br/><br/>
 151
 152                         <span style="color:#006600;font-weight:bold;">Multi Color Bar</span> <br/>
 153                         <span id="element6">[ Loading Progress Bar ]</span>
 154                         <span class="extra"><a href="#" onclick="manualPB2.setPercentage('0', true);return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Empty Bar'"/></a></span>
 155                         <span class="options"><a href="#" onclick="manualPB2.setPercentage('+10');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Add 10%'"/></a></span>
 156                         <span class="options"><a href="#" onclick="manualPB2.setPercentage('-5');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Minus 5%'" /></a></span>
 157                         <span class="options"><a href="#" onclick="manualPB2.setPercentage('30');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Set 30%'"/></a></span>
 158                         <span class="options"><a href="#" onclick="manualPB2.setPercentage('98'); manualPB2.setPercentage('30'); return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Fill 98%, and then 30%'" /></a></span>
 159                         <span class="getOption"><a href="#" onclick="alert(manualPB2.getPercentage());return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Get Current %'"/></a></span>
 160                         <span id="Text6" style="font-weight:bold">&laquo; Select Options</span>
 161                         <br /><br />
 162
 163                         <script type="text/javascript">
 164                                 document.observe('dom:loaded', function() {
 165
 166                                         // first manuale progressbar : different bar (width, height, images) and no animation
 167                                         manualPB = new JS_BRAMUS.jsProgressBar(
 168                                                                 $('element5'),
 169                                                                 75,
 170                                                                 {
 171                                                                         showText        : false,
 172                                                                         animate         : false,
 173                                                                         width           : 154,
 174                                                                         height          : 11,
 175                                                                         boxImage        : 'images/bramus/custom1_box.gif',
 176                                                                         barImage        : 'images/bramus/custom1_bar.gif'
 177                                                                 }
 178                                                         );
 179
 180                                         // second manual example : multicolor (and take all other default paramters)
 181                                         manualPB2 = new JS_BRAMUS.jsProgressBar(
 182                                                                 $('element6'),
 183                                                                 52,
 184                                                                 {
 185
 186                                                                         barImage        : Array(
 187                                                                                 'images/bramus/percentImage_back4.png',
 188                                                                                 'images/bramus/percentImage_back3.png',
 189                                                                                 'images/bramus/percentImage_back2.png',
 190                                                                                 'images/bramus/percentImage_back1.png'
 191                                                                         ),
 192
 193                                                                         onTick : function(pbObj) {
 194
 195                                                                                 switch(pbObj.getPercentage()) {
 196
 197                                                                                         case 98:
 198                                                                                                 alert('Hey, we\'re at 98!');
 199                                                                                         break;
 200
 201                                                                                         case 100:
 202                                                                                                 alert('Progressbar full at 100% ... maybe do a redirect or sth like that here?');
 203                                                                                         break;
 204
 205                                                                                 }
 206
 207                                                                                 return true;
 208                                                                         }
 209                                                                 }
 210                                                         );
 211                                 }, false);
 212                         </script>
 213
 214                 </div>
 215
 216                 <p style="background: #ffff99; text-align: center; color: #000; border: 1px solid #ff9900; padding: 5px; font-size: 12px; font-weight: bold;">This page is a testpage of jsProgressBarHandler - see <a href="http://www.bram.us/projects/js_bramus/jsprogressbarhandler/" title="jsProgressBarHandler | Javascript Progress/Percentage Bar">http://www.bram.us/projects/js_bramus/jsprogressbarhandler/</a> for details</p>
 217
 218         </div>
 219
 220 </body>
 221 </html>