Soyez le premier à donner votre avis sur cette source.
Snippet vu 21 549 fois - Téléchargée 34 fois
<html> <head> <title>Exemple de progressBar en Javascript</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="javascript"> var destURL; var pos; var nbre; var saved=false; function save(){ destURL='save.php?';//Remplacez ceci par la page traitant les données envoyées destURL=destURL+document.all.form1.elements[0].name+'='+document.all.form1.elements[0].value;//On y ajoute le contenu du premier element du formulaire var obj = document.all['InputText'];//Ceci est le nom de la layer contenant la progressbar str=obj.style.width; num=str.substr(0,str.length-2) obj.style.left = document.body.scrollLeft+(document.body.clientWidth-(num))/2; str=obj.style.height; num=str.substr(0,str.length-2) obj.style.top = document.body.scrollTop+(document.body.clientHeight-(num))/2; obj.style.visibility = "visible"; nbre=document.all.form1.length-1; pos = 1; progressbar(pos,nbre); setTimeout(NoOP,10); } function progressbar(nbr,tot){ cellnbr=Math.floor((nbr*10) / tot); if ((cellnbr>=0) && (cellnbr<10)) { Tsave.rows[0].cells[cellnbr].style.background = '#9933FF'; } } function NoOP(){ if (document.all.form1.elements[pos].value!=0) { destURL=destURL+'&'+document.all.form1.elements[pos].name+'='+document.all.form1.elements[pos].value; } progressbar(pos,nbre); pos = pos+1; if (pos <= nbre) { setTimeout(NoOP,5); } else { saved=true; window.location.href=destURL; } } function confirmation(){ if(confirm("Voulez-vous sauver avant de quitter?")){ document.execCommand('Stop'); save(); } } </script> <body onUnload="if (!saved) confirmation();"> <form name="form1" action="save.php" method="get" enctype="application/x-www-form-urlencoded" target="_self"> <input name="65-'ARD'-4-'OP 10'-1-86" type="text" size="2" value="0"> <input name="65-'ARD'-4-'OP 20'-1-86" type="text" size="2" value="0"> <input name="65-'ARD'-4-'OP 30'-1-86" type="text" size="2" value="0"> <input name="65-'ARD'-4-'OP 40'-1-86" type="text" size="2" value="0"> <input name="65-'ARD'-4-'OP 50'-1-86" type="text" size="2" value="0"> <input name="65-'ARD'-4-'OP 60'-1-86" type="text" size="2" value="0"> <input name="65-'ARD'-4-'OP 70'-1-86" type="text" size="2" value="0"> <input name="65-'ARD'-4-'OP 80'-1-86" type="text" size="2" value="0"> <input name="65-'ARD'-4-'OP 90'-1-86" type="text" size="2" value="0"> <input name="65-'ARD'-4-'OP 100'-1-86" type="text" size="2" value="0"> <input name="65-'ARD'-4-'OP 110'-1-86" type="text" size="2" value="0"> <!-- Remplissez le reste ... Chez moi c'est fait par un script PHP --> <input style="width:100" value="Sauver" name="savebutton" type="button" onClick="save();"> </form> <!-- PopUp BEGIN : début de la progressBar--> <script language="JavaScript"> if (document.all) { document.writeln("<div id=\"InputText\" style=\"position:absolute; left:0px; top:0px; z-index:7; width:240px; height:70px; overflow: hidden; visibility: hidden; background-color: #FFFFFF; border: 1px none #000000\" >"); } else if (document.layers) { document.writeln("<layer id=\"InputText\" pagex=\"0\" pagey=\"0\" width=\"200\" height=\"200\" z-index=\"100\" visibility=\"hide\" bgcolor=\"#FFFFFF\" onMouseOver=\"if(ppcTI){clearTimeout(ppcTI);ppcTI=false;}\" onMouseOut=\"ppcTI=setTimeout('hideCalendar()',500)\">"); } else { document.writeln("<p><font color=\"#FF0000\"><b>Error ! The current browser is either too old or too modern (using DOM document structure).</b></font></p>");} </script> <noscript><p><font color="#FF0000"><b>JavaScript is not activated !</b></font></p></noscript> <IFRAME id="iframe1" scrolling="no" name="iframe1" scroll="none" style="width:240px; height:70px;z-index:1"></IFRAME> <!-- l'IFRAME sert à masquer les éventuels SELECT qui, sinon, restent devant les DIV, sans respecter le z-index --> <div style="position:relative;top:-70px;z-index:9"> <table width="240" height="70" border="1" cellpadding="0" cellspacing="0" bordercolorlight="#999999" bordercolordark="#FFFFFF" vspace="0" hspace="0"> <tr align="center" bgcolor="#CCCCCC"> <td nowrap> <b><font face="MS Sans Serif, sans-serif" size="1">Sauvegarde en cours</font></b> <table id="Tsave" width="200" height="20" border="1" cellpadding="0" cellspacing="1" bordercolorlight="#999999" bordercolordark="#FFFFFF" vspace="0" hspace="0"> <tr align="center"> <td bgcolor="#FFFFFF" height="18" width="10%"></td> <td bgcolor="#FFFFFF" width="10%"></td> <td bgcolor="#FFFFFF" width="10%"></td> <td bgcolor="#FFFFFF" width="10%"></td> <td bgcolor="#FFFFFF" width="10%"></td> <td bgcolor="#FFFFFF" height="18" width="10%"></td> <td bgcolor="#FFFFFF" width="10%"></td> <td bgcolor="#FFFFFF" width="10%"></td> <td bgcolor="#FFFFFF" width="10%"></td> <td bgcolor="#FFFFFF" width="10%"></td> </tr> </table></tr> </table> </div> <script language="JavaScript"> if (document.all) { document.writeln("</div>"); } else if (document.layers) { document.writeln("</layer>"); } else {/*NOP*/} </script> <!-- PopUp END --> </body> </html>
11 juin 2008 à 17:12
une alternative pourrait être ce bout de code:
http://www.javascriptfr.com/codes/PROGRESS-BAR-WIDGET_45586.aspx
Cordialement.
16 mai 2006 à 02:24
if (document.all)
par
if (document.all || document.getElementById)
comme ça c'est compatible avec Firefox... .. .
@ tchaOo°
7 janv. 2005 à 18:41
quand on quitte, le script demmande "Voulez-vous sauver avant de quitter?" APRES que la page ce soit fermée !
2 nov. 2004 à 14:19
29 oct. 2004 à 17:19
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.