Hi,
Can anyone help me with a javascipt code for progress bar. I need to start and the stop progress bar when ever the request starts and ends. I am using JSP as my presentation layer
Regards Sanjeev
<i> </i> <table style="border:2px outset red;"> <tr style="height:5px;font-size:5px;padding:0px;margin:0px;"> <td id="td0" style="width:5px">&nbsp;</td> <td id="td1" style="width:5px">&nbsp;</td> <td id="td2" style="width:5px">&nbsp;</td> <td id="td3" style="width:5px">&nbsp;</td> <td id="td4" style="width:5px">&nbsp;</td> <td id="td5" style="width:5px">&nbsp;</td> <td id="td6" style="width:5px">&nbsp;</td> <td id="td7" style="width:5px">&nbsp;</td> <td id="td8" style="width:5px">&nbsp;</td> <td id="td9" style="width:5px">&nbsp;</td> </tr> </table> <script> var progInx = -1; function fillBar(){ progInx++; if (progInx == 10){ progInx=0; for (i=0;i<10;i++){ document.getElementById("td"+i).style.backgroundColor="#FFFFFF"; } } document.getElementById("td"+progInx).style.backgroundColor="blue"; setTimeout("fillBar()",5000); } fillBar(); <i> </i></script>
<div id="pbar"></div>
<style type="text/css"> #pbar { position: absolute; /* relative will do too - goal to make it offset parent */ width: 400px; height: 50px; border: solid #000 1px; padding: 0; margin: 0; } #pbar div { padding: 0; margin: 0; width: 50%; height: 100%; background: #00f; } <br/> </style>
<script type="text/javascript"> function pbar(element) { this.el = element; <i> </i>this.start = function(numSteps,period) //Period in seconds, <i> </i> { this.bar = this.el.appendChild(document.createElement('div')); <i> </i> this.bar.style.width = '0'; <i> </i> this.advance = 100/numSteps; <i> </i> this.currStep = 0; <i> </i> this.timer = setInterval('pbar.instances['+this.id+'].step()',period*1000); <i> </i> }; <i> </i>this.step = function() <i> </i> { var barWidth = this.advance*(++this.currStep); <i> </i> barWidth = barWidth>100?100:barWidth; <i> </i> this.bar.style.width = barWidth+'%'; <i> </i> if(barWidth==100) clearInterval(this.timer); <i> </i> window.status +='.'; <i> </i> } <i> </i>this.reset = function() <i> </i> { this.el.removeChild(this.bar); <i> </i> this.bar = null; <i> </i> } <i> </i>this.id = pbar.instances.length; <i> </i>pbar.instances.push(this); } pbar.instances = new Array(); </script>
(new pbar(document.getElementById('pbar'))).start(100,0.1);
You call this simple :rolleyes: I got to give the "Most Inventive Misuse of Tables" award....[/QUOTE]
Help @sanjeevkoppal spread the word by sharing this article on Twitter...