Discussion :

[rpgmax]

Bonsoir tout le monde,

voilà j'ai fait une jauge qu à partir d'une variable php possède un "width" différent (enfin c'est une jauge quoi ).

J'aimerais rendre la jauge plus dynamique en faisant en sorte que celle-ci commence avec un width de 0 et qui monte jusqu'à la valeur de ma variable pour ainsi avoir une progression (comme un remplissage) du style :

(attention c'est du texte ^^ et on va dire que ma variable vaut 4)

|
||
|||
||||


Comment gérer ca en javascript, j'ai chercher un peu partout mais je ne trouve pas, je ne pense pas que ce soit bien dur mais bon n'étant pas codeur javascript (on va dire juste quelques bases, en gros je saurais faire mais bon le code ne sera pas vraiment beau au final...)

Donc si vous avez une idée ou un bout de code simple (enfin pas trop lourd quoi) je suis preneur !

Merci à vous

[Swoög]

Salut

utilise setInterval ou setTimeout et l'attribut .style.width ou .width s'il existe (je crois que le second existe pour une image )

[luggerhouse]

Voila le code complet pour ce que tu veux faire... Tu peux te baser la dessus si ca te plait:

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
 
      <img id="myimage" src="images/pour_le_plaisir_de_cuisiner.jpg" width="150">
 
        <script>
                var maxwith=500;
                var myControl=document.getElementById('myimage');
                setTimeout("makeItBigger()",500);//0,5 secondes
                function makeItBigger(){
                        if (myControl.width < maxwith){
                                //alert('grossir');
                                myControl.width=myControl.width+50
                                setTimeout("makeItBigger()",500);
                        }else{
                                alert('Finished');
                        }
                }
 
        </script>

tu peux voir le resultat sur
http://www.recettes.genieciel.com/test5.php

LuggerHouse

[rpgmax]

Merci à vous deux, lugger je fais ca demain et te dis si c'est ok
Par contre la page test n'a rien à voir ou c'est moi ???

[luggerhouse]

Merci à vous deux, lugger je fais ca demain et te dis si c'est ok
Par contre la page test n'a rien à voir ou c'est moi ???

LOL Trop drole!!
Désolé, je l'avais effacé pour aider un autre usagé LOL

Maintenant c'est revenu!!

[rpgmax]

Dac merci je m'occupe de ca dans la journée

[rpgmax]

Ok niquel, vraiment bon rendu au final !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script>
var maxwith=<?php echo $percent; ?>;
var myControl=document.getElementById('jauge');
setTimeout("makeItBigger()",25);
 
function makeItBigger(){
	if (myControl.width < maxwith){
	myControl.width=myControl.width+1
	setTimeout("makeItBigger()",25);
	}
}
</script>

Merci beaucoup !