I have integrated this several times to do just what you are talking about:
Description: This is an event-based progress bar which you can add to existing scripts that require graphical representation. Using 3 pre-exposed methods, you control precisely when it loads and by how much each time: incrCount(percent_value) - This increments the current percent value by percent_value decrCount(percent_value) - This decrements the current percent value by percent_value setCount(percent_value) - This sets the current percent value to whatever percent_value you specify; 0 to 100. Call the above methods as you would with any JavaScript method and in any context. Event-based Progress Bar- Developer's View <html> <body> <script language="javascript" src="percent_bar.js"> /* Event-based progress bar- By Brian Gosselin at http://scriptasylum.com/bgaudiodr Featured on DynamicDrive.com For full source, visit http://www.dynamicdrive.com */ </script> </body> </html> <!--Source for percent_bar.js--> // Percent Bar - Version 1.0 // Author: Brian Gosselin of http://scriptasylum.com // Script featured on http://www.dynamicdrive.com // Note: Modified by Dynamicdrive so incr/decrCount() accepts any percentage var loadedcolor='navy' ; // PROGRESS BAR COLOR var unloadedcolor='lightgrey'; // BGCOLOR OF UNLOADED AREA var barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELS var barwidth=350; // WIDTH OF THE BAR IN PIXELS var bordercolor='black'; // COLOR OF THE BORDER // THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%. // IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({}) // BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE. // PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY. // TO CAUSE A REDIRECT, INSERT THE FOLLOWING LINE IN BETWEEN THE CURLY BRACES: // window.location="http://redirect_page.html";; // JUST CHANGE THE ACTUAL URL IT "POINTS" TO. var action=function() { //window.location="http://www.dynamicdrive.com } //*****************************************************// //********** DO NOT EDIT BEYOND THIS POINT **********// //*****************************************************// var w3c=(document.getElementById)?true:false; var ns4=(document.layers)?true:false; var ie4=(document.all && !w3c)?true:false; var ie5=(document.all && w3c)?true:false; var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false; var blocksize=(barwidth-2)/100; barheight=Math.max(4,barheight); var loaded=0; var perouter=0; var perdone=0; var images=new Array(); var txt=''; if(ns4){ txt+='<table cellpadding=0 cellspacing=0 border=0><tr><td>'; txt+='<ilayer name="perouter" width="'+barwidth+'" height="'+barheight+'">'; txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>'; txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>'; txt+='<layer name="perdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>'; txt+='</ilayer>'; txt+='</td></tr></table>'; }else{ txt+='<div id="perouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">'; txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; z-index:100; font-size:1px;"></div>'; txt+='<div id="perdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; z-index:100; font-size:1px;"></div>'; txt+='</div>'; } document.write(txt); function incrCount(prcnt){ loaded+=prcnt; setCount(loaded); } function decrCount(prcnt){ loaded-=prcnt; setCount(loaded); } function setCount(prcnt){ loaded=prcnt; if(loaded<0)loaded=0; if(loaded>=100){ loaded=100; setTimeout('hidebar()', 400); } clipid(perdone, 0, blocksize*loaded, barheight-2, 0); } //THIS FUNCTION BY MIKE HALL OF BRAINJAR.COM function findlayer(name,doc){ var i,layer; for(i=0;i<doc.layers.length;i++){ layer=doc.layers[i]; if(layer.name==name)return layer; if(layer.document.layers.length>0) if((layer=findlayer(name,layer.document))!=null) return layer; } return null; } function progressBarInit(){ perouter=(ns4)?findlayer('perouter',document):(ie4)?document.all['perouter'] :document.getElementById('perouter'); perdone=(ns4)?perouter.document.layers['perdone']:(ie4)?document.all['perdon e']:document.getElementById('perdone'); clipid(perdone,0,0,barheight-2,0); if(ns4)perouter.visibility="show"; else perouter.style.visibility="visible"; } function hidebar(){ //(ns4)? perouter.visibility="hide" : perouter.style.visibility="hidden"; } function clipid(id,t,r,b,l){ if(ns4){ id.clip.left=l; id.clip.top=t; id.clip.right=r; id.clip.bottom=b; }else id.style.width=r; } window.onload=progressBarInit; window.onresize=function(){ if(ns4)setTimeout('history.go(0)' ,400); ---------------------------------------------------------------------------- ---- Copyright C 1998-2004 Dynamic Drive. Read Terms Of Use here. -----Original Message----- From: Nicholas Froome [mailto:[EMAIL PROTECTED] Sent: Tuesday, March 30, 2004 4:20 PM To: [EMAIL PROTECTED] Subject: Witango-Talk: Re: Multiple Uploads at One Time >Functionally, it has performed beautifully. Usability-wise, I wishthere was a way to show progress on uploads. I've had users abortbecause they didn't 'see' anything happening. If you discover asolution for this, let me know. eBay puts up a new window which says things are happening in the background. When done, this new window disappears and loads a new page into the main window. Neat ________________________________________________________________________ TO UNSUBSCRIBE: Go to http://www.witango.com/developer/maillist.taf ________________________________________________________________________ TO UNSUBSCRIBE: Go to http://www.witango.com/developer/maillist.taf
