bizarre, IE bug dans une fonction [Résolu]

[ypomes]

Bonjour,

J'ai un soucis avec un script sur Internet Explorer 8.
Je suis sur windows 7 64bits.

Le script est assez simple et permet à un <div>, qui part d'une hauteur de 0px, de grandir jusqu'à 500px de haut. Il y a 4 liens en bas de la <div>, qui permettent de faire remonter le <div> jusqu'à 0px, puis de le faire redescendre en affichant un autre contenu correspondant au lien cliqué.

Le script fonctionne très bien sur Firefox, Chrome et Safari. Le rapport d'erreur d'Internet Explorer dit "l'argument n'est pas valide".

Pour les courageux, voici le code JS commenté :

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
 
var HeightStart = 0; /* initialise la hauteur de la <div> à 0 */
var HeightPX; /* initialise la variable HeightPX sans valeur pour l'instant */
var passage_bas = 0; /* compe le nombre de lecture de la fonction upAndDown('', 'verslebas') */
 
setTimeout('upAndDown("contenu1", "verslebas")', 40); /* déclenche la fonction upAndDown avec comme 1er argument l'ID du premier contenu à afficher par défaut et comme 2e argument l'instuction d'augmenter la hauteur du <div> */
 
function upAndDown(content, upOrDown)/* "content" sera donc l'ID du contenu à afficher selon le lien cliqué et "upOrDown" sera pour savoir si on augmente ou réduit la hauteur du <div> */
{
 
	if(upOrDown == "verslebas")/* on haugmente la hauteur */
	{
		if(HeightStart <= 200)/* vérifie que la hauteur est bien inférieure à la hauteur voulue */
		{
			passage_bas++; /* incrémente le nombre de lecture de la fonciton */
			if(passage_bas == 1)/* à la 1ere lecture, affiche le bon contenu (ils sont tous en display:none; par défaut) */
			{
				document.getElementById(content).style.display = 'block';
			}
 
			HeightPX = HeightStart+'px'; /* ajoute "px" à la hauteur actuelle */
			document.getElementById('main').style.height = HeightPX; /* change le style du <div> (qui s'appel "main") en lui affectant la hauteur atteinte à chaque lecture. */
			HeightStart += 20; /* augmente la hauteur de la variable pour qu'elle soit affectée au style du <div> au prochain passage */
			setTimeout(function(){upAndDown(content, upOrDown);}, 50); /* attend 50 Millisecondes avant de relancer la fonction avec les mêmes arguments jusqu'à ce que la hauteur de 200px soit atteinte. */
		}
		else{passage_bas = 0;HeightStart -= 20;}/* réinitialise le compteur de passage pour la prochaine utilisation et réajuste la hauteur car la fonction est finie et ne va pas se relancer automatiquement */
	}
	else if(upOrDown == "verslehaut")/* on baisse la hauteur */
	{
		if(HeightStart >= 0)/* vérifie que la hauteur est supérieure à 0. */
		{					
			HeightPX = HeightStart+'px';/* ajoute "px" */
			document.getElementById('main').style.height = HeightPX;/* change le style du <div> */
			HeightStart -= 20; /* baisse la hauteur */
			setTimeout(function(){upAndDown(content, upOrDown);}, 50); /* relance la fonction avec les mêmes arguments jusqu'à ce que la hauteur soit de 0px. */
		}
		else
		{
			passage_haut = 0; /* réinitialise le compteur de passage */
			for(nbContent=1;nbContent<=4;nbContent++)/* la hauteur est de 0px donc on peut masquer tous les contenus (le <div> est en overflow:hidden; donc pas besoin de les masquer plus tôt. */
			{document.getElementById('contenu'+nbContent).style.display = 'none';}
			upAndDown(content, "verslebas");/* la fonction est finie, le <div> est à 0px, on lance la fonction pour le faire redéscendre en gardant l'ID du nouveau contenu à afficher. */
		}
	}
	else{}
}

et le code html :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="main">
    <div id="contenu1">CONTENU 1</div>
    <div id="contenu2">CONTENU 2</div>
    <div id="contenu3">CONTENU 3</div>
    <div id="contenu4">CONTENU 4</div>
</div>
 
<a href="#" onclick="upAndDown('contenu1', 'verslehaut');">lien contenu 1</a> 
<a href="#" onclick="upAndDown('contenu2', 'verslehaut');">lien contenu 2</a> 
<a href="#" onclick="upAndDown('contenu3', 'verslehaut');">lien contenu 3</a> 
<a href="#" onclick="upAndDown('contenu4', 'verslehaut');">lien contenu 4</a>

Enfin voici les étapes pour reproduire le bug :
. attendre que le <div> s'ouvre une première fois entièrement
. cliquer sur le lien du contenu 2, 3 ou 4
. le <div> se referme et là le bug se produit sur IE indiquant la ligne 21

Voilà tout est dit. C'est peut-être tout bête mais je ne trouve pas. J'ai retourné la chose dans tous les sens et rien n'y fait. Je vous supplie donc de m'aider

Merci

[NoSmoking]

Bonsoir, ajoutes

Code :

if( HeightStart < 0) HeightStart =0;

juste avant

Code :

HeightPX = HeightStart+'px'; /* ajoute "px" à la hauteur actuelle */

[ypomes]

C'est magnifique merci beaucoup.

Si ce n'est pas trop demander et pour ne pas mourir idiot, comment t'y es tu pris pour résoudre ceci aussi vite ?

[ypomes]

ok je viens de réaliser.

En mettant <= 0, HeightStart devient négatif. à la fin de la fonction.
Ensuite HeightPX doit être l'argument jugé invalide par IE.

Je m'en veux un peu en ayant pas vu que ça serait négatif mais bon c'est le métier qui rentre ^^

Merci encore.

[dukej]

en fait IE n'aime pas qu'on lui definisse une hauteur ou largeur négative.
Physiquement parlant une hauteur ou largeur négative ça n'existe pas.

[NoSmoking]

Si ce n'est pas trop demander et pour ne pas mourir idiot, comment t'y es tu pris pour résoudre ceci aussi vite ?

du travail et encore du travail, de longues années, de préférence les bissextiles, d'expérience.
NON plus sérieusement, c'est une chose récurrente que les tests aux bornes soient mal appréhendés, et avec un peu d'habitude et une bonne dose de chance...