diff options
Diffstat (limited to 'site/progressbar-example.html')
| -rw-r--r-- | site/progressbar-example.html | 221 |
1 files changed, 221 insertions, 0 deletions
diff --git a/site/progressbar-example.html b/site/progressbar-example.html new file mode 100644 index 0000000..17c8293 --- /dev/null +++ b/site/progressbar-example.html @@ -0,0 +1,221 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html>
+<head>
+ <title>jsProgressBarHandler Demo | Javascript Progress/Percentage Bar</title>
+ <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
+
+ <!-- jsProgressBarHandler prerequisites : prototype.js -->
+ <script type="text/javascript" src="js/prototype/prototype.js"></script>
+
+ <!-- jsProgressBarHandler core -->
+ <script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script>
+
+
+ <style type = "text/css">
+
+ /* General Links */
+ a:link { text-decoration : none; color : #3366cc; border: 0px;}
+ a:active { text-decoration : underline; color : #3366cc; border: 0px;}
+ a:visited { text-decoration : none; color : #3366cc; border: 0px;}
+ a:hover { text-decoration : underline; color : #ff5a00; border: 0px;}
+ img { padding: 0px; margin: 0px; border: none;}
+
+ body {
+ margin : 0 auto;
+ width:100%;
+ font-family: 'Verdana';
+ color: #40454b;
+ font-size: 12px;
+ text-align:center;
+ }
+
+
+
+ .content {
+ margin:20px;
+ line-height:20px;
+ }
+
+ body h1 {
+ font-size:14px;
+ font-weight:bold;
+ color:#CC0000;
+ padding:5px;
+ border-bottom:solid;
+ border-bottom-width:1px;
+ border-bottom-color:#333333;
+ }
+
+ body h2 {
+ font-size:14px;
+ font-weight:bold;
+ color:#CC0000;
+ padding:5px;
+ border-bottom:solid;
+ border-bottom-width:1px;
+ border-bottom-color:#333333;
+ }
+
+ #demo {
+ margin : 0 auto;
+ width:100%;
+ }
+
+ #demo .extra {
+ padding-left:30px;
+ }
+
+ #demo .options {
+ padding-left:10px;
+ }
+
+ #demo .getOption {
+ padding-left:10px;
+ padding-right:20px;
+ }
+
+ </style>
+
+</head>
+
+<body>
+
+ <div style="width:540px;margin : 0 auto; text-align:left;" >
+
+ <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>
+
+ <h1>jsProgressBarHandler 0.3.3 | Javascript Progress/Percentage Bar</h1>
+
+ <div id="demo">
+
+ <h2>1. Automatically created Progress Bars (Default Styling)</h2>
+ <span style="color:#006600;font-weight:bold;">Program Efficiency</span> <br/>
+ <span class="progressBar" id="element1">15%</span>
+ <span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Empty Bar'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','+5');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Add 5%'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','-5');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Minus 5%'" /></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','15');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Set 15%'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element1','100');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Fill 100%'" /></a></span>
+ <span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element1'));return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text1').innerHTML ='« Select Options'" onmouseover="$('Text1').innerHTML ='Get Current %'"/></a></span>
+ <span id="Text1" style="font-weight:bold">« Select Options</span>
+ <br/><br/>
+
+
+ <span style="color:#006600;font-weight:bold;">Website Projects Progress</span> <br/>
+ <span class="progressBar" id="element2">35%</span>
+ <span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Empty Bar'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','+10');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Add 10%'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','-5');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Minus 5%'" /></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','35');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Set 35%'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element2','80');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Fill 80%'" /></a></span>
+ <span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element2'));return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text2').innerHTML ='« Select Options'" onmouseover="$('Text2').innerHTML ='Get Current %'"/></a></span>
+ <span id="Text2" style="font-weight:bold">« Select Options</span>
+ <br/><br/>
+
+ <span style="color:#006600;font-weight:bold;">Weight Loss Progress</span> <br/>
+ <span class="progressBar" id="element3">50%</span>
+ <span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseover="$('Text3').innerHTML ='Empty Bar'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','+25');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseover="$('Text3').innerHTML ='Add 25%'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','-15');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseover="$('Text3').innerHTML ='Minus 15%'" /></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','50');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseover="$('Text3').innerHTML ='Set 50%'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element3','65');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseover="$('Text3').innerHTML ='Fill 65%'" /></a></span>
+ <span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element3'));return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text3').innerHTML ='« Select Options'" onmouseover="$('Text3').innerHTML ='Get Current %'"/></a></span>
+ <span id="Text3" style="font-weight:bold">« Select Options</span>
+ <br/><br/>
+
+ <span style="color:#006600;font-weight:bold;">Upload Progress Bar</span> <br/>
+ <span class="progressBar" id="element4">80%</span>
+ <span class="extra"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element4','0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='« Select Options'" onmouseover="$('Text4').innerHTML ='Empty Bar'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element4','+45');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='« Select Options'" onmouseover="$('Text4').innerHTML ='Add 45%'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element4','-30');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='« Select Options'" onmouseover="$('Text4').innerHTML ='Minus 30%'" /></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element4','80');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='« Select Options'" onmouseover="$('Text4').innerHTML ='Set 80%'"/></a></span>
+ <span class="options"><a href="#" onclick="myJsProgressBarHandler.setPercentage('element4','50');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='« Select Options'" onmouseover="$('Text4').innerHTML ='Fill 50%'" /></a></span>
+ <span class="getOption"><a href="#" onclick="alert(myJsProgressBarHandler.getPercentage('element4'));return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text4').innerHTML ='« Select Options'" onmouseover="$('Text4').innerHTML ='Get Current %'"/></a></span>
+ <span id="Text4" style="font-weight:bold">« Select Options</span>
+ <br/><br/>
+
+ <h2>2. Manually created Progress Bars (Custom Styling)</h2>
+
+ <span style="color:#006600;font-weight:bold;">Custom Progress Bar (without text, without animation)</span> <br/>
+ <span id="element5">50%</span>
+ <span class="extra"><a href="#" onclick="manualPB.setPercentage('0');return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='« Select Options'" onmouseover="$('Text5').innerHTML ='Empty Bar'"/></a></span>
+ <span class="options"><a href="#" onclick="manualPB.setPercentage('+15');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='« Select Options'" onmouseover="$('Text5').innerHTML ='Add 15%'"/></a></span>
+ <span class="options"><a href="#" onclick="manualPB.setPercentage('-30');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='« Select Options'" onmouseover="$('Text5').innerHTML ='Minus 30%'" /></a></span>
+ <span class="options"><a href="#" onclick="manualPB.setPercentage('80');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='« Select Options'" onmouseover="$('Text5').innerHTML ='Set 80%'"/></a></span>
+ <span class="options"><a href="#" onclick="manualPB.setPercentage('50');return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='« Select Options'" onmouseover="$('Text5').innerHTML ='Fill 50%'" /></a></span>
+ <span class="getOption"><a href="#" onclick="alert(manualPB.getPercentage());return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text5').innerHTML ='« Select Options'" onmouseover="$('Text5').innerHTML ='Get Current %'"/></a></span>
+ <span id="Text5" style="font-weight:bold">« Select Options</span>
+ <br/><br/>
+
+ <span style="color:#006600;font-weight:bold;">Multi Color Bar</span> <br/>
+ <span id="element6">[ Loading Progress Bar ]</span>
+ <span class="extra"><a href="#" onclick="manualPB2.setPercentage('0', true);return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='« Select Options'" onmouseover="$('Text6').innerHTML ='Empty Bar'"/></a></span>
+ <span class="options"><a href="#" onclick="manualPB2.setPercentage('+10');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='« Select Options'" onmouseover="$('Text6').innerHTML ='Add 10%'"/></a></span>
+ <span class="options"><a href="#" onclick="manualPB2.setPercentage('-5');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='« Select Options'" onmouseover="$('Text6').innerHTML ='Minus 5%'" /></a></span>
+ <span class="options"><a href="#" onclick="manualPB2.setPercentage('30');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='« Select Options'" onmouseover="$('Text6').innerHTML ='Set 30%'"/></a></span>
+ <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 ='« Select Options'" onmouseover="$('Text6').innerHTML ='Fill 98%, and then 30%'" /></a></span>
+ <span class="getOption"><a href="#" onclick="alert(manualPB2.getPercentage());return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='« Select Options'" onmouseover="$('Text6').innerHTML ='Get Current %'"/></a></span>
+ <span id="Text6" style="font-weight:bold">« Select Options</span>
+ <br /><br />
+
+ <script type="text/javascript">
+ document.observe('dom:loaded', function() {
+
+ // first manuale progressbar : different bar (width, height, images) and no animation
+ manualPB = new JS_BRAMUS.jsProgressBar(
+ $('element5'),
+ 75,
+ {
+ showText : false,
+ animate : false,
+ width : 154,
+ height : 11,
+ boxImage : 'images/bramus/custom1_box.gif',
+ barImage : 'images/bramus/custom1_bar.gif'
+ }
+ );
+
+ // second manual example : multicolor (and take all other default paramters)
+ manualPB2 = new JS_BRAMUS.jsProgressBar(
+ $('element6'),
+ 52,
+ {
+
+ barImage : Array(
+ 'images/bramus/percentImage_back4.png',
+ 'images/bramus/percentImage_back3.png',
+ 'images/bramus/percentImage_back2.png',
+ 'images/bramus/percentImage_back1.png'
+ ),
+
+ onTick : function(pbObj) {
+
+ switch(pbObj.getPercentage()) {
+
+ case 98:
+ alert('Hey, we\'re at 98!');
+ break;
+
+ case 100:
+ alert('Progressbar full at 100% ... maybe do a redirect or sth like that here?');
+ break;
+
+ }
+
+ return true;
+ }
+ }
+ );
+ }, false);
+ </script>
+
+ </div>
+
+ <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>
+
+ </div>
+
+</body>
+</html>
|