Menu JavaScript IE

**whowho50** · 15/06/2010, 10h48

Bien le bonjour à tous en cette merveilleuse matinée !

Je developpe une application intranet pour l'entreprise ou je travail et j'utilise un Javascript pour mon menu seulement voila il fonctionne avec firefox, opera, safari, chrome SAUF avec internet explorer (comme de par hasard -_-).
Donc si quelqu'un serai si il y a un probléme ou une fonction incompatible dans mon code ce serai fort aimable !

Le code :

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
// menu en javascript
bgcolor='#FFFFFF'; 
bgcolor2='##00FFFF';
document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:15; left:99px ')
document.write('#topgauche { position:absolute;  z-index:10; }')
document.write('A:hover.ejsmenu {color:#FFFFFF; text-decoration:none;}')
document.write('.ejsmenu {color:#FFFFFF; text-decoration:none;}')
document.write('</style>')
document.write('<div style="position:relative;height:25"><DIV class=popper id=topdeck></DIV>');
zlien = new Array;
zlien[0] = new Array;
zlien[1] = new Array;
zlien[2] = new Array;
zlien[3] = new Array;
zlien[0][0] = '<A HREF="http://localhost/AjoutClient.php" CLASS=ejsmenu>Ajouter un Client</A>'; //Client/Ajouter
zlien[0][1] = '<A HREF="http://localhost/ModifClient.php" CLASS=ejsmenu>Modification d\'un Client</A>'; //Client/Modifier
zlien[0][2] = '<A HREF="http://localhost/SupClient.php" CLASS=ejsmenu>Suppression d\'un Client</A>'; //Client/Supprimez
zlien[0][3] = '<A HREF="http://localhost/ConsClient.php" CLASS=ejsmenu>Consulter Client</A>'; //Client/Consulter
zlien[1][0] = '<A HREF="http://localhost/AjoutAff.php" CLASS=ejsmenu>Ajout Affaire</A>'; //Affaire/Ajout
zlien[1][1] = '<A HREF="http://localhost/ModifAff.php" CLASS=ejsmenu>Modifier Affaire</A>'; //Affaire/Modifier
zlien[1][2] = '<A HREF="http://localhost/SupAff.php" CLASS=ejsmenu>Supression Affaire</A>'; //Affaire/Suppression
zlien[1][3] = '<A HREF="http://localhost/ConsAff.php" CLASS=ejsmenu>Consulter Affaire</A>'; //Affaire/Consulter
zlien[2][0] = '<A HREF="http://localhost/ResClient.php" CLASS=ejsmenu>Par Client</A>'; //Resultat/Par client
zlien[2][1] = '<A HREF="http://localhost/ChoixGraph.php" CLASS=ejsmenu>Résultat Global</A>'; //Resultat/Globale
zlien[2][2] = '<A HREF="http://localhost/ResAff.php" CLASS=ejsmenu>Résultat par Affaire</A>'; //Resultat/Affaire
zlien[2][3] = '<A HREF="http://localhost/Compteur.php" CLASS=ejsmenu>Compteur Formulaire</A>'; //Resultat/Compteur Formulaire
zlien[3][0] = '<A HREF="http://xx.xxx.xxx.xx/AncienClient.php" CLASS=ejsmenu>Envoi Mail</A>'; //Courriel/Envoi Mail
if(document.getElementById)
	{
	skn = document.getElementById("topdeck").style
	skn.left = 99;
	}
 
function pop(msg,pos)
{
skn.visibility = "hidden";
a=true
skn.top = pos;
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#0000FF WIDTH=150><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
pass = 0
while (pass < msg.length)
	{
	content += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=20><FONT SIZE=1 FACE=\"Arial\">&nbsp;&nbsp;"+msg[pass]+"</FONT></TD></TR>";
	pass++;
	}
content += "</TABLE></TD></TR></TABLE>";
document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";
}
function kill()
{
	if(document.getElementById)
		skn.visibility = "hidden";
}
document.onclick = kill;
if(document.getElementById)
	{
	document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#0000FF WIDTH=100 HEIGHT=80><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=80>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Client</FONT></TD></tr>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],20)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Affaire</FONT></TD></tr>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[2],40)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Résultat</FONT></TD></tr>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[3],60)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Courriel</FONT></TD></tr>')
	document.write('</TABLE></TD></TR></TABLE></DIV>')
	}
