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