remonter un DIV progressivement.

Version imprimable

Bonjour à tous, voilà j'ai réussie à faire un script en JS qui me permet d'afficher un DIV progressivement sur la hauteur en cliquant sur un lien... Cependant je n'arrive pas à le remonter en faisant un nouveau script...

Mon code HTML :

Code:

1
2
3
4
5
6
7
8
9
10
 
<a onclick="progressif()">Ajouter un commentaire</a><a onclick="remonter()"> remonter</a>
<div class="ajoutcom">
<form method="post" name="form1" onSubmit="return verrif();">
Nom utilisateur : <input type="text" name="test" /><br>
mot de passe : <input type="password" name="test2" /><br>
<div id="err">Erreur de saisie...</div><br>
<input type="submit" value="Saveeee"/>
</form>
</div>

Mon code JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var z = 0;
function progressif(){
	var mydiv = document.getElementsByClassName('ajoutcom')[0];
	if(mydiv.style.height != '200px'){
		mydiv.style.height = z + 'px';        
		z += 10;
		setTimeout('progressif()', 30);
	}
}
 
var x = 0;
function remonter(){
	var lediv = document.getElementsByClassName('ajoutcom')[0];
	if(lediv.style.height != '0px' ){
		lediv.style.height = lediv.style.height - x + 'px' ;
		x += 10;
		setTimeout('remonter()', 30);
	}
}

Citation:
Envoyé par tonymx15
Bonjour à tous, voilà j'ai réussie à faire un script en JS qui me permet d'afficher un DIV progressivement sur la hauteur en cliquant sur un lien... Cependant je n'arrive pas à le remonter en faisant un nouveau script...

Mon code HTML :
Code:

1 2 3 4 5 6 7 8 9 10 <a onclick="progressif()">Ajouter un commentaire</a><a onclick="remonter()"> remonter</a> <div class="ajoutcom"> <form method="post" name="form1" onSubmit="return verrif();"> Nom utilisateur : <input type="text" name="test" /><br> mot de passe : <input type="password" name="test2" /><br> <div id="err">Erreur de saisie...</div><br> <input type="submit" value="Saveeee"/> </form> </div>
Mon code JS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var z = 0; function progressif(){ var mydiv = document.getElementsByClassName('ajoutcom')[0]; if(mydiv.style.height != '200px'){ mydiv.style.height = z + 'px'; z += 10; setTimeout('progressif()', 30); } } var x = 0; function remonter(){ var lediv = document.getElementsByClassName('ajoutcom')[0]; if(lediv.style.height != '0px' ){ lediv.style.height = lediv.style.height - x + 'px' ; x += 10; setTimeout('remonter()', 30); } }
Bonjour,

Il y a un bien différence entre tes 2 codes qui fait que le second ne fonctionne pas ;)

'200px' n'est pas un nombre

devyan

14/06/2010, 12h49
tonymx15

Ah oui je vois par contre comment je fais pour enlever "px" de la hauteur ? Et transformer en int le tous...
14/06/2010, 13h04
devyan

Si comme le laisse penser ton code la hauteur de 200px est fixe, tu peux simplement initialiser x ( var x=200; )

Sinon utilises la fonction parseInt() ( ... = parseInt(lediv.style.height, 10) ... )

devyan
14/06/2010, 13h11
tonymx15

Ok, merci je vais essayer cette après-midi et je te dirais si ça a marché...

Alors ça marche j'arrive a descendre et remonter le DIV progressivement, par contre si je veux le redescendre pour le remonter une deuxième fois ça plante, le DIV agrandie infiniment en hauteur...

En gros il faut que j'actualise la page pour que ça marche...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var z = 0; function progressif(){ var mydiv = document.getElementsByClassName('ajoutcom')[0]; if(mydiv.style.height != '150px'){ mydiv.style.height = z + 'px'; z += 10; setTimeout('progressif()', 30); } } var x = 0; var h = 150; function remonter(){ var lediv = document.getElementsByClassName('ajoutcom')[0]; if(lediv.style.height != '0px' ){ lediv.style.height = h - x + 'px' ; x += 10; setTimeout('remonter()', 30); } }