document.write('</div>');

Sur ce je remerci d'avance ce qui auront le courage de si blonger !
whowho50
P.s. Merci Andri.aime

**dukej** · 15/06/2010, 11h32

Envoyé par whowho50

Bien le bonjour à tous en cette merveilleuse matinée !

Je developpe une application intranet pour l'entreprise ou je travail et j'utilise un Javascript pour mon menu seulement voila il fonctionne avec firefox, opera, safari, chrome SAUF avec internet explorer (comme de par hasard -_-).
Donc si quelqu'un serai si il y a un probléme ou une fonction incompatible dans mon code ce serai fort aimable !

Le code :

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
// menu en javascript
bgcolor='#FFFFFF'; 
bgcolor2='##00FFFF';
document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:15; left:99px ')
document.write('#topgauche { position:absolute;  z-index:10; }')
document.write('A:hover.ejsmenu {color:#FFFFFF; text-decoration:none;}')
document.write('.ejsmenu {color:#FFFFFF; text-decoration:none;}')
document.write('</style>')
document.write('<div style="position:relative;height:25"><DIV class=popper id=topdeck></DIV>');
zlien = new Array;
zlien[0] = new Array;
zlien[1] = new Array;
zlien[2] = new Array;
zlien[3] = new Array;
zlien[0][0] = '<A HREF="http://localhost/AjoutClient.php" CLASS=ejsmenu>Ajouter un Client</A>'; //Client/Ajouter
zlien[0][1] = '<A HREF="http://localhost/ModifClient.php" CLASS=ejsmenu>Modification d\'un Client</A>'; //Client/Modifier
zlien[0][2] = '<A HREF="http://localhost/SupClient.php" CLASS=ejsmenu>Suppression d\'un Client</A>'; //Client/Supprimez
zlien[0][3] = '<A HREF="http://localhost/ConsClient.php" CLASS=ejsmenu>Consulter Client</A>'; //Client/Consulter
zlien[1][0] = '<A HREF="http://localhost/AjoutAff.php" CLASS=ejsmenu>Ajout Affaire</A>'; //Affaire/Ajout
zlien[1][1] = '<A HREF="http://localhost/ModifAff.php" CLASS=ejsmenu>Modifier Affaire</A>'; //Affaire/Modifier
zlien[1][2] = '<A HREF="http://localhost/SupAff.php" CLASS=ejsmenu>Supression Affaire</A>'; //Affaire/Suppression
zlien[1][3] = '<A HREF="http://localhost/ConsAff.php" CLASS=ejsmenu>Consulter Affaire</A>'; //Affaire/Consulter
zlien[2][0] = '<A HREF="http://localhost/ResClient.php" CLASS=ejsmenu>Par Client</A>'; //Resultat/Par client
zlien[2][1] = '<A HREF="http://localhost/ChoixGraph.php" CLASS=ejsmenu>Résultat Global</A>'; //Resultat/Globale
zlien[2][2] = '<A HREF="http://localhost/ResAff.php" CLASS=ejsmenu>Résultat par Affaire</A>'; //Resultat/Affaire
zlien[2][3] = '<A HREF="http://localhost/Compteur.php" CLASS=ejsmenu>Compteur Formulaire</A>'; //Resultat/Compteur Formulaire
zlien[3][0] = '<A HREF="http://xx.xxx.xxx.xx/AncienClient.php" CLASS=ejsmenu>Envoi Mail</A>'; //Courriel/Envoi Mail
if(document.getElementById)
	{
	skn = document.getElementById("topdeck").style
	skn.left = 99;
	}
 
function pop(msg,pos)
{
skn.visibility = "hidden";
a=true
skn.top = pos;
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#0000FF WIDTH=150><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
pass = 0
while (pass < msg.length)
	{
	content += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=20><FONT SIZE=1 FACE=\"Arial\">&nbsp;&nbsp;"+msg[pass]+"</FONT></TD></TR>";
	pass++;
	}
content += "</TABLE></TD></TR></TABLE>";
document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";
}
function kill()
{
	if(document.getElementById)
		skn.visibility = "hidden";
}
document.onclick = kill;
if(document.getElementById)
	{
	document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#0000FF WIDTH=100 HEIGHT=80><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=80>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Client</FONT></TD></tr>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],20)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Affaire</FONT></TD></tr>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[2],40)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Résultat</FONT></TD></tr>')
document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[3],60)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Courriel</FONT></TD></tr>')
	document.write('</TABLE></TD></TR></TABLE></DIV>')
	}
