javascript et compatibilité sous firefox3

**mc_toma** · 30/12/2008, 09h34

Bonjour a tous!

j'ai un code js qui fonctionne correctement sous IE 5+ mais qui fait des siennes sous FF 3. J'ai remarqué que le problème était directement lié au DOCTYPE puisque lorsque je le retire... plus de probleme...

J'aimerais donc que vous m'aidiez svp à trouver mon erreur. (je n'ai pas trouvé tout seul!)

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
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
<head>
</head>
 
 
<html>
			<div id="titrediv_482">		
				<div style="float:left; width:250px;"><b>. MON AGENDA</b></div>
				<a href="#" onclick="affiche_cache();return false">
				<div id="interro"><img src="styles/prosilver/imageset/icon_help.gif" /></div>
				<div id="reduction" style="display:none;"><img src="styles/prosilver/imageset/reduction.gif" /></div>
				</a>
				<div id="information" style="clear:both; display: none; color:#1F1F1F">
					<div style="width:50px; height:20px; float: left; clear:both; margin:3px;">
					<img src="styles/prosilver/imageset/info.gif" alt="">
					</div>
					<div style="width:405px; float: left; text-align:justify">
					Je retrouve dans <i>mon agenda</i> toute ma richesse: mon argent disponible, mon épagne, 
					mes actions, mes emprunts bancaires ect... 
					</div>
				</div>
			</div>
 
 
			<script type="text/javascript">
function affiche_cache()
	{
		if (interro.style.display == "none")
			{
				var hFinal      =     12;  //Hauteur finale du div "titrediv_482" (la hauteur une fois que ça aura fini de déplier !)
				var hActuel     =     96;	//Hauteur initiale du div "titrediv_482" (la hauteur dès le début !)
				var hFinalle    =     371;  //Hauteur finale du div "gauche_contenu" (la hauteur une fois que ça aura fini de déplier !)
				var hActuelle   =     287;	//Hauteur initiale du div "gauche_contenu" (la hauteur dès le début !)
				var timer;
				var fct =        function ()
					{
						hActuel  -=       12;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
						hActuelle  +=       12;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
						titrediv_482.style.height     =	 hActuel      +     'px';
						gauche_contenu.style.height     =	 hActuelle      +     'px';
						if( hActuel == hFinal)
							{
								clearInterval(timer);   //Arrête le timer
								interro.style.display = ""; // Affiche le div interro
								reduction.style.display = "none"; // cache le div reduction
							}
					};
				information.style.display = "none";  // Cache le div "information"
				fct(); // éxécute la fonction fct
				timer = setInterval(fct,24);    //Toute les 40 ms
			}
 
		else
			{
				var hFinal      =     96;  //Hauteur finale du div "titrediv_482" (la hauteur une fois que ça aura fini de déplier !)
				var hActuel     =     12;	//Hauteur initiale du div "titrediv_482" (la hauteur dès le début !)
				var hFinalle    =     275;  //Hauteur finale du div "gauche_contenu" (la hauteur une fois que ça aura fini de déplier !)
				var hActuelle   =     371;	//Hauteur initiale du div "gauche_contenu" (la hauteur dès le début !)
				var timer;
				var fct =        function ()
					{
						hActuel  +=       12;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
						hActuelle  -=       12;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
						titrediv_482.style.height     =	 hActuel      +     'px';
						gauche_contenu.style.height     =	 hActuelle      +     'px';
						if( hActuel == hFinal)
							{
								clearInterval(timer);   //Arrête le timer
								information.style.display = "";  // Affiche le div information
								interro.style.display = "none"; // Cache le div interro
								reduction.style.display = ""; // Affiche le div reduction
							}
					};
				fct();
				timer = setInterval(fct,24);    //Toute les 40 ms
			}
	}
			</script>
 
</html>

Merci d'avance à tous ceux qui se pencheront sur ce problème!

Bonne journée à tous!

**javatwister** · 30/12/2008, 10h53

message d'erreur?

ça veut dire quoi "un code qui fait des siennes"?

**mc_toma** · 30/12/2008, 11h03

Envoyé par javatwister

message d'erreur?

ça veut dire quoi "un code qui fait des siennes"?

pas de message d'erreur

seulement l'action demandée refuse de se lancer.

Il s'agit d'un "onclick" qui fait apparaitre un div. Seulement, pour des raisons esthétiques, il y a comme un rideau qui se baisse avant de montrer le div en question.

Or, ici rien ne se lance sous firefox quand je clique sur le bouton alors que tout fonctionne sous ie.

S'il vous est utile de voir l'application, rdv sur http://www.???.fr
vous pouvez emprunter les identifiants suivants :
Pseudo : demo
Mot de passe : 0000
Le bouton dont je parle est le point d'interrogation situé au milieu de la page en haut. (je vous invite à tester sous ie puis sous firefox)

**javatwister** · 30/12/2008, 11h08

c'est quoi cette horrible chose?

Code :

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

<a href="javascript:;" onclick="affCache('information');">

Fox est déjà vachement sympa s'il comprend ça sans doctype!

**Bovino** · 30/12/2008, 11h09

interro is not defined
http://www.bestbusiness.fr/mon_bureau.php
Line 119

C'est pas une erreur ça ?

**javatwister** · 30/12/2008, 11h14

ah oui, c'est joli aussi ça! je me souviens d'avoir codé comme ça sous IE, à l'époque de NS4.7

**mc_toma** · 30/12/2008, 11h54

Envoyé par javatwister

c'est quoi cette horrible chose?

Code :

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

<a href="javascript:;" onclick="affCache('information');">

Fox est déjà vachement sympa s'il comprend ça sans doctype!

je dois supprimer définitivement le href? c'est ca qui est horrible?
parce que je viens de regarder quelques sources et je retrouve plusieurs fois ce type d'appel de fonction...

**Bovino** · 30/12/2008, 12h29

Code :

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

<a href="#" onclick="affCache('information');return false">

est plus "propre".

**mc_toma** · 30/12/2008, 12h33

Envoyé par Bovino

Code :

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

<a href="#" onclick="affCache('information');return false">

est plus "propre".

merci.
Est ce problématique si je supprime définitivement le href?

**Bovino** · 30/12/2008, 12h34

Oui car tu perdras les comportements habituels des ancres (survol, curseur etc)

**mc_toma** · 30/12/2008, 12h39

alors oila j'ai modifier le code pour qu'il soit plus propre et plus compréhensible.
(j'ai mis le script apres que les variables aient été déclarés dans le html. J'ai aussi aérer le code)
Cependant, j'ai toujours le meme probleme. Or, ni FF ni IE ne me détecte d'erreur... Ca fonctrionne toujours sous IE mais pas sous firefox...

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
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
			<div id="titrediv_482">		
				<div style="float:left; width:250px;"><b>. MON AGENDA</b></div>
				<a href="#" onclick="affiche_cache();return false">
				<div id="interro"><img src="styles/prosilver/imageset/icon_help.gif" /></div>
				<div id="reduction" style="display:none;"><img src="styles/prosilver/imageset/reduction.gif" /></div>
				</a>
				<div id="information" style="clear:both; display: none; color:#1F1F1F">
					<div style="width:50px; height:20px; float: left; clear:both; margin:3px;">
					<img src="styles/prosilver/imageset/info.gif" alt="">
					</div>
					<div style="width:405px; float: left; text-align:justify">
					Je retrouve dans <i>mon agenda</i> toute ma richesse: mon argent disponible, mon épagne, 
					mes actions, mes emprunts bancaires ect... 
					</div>
				</div>
			</div>
 
 
			<script type="text/javascript">
function affiche_cache()
	{
		if (interro.style.display == "none")
			{
				var hFinal      =     12;  //Hauteur finale du div "titrediv_482" (la hauteur une fois que ça aura fini de déplier !)
				var hActuel     =     96;	//Hauteur initiale du div "titrediv_482" (la hauteur dès le début !)
				var hFinalle    =     371;  //Hauteur finale du div "gauche_contenu" (la hauteur une fois que ça aura fini de déplier !)
				var hActuelle   =     287;	//Hauteur initiale du div "gauche_contenu" (la hauteur dès le début !)
				var timer;
				var fct =        function ()
					{
						hActuel  -=       12;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
						hActuelle  +=       12;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
						titrediv_482.style.height     =	 hActuel      +     'px';
						gauche_contenu.style.height     =	 hActuelle      +     'px';
						if( hActuel == hFinal)
							{
								clearInterval(timer);   //Arrête le timer
								interro.style.display = ""; // Affiche le div interro
								reduction.style.display = "none"; // cache le div reduction
							}
					};
				information.style.display = "none";  // Cache le div "information"
				fct(); // éxécute la fonction fct
				timer = setInterval(fct,24);    //Toute les 40 ms
			}
 
		else
			{
				var hFinal      =     96;  //Hauteur finale du div "titrediv_482" (la hauteur une fois que ça aura fini de déplier !)
				var hActuel     =     12;	//Hauteur initiale du div "titrediv_482" (la hauteur dès le début !)
				var hFinalle    =     275;  //Hauteur finale du div "gauche_contenu" (la hauteur une fois que ça aura fini de déplier !)
				var hActuelle   =     371;	//Hauteur initiale du div "gauche_contenu" (la hauteur dès le début !)
				var timer;
				var fct =        function ()
					{
						hActuel  +=       12;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
						hActuelle  -=       12;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
						titrediv_482.style.height     =	 hActuel      +     'px';
						gauche_contenu.style.height     =	 hActuelle      +     'px';
						if( hActuel == hFinal)
							{
								clearInterval(timer);   //Arrête le timer
								information.style.display = "";  // Affiche le div information
								interro.style.display = "none"; // Cache le div interro
								reduction.style.display = ""; // Affiche le div reduction
							}
					};
				fct();
				timer = setInterval(fct,24);    //Toute les 40 ms
			}
	}
			</script>

**mc_toma** · 30/12/2008, 12h40

Envoyé par Bovino

Oui car tu perdras les comportements habituels des ancres (survol, curseur etc)

justement, je les ai remplacé grace au css... est ce toujours problematique?

**Bovino** · 30/12/2008, 12h57

Envoyé par mc_toma

justement, je les ai remplacé grace au css... est ce toujours problematique?

Ca peut l'être pour les pseudo-classes (:hover...) qui ne sont reconnues par IE6 que pour les liens ayant un attribut href si je ne m'abuse.

Cependant, j'ai toujours le meme probleme. Or, ni FF ni IE ne me détecte d'erreur... Ca fonctrionne toujours sous IE mais pas sous firefox...

Pour ma part, j'ai une erreur avec FF2 (voir message plus haut) dû au fait que

j'ai mis le script apres que les variables aient été déclarés dans le html.

Tu confonds les variables JavaScript et les éléments HTML. Donc, interro et information n'existent pas pour FF.

**mc_toma** · 30/12/2008, 13h24

MERCI Bovino pour ta gentilesse !

j'ai enfin réussi grace à ton dernier conseil ... "je confonds"

En fait, je savais mais j'avais envie de placer mon code à un endroit précis et j'ai fait un blocage intellectuel. Donc, le div n'était pas fermé et je ne précisais pas à chaque fois

Code :

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

document.getElementById('

javascript et compatibilité sous firefox3

JavaScript

Discussions similaires

Partager

Partager