Optimisation menu déroulant

Version imprimable

Bonjour à tous,

je suis stagiaire dans une start-up et j'ai pour objectif actuel de faire un site vitrine. On m'a demandé de faire un texte qui se déroule petit à petit. Pas de problèmes jusque là, ça fonctionne. Néanmoins j'ai remarqué un bug, qui me semble logique étant donné que je n'en prends pas compte dans mon code. Lorsque je clique sur le bouton qui appelle la fonction JavaScript, le texte se déroule. Mais si j'appuie une seconde fois dessus pendant que le texte est en train de se dérouler, la page web se met à clignoter. J'utilise un timer, donc la fonction qui est rappelée ne doit pas comprendre si le texte est déroulé ou non, d'où le fait qu'elle bug.
J'ai essayé d'utiliser une variable globale afin de dire à la fonction si mon texte était en mode "déroulage" ou "remontage", mais cela n'a pas fonctionné. Voici mon code :

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
42
43
44
45
46
			<script type="text/javascript" language="javascript" >
				var finalHeight = 300; 
				var actualHeight = 0; 
				function Suite(myID)
					{
						var objet = document.getElementById(myID); //div i want to show
						if (objet.style.display == "none" || !objet.style.display)
							{
								objet.style.display = "block";
								objet.style.overflow = "hidden";
								var timer;
								var fct = function()
											{
												actualHeight += 5; //Increase the height to 5px every 40ms
												objet.style.height = actualHeight + 'px';
												if (actualHeight > finalHeight)
													{
														clearInterval(timer); 
														//objet.style.overflow = 'inherit';
														finalHeight = 0; 
														actualHeight = 300; 
													}
											}
								fct();
								timer = setInterval(fct, 40); //Every x ms
							}
						else if (objet.style.display == "block")
								{	
									var timer;
									var fct = function()
											{
												actualHeight -= 5; //Increase the height to -5px every 40ms
												objet.style.height = actualHeight + 'px';
												if (actualHeight == 0)
													{
														clearInterval(timer);
														//objet.style.overflow = 'inherit';
														objet.style.display = "none";
														finalHeight = 300; 
													}
											};
								fct();
								timer = setInterval(fct, 40); //Every x ms
								} 
					}
			</script>

Concernant le code xHTML, il s'agit simplement d'un div contenant un id avec pour CSS un attribut display définit sur "none".
Merci pour votre aide !

Bonjour,

Sinon, j'ai réorganisé un peu ta fonction, il faut donc ajuster je pense (pas eu le temps de tester) mais ça devrai améliorer quelques points selon moi :

- A ta ligne 7, tu devrais inverser la condition pour éviter une erreur si la propriété n'existe pas.
- Il faut créer des variables pour les objets / sous-objets que tu utilises plusieurs fois
- Crée une seule fonction avec la condition dedans plutôt que de la redéclarer dans la condition.
- Déclares toutes tes variables en premier pour éviter les erreurs (voir scope et hoisting si tu veux des détails)
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 <script type="text/javascript" language="javascript"> function Suite (myID) { var finalHeight = 300, actualHeight = 0, objet = document.getElementById(myID), //div i want to show fct = function () { var timer, s = objet.style; if (!s.display || s.display === "none") { s.display = "block"; s.overflow = "hidden"; actualHeight += 5; //Increase the height to 5px every 40ms if (actualHeight > finalHeight) { clearInterval(timer); //objet.style.overflow = 'inherit'; finalHeight = 0; actualHeight = 300; } s.height = actualHeight + 'px'; } else if (s.display === "block") { actualHeight -= 5; //Increase the height to -5px every 40ms if (actualHeight === 0) { clearInterval(timer); //objet.style.overflow = 'inherit'; s.display = "none"; finalHeight = 300; } s.height = actualHeight + 'px'; } timer = setInterval(fct, 40); //Every x ms }; fct(); } </script>
Bon courage. :)

13/09/2011, 16h00
_SanD_

Merci pour ta réponse.

J'ai testé et compris le fonctionnement de ton code mais il n'a pas eu l'effet escompté. Il fait planter Firefox ainsi que Google Chrome. J'ai essayé d'autres solutions mais je n'ai pas trouvé.

EDIT : je pense à essayer de désactiver le lien temporairement, pendant le déroulage/remontage.
13/09/2011, 19h13
NoSmoking

Bonsoir
remplaces les setInterval et les clearInterval par des setTimeout et clearTimeout
14/09/2011, 09h26
_SanD_

Citation:

Envoyé par NoSmoking

Bonsoir
remplaces les setInterval et les clearInterval par des setTimeout et clearTimeout

Bonjour,

j'ai effectué tes modifications. Le texte se déroule un tout petit peu puis se stoppe. Merci de m'avoir répondu.
14/09/2011, 18h29
NoSmoking
peux tu nous mettre ton code actuel, je me suit rendu compte que je me suis basé sur celui de le code MrPringle.

Dore et déjà il y a quelque chose qui foire, ce sont les tests dans la fonction.
```
SI objetCache ALORS
  afficheObjet();
SINON
  autreChose();
FIN SI
```
à ton avis une fois affiché sur quelle ligne atterri t-on la prochaine fois que l'on revient dans la fonction.