document.write('</div>');

Sur ce je remerci d'avance ce qui auront le courage de si blonger !
whowho50
P.s. Merci Andri.aime

CE code moche est normalement un code qui provient de l'éditeur Javascript, il serait mieux dans un premier temps de t'inspirer d'un code propre.

Ensuite ton problème vient d'un problème IE tout simple :
quand tu fais des document.write dans un code, et que tu essayes d'accéder à ces éléments juste après le document.write, ben IE ne reconnait pas ces objets comme créés.

la solution serait de générer la nav sur le onload de la page.

**whowho50** · 15/06/2010, 11h39

Désolé mais je n'est quasiment aucune connaissance dans le JavaScript bien que je comprenne a peu près la page.
Je confirme que mon code vient bien d'un générateur (je ne sais plus lequel).
Aurait tu l'amabilité de m'expliquer tes propos :

la solution serait de générer la nav sur le onload de la page.

Qui sont pour moi du Russe

Merci d'avance pour l'aide

whowho50

**RomainVALERI** · 15/06/2010, 12h19

Un exemple de la structure dont parle dukej :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<script type="text/javascript">
function creerMenu() {
   // place l'extrait cité dans ton message à cet endroit
}
</script>
</head>
<body onload="creerMenu()">
</body>
</html>

Cela dit, je suis d'accord avec lui sur l'autre point : c'est bien "moche" comme code.
Par "moche", on entend quoi ?

