Barre de progression

**Alban 56** · 11/11/2008, 09h14

Bonjour,
J'ai commencé à bricoler une barre de progression, mais maintenant je voudrais y intégrer le pourcentage d'avancement et je cale. Quelqu'un aurait-il une idée ?
D'avance merci.

http://huskyland.chez-alice.fr/crbst_110.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	#Cadre{
	position:absolute;
	left:6px;
	top:46px;
	width:500px;
	height:50px;
	border:5px navy solid;
	background-color:#ffffff;
	}
	#Progress{
	position:absolute;
	left:10px;
	top:50px;
	width:0px;
	height:50px;
	background-color:#999999;
	border-left:1px navy solid;
	border-bottom:1px navy solid;
	border-top:1px navy solid;
	}
</style>
 
<script type="text/javascript">
 
var incremProgress = 5;
var progressWith=0;
var urlRedirect = "http://huskyland.chez-alice.fr/";
 
function startProgress()
{
	progressWith = progressWith + incremProgress;
	if( progressWith  < 500)
		document.getElementById("Progress").style.width = progressWith + "px";
	else
	{
		document.getElementById("Progress").style.width = "500px";
		window.location = urlRedirect;
	}
}
 
setInterval("startProgress()",50);
</script>
 
<title>Progress Barre</title>
 
</head>
 
<body>
 
<script type="text/javascript">
document.write("Vous allez être redirigé dans un instant vers cette url : " + urlRedirect)
</script>
 
	<div id="Cadre"></div>
	<div id="Progress" ></div>
 
</body>
</html>

**HiRoN** · 11/11/2008, 16h38

Salut,

L'affichage de la progression devant se faire côté client, j'aurais plutôt posté dans le forum Javascript.
Pour le placement du texte, je regarderai du côté de la propriété z-index que j'appliquerai sur un div contenant le pourcentage de la progression.

**Alban 56** · 14/11/2008, 23h24

Envoyé par HiRoN

Salut,

L'affichage de la progression devant se faire côté client, j'aurais plutôt posté dans le forum Javascript.
Pour le placement du texte, je regarderai du côté de la propriété z-index que j'appliquerai sur un div contenant le pourcentage de la progression.

Merci pour cette réponse, mais z-index et div pour moi c'est de l'hébreu, si je pouvais avoir une explication plus à ma portée ce serait sympa.
Merci

**HiRoN** · 15/11/2008, 14h57

Envoyé par Alban 56

Merci pour cette réponse, mais z-index et div pour moi c'est de l'hébreu, si je pouvais avoir une explication plus à ma portée ce serait sympa.
Merci

Ce lien te donnera une petite explication sur z-index (superposition de 2 éléments).

Donc, tu pourrais regarder pour superposer l'avancement de la progression à la barre de progression.

Que veux tu dire par :

mais maintenant je voudrais y intégrer le pourcentage d'avancement

Le pourcentage est-il déjà fonctionnel et il reste plus qu'a le positionner correctement ou dois-tu le développer ?

**Alban 56** · 15/11/2008, 20h39

Non le pourcentage n'est pas développé, et je ne sais pas comment m'y prendre.

**HiRoN** · 16/11/2008, 16h16

Envoyé par Alban 56

Non le pourcentage n'est pas développé, et je ne sais pas comment m'y prendre.

En tout cas, tu n'es pas dans la bonne section du forum pour avoir de bonnes informations à ce sujet (comme dis précédemment, je regarderai côté Javascript).

Les forums (x)HTML / CSS ne pourront d'aider que sur le placement / positionnement / mise en forme du texte donnant le pourcentage d'avancement.

**Alban 56** · 17/11/2008, 20h24

Envoyé par HiRoN

En tout cas, tu n'es pas dans la bonne section du forum pour avoir de bonnes informations à ce sujet (comme dis précédemment, je regarderai côté Javascript).

Les forums (x)HTML / CSS ne pourront d'aider que sur le placement / positionnement / mise en forme du texte donnant le pourcentage d'avancement.

Et bien ce serait déjà un premier pas.

**Sub0** · 18/11/2008, 19h45

Salut!

Puisque ta barre de progression est incrémentée par un timer, pourquoi ne pas utiliser une animation GIF ou SWF ?
La plupart des sites utilisent une animation en boucle plutôt qu'un pourcentage...

Peut-être veux-tu programmer une action lorsque ton anim affiche 100% ?

**Alban 56** · 21/11/2008, 08h06

Bonjour et merci pour la réponse,
Oui je voudrais déclencher l'ouverture de la page d'accueil de mon site, une fois que tous les éléments qui la composent seront affichés.

**Sub0** · 21/11/2008, 08h37

Envoyé par Alban 56

Bonjour et merci pour la réponse,
Oui je voudrais déclencher l'ouverture de la page d'accueil de mon site, une fois que tous les éléments qui la composent seront affichés.

Dans ce cas, ce n'est pas un timer qu'il faut utiliser, sinon comment peux-tu prévoir le temps de chargement de la page ? En réalité, pour bien faire, il faudrait que tu saches combien de ko tu as envoyé au client pour connaître et afficher le % de données téléchargées... Si tu utilises un timer, autant le faire avec l'animation d'une progression approximative...

**Bisûnûrs** · 21/11/2008, 08h43

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<body onload="document.getElement('chargement').style.display='none';document.getElement('site').style.display='block'">
 
<div id="chargement"><p>Texte de chargement</p></div>
 
<div id="site" style="display:none">
   <!-- Ici tout ton site -->
</div>

**Sub0** · 21/11/2008, 08h49

J'ai peut-être une idée :
- Lancer un timer Javascript au départ de la page
- Dans cette page, mettre quelques div avec un id incrémenté, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="pr1"></div>
...
<div id="pr2"></div>
...
<div id="pr3"></div>

- Dans la fonction Javascript, tester avec une boucle si les div existent
et positionner la progression en fonction du div avec le plus grand id trouvé...
Exemple :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var progress=0;
var maxdiv=3;
 
function Progression(){
  for(x=1;x<=maxdiv;x++){
    if(document.getElementById('pr'+x)){
      if(x>progress){
        progress=x;
        // Mise à jour de la progression ici
        ...
        if(progress==maxdiv){
          // Fin du chargement + Action
          ...
          return;
        }
      }
    }
  }
  setTimeout("Progression()",500);
}
 
Progression();

Si tu mets 10 divs, ta progression sera de 10% à chaque div...

**GihefBey** · 22/11/2008, 00h26

Bonjour,

N'ayant rien trouvé sur de site, on pourrait te proposer de peut-être t'inspirer des exemples offerts dans cet autre site dynamicdrive déjà ancien.

Un exemple avec le texte de la progression.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
// 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['perdone']:document.getElementById('perdone');
clipid(perdone,0,0,barheight-2,0);
if(ns4)perouter.visibility="show";
else perouter.style.visibility="visible";
}
 
function hidebar(){
action();
//(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;
}
 
progressBarInit();
 
window.onresize=function(){
if(ns4)setTimeout('history.go(0)' ,400);
}

N'aurais-tu pas plus de réponses dans le forum Javascript ?

-

**Alban 56** · 22/11/2008, 20h32

Merci à tous pour vos réponses,
Je vais me plonger dedans, mais il va déjà que je comprenne comme ça fonctionne, là je ne suis pas arrivé. Je vous ferai part de mes progrès.

Barre de progression

JavaScript

Discussions similaires

Partager

Partager