comment faire une barre d'�valuation ?

**jey182** · 20/04/2007, 11h05

Bonjour j'aimerais savoir si il est possible de faire une barre d'�valuation et si oui comment en javascript.

Explication :
- je dois faire une barre qui �value le stress de 0 a 100.
- sur cette barre il doit y avoir une sorte de "curseur" que l'on d�place sur la barre enter 0 et 100
- il faudrait un champs text qui affiche la valeur ou se trouve le "curseur" (entre 0 et 100 donc)

Voila merci pour votre aide

**jey182** · 20/04/2007, 14h19

personne pour m'aider ?

**SpaceFrog** · 20/04/2007, 14h20

joue sur le border-left-width d'un div de 100px de large ..

**jey182** · 20/04/2007, 14h23

�tant d�butant en javascript tu n'aurait pas un code plus complet ?

**SpaceFrog** · 20/04/2007, 14h28

en plus si tu mets le border en outset �a fait un joli effet bicolore ...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
<div id='stressmetre' style="border:2px outset red; width:200px;"></div>
<input type='text' id='saisie' />
<input type='button' onclick="var stress=document.getElementById('saisie').value; if(!isNaN(stress) && stress>0 && stress<=100){document.getElementById('stressmetre').style.borderLeftWidth=stress*2+'px'};" />

sous IE uniquement pour des raisons de boxtype ...
sous firefox il faut reduire d'autant la largeur du div ...

**SpaceFrog** · 20/04/2007, 14h47

pour IE et FFX ...

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
<script type='text/javascript'>
 
function Vumetre(pourcent){
 
if(isNaN(pourcent) || (pourcent<=0 || pourcent>100)){alert('mauvaise saisie');
															return false;
															}
      document.getElementById('stressmetre').style.borderLeftWidth=pourcent*2+'px';
 
if (!document.all){document.getElementById('stressmetre').style.width=202-(pourcent*2)+'px';}
}
</script>
 
 
 
</head>
 
<body>
 
 
<div id='stressmetre' style="border:2px outset red; width:200px;height:20px;"></div>
<input type='text' id='saisie' />
<input type='button' onclick="Vumetre(document.getElementById('saisie').value);" />
</body>

**jey182** · 20/04/2007, 14h48

merci pour ton aide, mais en fait il faudrait une barre fixe de 100px par exemple et sur cette barre on peut bouger un "curseur" horizontalement sur toute la longueur de la barre...Je sais pas si je suis tr�s clair...

**SpaceFrog** · 20/04/2007, 14h55

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
<title>Nouvelle page 1</title>
<style> 
			.Scroll{ 
				FONT-SIZE: 1px; 
				OVERFLOW-X: scroll; 
				WIDTH: 100px; 
				HEIGHT: 0px;
			} 
		</style> 
 
<script type='text/javascript'>
 
function Vumetre(pourcent){
 
if(isNaN(pourcent) || (pourcent<=0 || pourcent>100)){return false;
															}
      document.getElementById('stressmetre').style.borderLeftWidth=pourcent*2+'px';
 
if (!document.all){document.getElementById('stressmetre').style.width=202-(pourcent*2)+'px';}
}
</script>
 
 
 
</head>
 
<body>
 
 
<div id='stressmetre' style="border:solid 2px red; width:200px;height:20px;"></div>
<input type='text' id='saisie' />
<div class="Scroll" onscroll="Vumetre(this.scrollLeft)"><div style="WIDTH:200px"></div>
</div>
 
</body>
 
</html>

arf encore une fois sous IE seulement

**jey182** · 20/04/2007, 15h10

merci �a ressemble beaucoup a ce que je veux faire...mais en effet �a ne marche que sous IE

Y a t-il moyen d'afficher un nombre entre 0 et 100 en fonction de la ou se trouve la barre ?

**SpaceFrog** · 20/04/2007, 15h15

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style> 
			.Scroll{ 
				lineHeight:10px;
				FONT-SIZE: 1px; 
				OVERFLOW-X: scroll; 
				WIDTH: 100px; 
				HEIGHT: 0px;
			} 
		</style> 
 
<script type='text/javascript'>
// IE only because on scrollablediv 
function Vumetre(pourcent){
 
pourcent=(pourcent/700*100	)	
if(pourcent<-0 || pourcent>100){return false;}
pourcent=Math.ceil(pourcent)															
document.getElementById('stressmetre').style.borderLeftWidth=(pourcent==0)?'2px':pourcent+'px';
if (!document.all){document.getElementById('stressmetre').style.width=102-(pourcent)+'px';}
document.getElementById('lettre').innerHTML=pourcent+ "%";
}
</script>
 
 
 
</head>
 
<body>
<div id='lettre'></div>
<div id='stressmetre' style="border:solid 2px red; width:100px;height:20px;"></div>
<div class="Scroll" onscroll="Vumetre(this.scrollLeft)"><div style="width:800px;height:10px;">&nbsp;</div>
</div>
 
</body>
 
</html>

parcontre je ne sasi pas trop pourquoi il bloque entre 3 et 6% sur le retour ?

[edit]bidouill� pour resoudre �a ...[/edit]

comment faire une barre d'�valuation ?

JavaScript

Discussions similaires

Partager

Partager