> cette utilisation de document.write est à proscrire, pour de nombreuses raisons (une rapide recherche t'en donnera des kilomètres) d'efficacité, de lisibilité, de compatibilité, entre autres ^^

**whowho50** · 15/06/2010, 13h37

Merci de vous interessez a mon problème !
La solution proposée proposé par RomainVALERI ne marche pas je n'est plus que le menu sans le reste de ma page (le menu ne marchant plus non plus).
Voici mon code :

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
84
85
86
87
88
89
90
<!-- Index -->
<html>
	<head>
		<title>Acceuil Enqu&ecirc;te de satisfaction</title>
		<link type="text/css" href="style.css" rel="stylesheet">
		<SCRIPT LANGUAGE="JavaScript">
			function creerMenu() {
				bgcolor='#FFFFFF'; 
				bgcolor2='##00FFFF';
				document.write('<style type="text/css">');
				document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:15; left:99px ')
				document.write('#topgauche { position:absolute;  z-index:10; }')
				document.write('A:hover.ejsmenu {color:#FFFFFF; text-decoration:none;}')
				document.write('.ejsmenu {color:#FFFFFF; text-decoration:none;}')
				document.write('</style>')
				document.write('<div style="position:relative;height:25"><DIV class=popper id=topdeck></DIV>');
				zlien = new Array;
				zlien[0] = new Array;
				zlien[1] = new Array;
				zlien[2] = new Array;
				zlien[3] = new Array;
				zlien[0][0] = '<A HREF="http://localhost/AjoutClient.php" CLASS=ejsmenu>Ajouter un Client</A>'; //Client/Ajouter
				zlien[0][1] = '<A HREF="http://localhost/ModifClient.php" CLASS=ejsmenu>Modification d\'un Client</A>'; //Client/Modifier
				zlien[0][2] = '<A HREF="http://localhost/SupClient.php" CLASS=ejsmenu>Suppression d\'un Client</A>'; //Client/Supprimez
				zlien[0][3] = '<A HREF="http://localhost/ConsClient.php" CLASS=ejsmenu>Consulter Client</A>'; //Client/Consulter
				zlien[1][0] = '<A HREF="http://localhost/AjoutAff.php" CLASS=ejsmenu>Ajout Affaire</A>'; //Affaire/Ajout
				zlien[1][1] = '<A HREF="http://localhost/ModifAff.php" CLASS=ejsmenu>Modifier Affaire</A>'; //Affaire/Modifier
				zlien[1][2] = '<A HREF="http://localhost/SupAff.php" CLASS=ejsmenu>Supression Affaire</A>'; //Affaire/Suppression
				zlien[1][3] = '<A HREF="http://localhost/ConsAff.php" CLASS=ejsmenu>Consulter Affaire</A>'; //Affaire/Consulter
				zlien[2][0] = '<A HREF="http://localhost/ResClient.php" CLASS=ejsmenu>Par Client</A>'; //Resultat/Par client
				zlien[2][1] = '<A HREF="http://localhost/ChoixGraph.php" CLASS=ejsmenu>Résultat Global</A>'; //Resultat/Globale
				zlien[2][2] = '<A HREF="http://localhost/ResAff.php" CLASS=ejsmenu>Résultat par Affaire</A>'; //Resultat/Affaire
				zlien[2][3] = '<A HREF="http://localhost/Compteur.php" CLASS=ejsmenu>Compteur Formulaire</A>'; //Resultat/Compteur Formulaire
				zlien[3][0] = '<A HREF="http://localhost/AncienClient.php" CLASS=ejsmenu>Envoi Mail</A>'; //Courriel/Envoi Mail
				if(document.getElementById)
					{
					skn = document.getElementById("topdeck").style
					skn.left = 99;
					}
 
				function pop(msg,pos)
				{
				skn.visibility = "hidden";
				a=true
				skn.top = pos;
				var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#0000FF WIDTH=150><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
				pass = 0
				while (pass < msg.length)
					{
					content += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=20><FONT SIZE=1 FACE=\"Arial\">&nbsp;&nbsp;"+msg[pass]+"</FONT></TD></TR>";
					pass++;
					}
				content += "</TABLE></TD></TR></TABLE>";
				document.getElementById("topdeck").innerHTML = content;
				skn.visibility = "visible";
				}
				function kill()
				{
					if(document.getElementById)
						skn.visibility = "hidden";
				}
				document.onclick = kill;
				if(document.getElementById)
					{
					document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#0000FF WIDTH=100 HEIGHT=80><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=80>')
				document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Client</FONT></TD></tr>')
				document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],20)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Affaire</FONT></TD></tr>')
				document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[2],40)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Résultat</FONT></TD></tr>')
				document.write('<tr><TD WIDTH=100 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[3],60)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE=1 FACE="Arial">Courriel</FONT></TD></tr>')
					document.write('</TABLE></TD></TR></TABLE></DIV>')
					}
				document.write('</div>');
			}
		</SCRIPT>
	</head>
	<body onload="creerMenu()">
		<center><img style="width: 980px; height: 79px;" alt="" src="Images/axians2.gif"></center>
		<div id="menu">
			<div id="contenu">
				<SCRIPT LANGUAGE="JavaScript">
					creerMenu()
				</SCRIPT>
			</br></br></br>
			<p>
				<h3 align="center">Bienvenue dans le syst&egrave;me de gestion de la satisfaction client</h3>
				<h4 align="center">Veuillez s&eacute;lectionner dans le menu lat&eacute;ral l'action de votre choix.</h4>
			</p>
		</div>		
	</body>
</html>

mon ancien code était :

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
<!-- Index -->
<html>
	<head>
		<title>Acceuil Enqu&ecirc;te de satisfaction</title>
		<link type="text/css" href="style.css" rel="stylesheet">
	</head>
	<body>
		<center><img style="width: 980px; height: 79px;" alt="" src="Images/axians2.gif"></center>
		<div id="menu">
			<SCRIPT LANGUAGE="JavaScript" SRC="ejs_menu_dyn_vert.js"></SCRIPT>
		</div>
		<div id="contenu">
			</br></br></br>
			<p>
				<h3 align="center">Bienvenue dans le syst&egrave;me de gestion de la satisfaction client</h3>
				<h4 align="center">Veuillez s&eacute;lectionner dans le menu lat&eacute;ral l'action de votre choix.</h4>
			</p>
		</div>		
	</body>
</html>

Sacré IE les problèmes de mise en page ne lui suffise pas !

**dukej** · 15/06/2010, 13h53

faut virer les document.write et faire une injection via innerHTML dans in div créé via DOM.

Menu JavaScript IE

JavaScript

Vue hybride

Discussions similaires

Partager

Partager