comment faire une barre d'évaluation ?

Version imprimable

20/04/2007, 11h05
jey182

comment faire une barre d'évaluation ?

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 :mrgreen:
20/04/2007, 14h19
jey182

personne pour m'aider ? :roll:
20/04/2007, 14h20
SpaceFrog

joue sur le border-left-width d'un div de 100px de large ..
20/04/2007, 14h23
jey182

étant débutant en javascript tu n'aurait pas un code plus complet ?:roll:

en plus si tu mets le border en outset ça fait un joli effet bicolore ...
Code:

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 ...

pour IE et FFX ...

Code:

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>

20/04/2007, 14h48
jey182

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...

Code:

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

20/04/2007, 15h10
jey182

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 ?

Code:

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]