Progressbar en javascript - rafraichir l'affichage dans une boucle javascript
Soyez le premier à donner votre avis sur cette source.
Snippet vu 21 334 fois - Téléchargée 33 fois
Contenu du snippet
Je cherchais un moyen d'afficher une progress bar montrant l'état d'avancement d'une boucle, dans laquelle on préparait le 'Query String' à envoyer à une page PHP. On parcourt les champs du formulaire et on ne garde que ceux dont la valeur est supérieure à 0.
Il faudra faire quelques aménagements du code si on veut qu'il soit compatible NN4+. Si vous l'utilisez tel quel, il ne fonctionnera en effet qu'avec IE5+.
J'espère que ceci vous aura un peu aidé. Quand j'ai cherché comment faire ça sous Google, je n'ai rien trouvé.
Source / Exemple :
<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>
Conclusion :
Il faudra faire quelques aménagements du code si on veut qu'il soit compatible NN4+. Si vous l'utilisez tel quel, il ne fonctionnera en effet qu'avec IE5+.
J'espère que ceci vous aura un peu aidé. Quand j'ai cherché comment faire ça sous Google, je n'ai rien trouvé.
A voir également
- Javascript progress bar
- Progressbar js - Meilleures réponses
- Javascript loading bar - Meilleures réponses
- Javascript : Progress bar widget - CodeS SourceS - Guide
- Javascript : Progress bar - update(pourcentage) - CodeS SourceS - Guide
- Javascript : Precharger des images + barre de progression(progress bar) - CodeS SourceS - Guide
- Javascript : Plugin jquery : progress bar - CodeS SourceS - Guide
- Progress bar upload file javascript ✓ - Forum - PHP
- Messages postés
-
177
- Date d'inscription
- jeudi 5 octobre 2006
- Statut
- Membre
- Dernière intervention
- 16 janvier 2009
1une alternative pourrait être ce bout de code:
http://www.javascriptfr.com/codes/PROGRESS-BAR-WIDGET_45586.aspx
Cordialement.
if (document.all)
par
if (document.all || document.getElementById)
comme ça c'est compatible avec Firefox... .. .
@ tchaOo°
quand on quitte, le script demmande "Voulez-vous sauver avant de quitter?" APRES que la page ce soit fermée !
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.