Discussion :

[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 :

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

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 :

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
 
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);
	}
}

[devyan]

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 :

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

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 :

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

[tonymx15]

Ah oui je vois par contre comment je fais pour enlever "px" de la hauteur ? Et transformer en int le tous...

[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

[tonymx15]

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

[tonymx15]

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 :

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
 
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);
	}
}