Menu déroulant JavaScript incompatible avec FireFox

Bonjours,

J'ai repris un site web fait par un amis dans le but de le mettre a jour.

Ce site est en très grande partie fait en PHP-HTML, mais il y a un peut de JavaScript. Et malheureusement mes connaissances en JavaScript sont très limitées.

J'ai un gros problème avec le menu déroulant (pour la navigation) qui est entièrement fait en JavaScript. Le menu fonctionne a merveille sous IE mais sur FireFox, rien! le menu ne s'affiche pas! J'ai cherché dans le code mais je n'ai rien trouvé. Je ne trouve pas la source du problème.

SVP quelqu'un pourrait m'aidé?

Merci d'avance a ceux qui répondront :D

voici le code de la page menu.js:

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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
 
<!--------------------------------------------------------------------------------------->
function MenuItem(p_id, p_level, p_title, p_url, p_frame, p_submenu)
{
	this.id = p_id;
	this.level = p_level;
	this.title = p_title;
  this.url = p_url;
  this.frame = p_frame;
  this.submenu = p_submenu;
 
	this.generate = MenuItem_generate;
	this.display = MenuItem_display;
	this.hide = MenuItem_hide;
}
 
function MenuItem_display()
{
	document.all["menuId_" + this.id].style.display = 'block';
}
 
function MenuItem_hide()
{
	document.all["menuId_" + this.id].style.display = 'none';
}
 
function MenuItem_generate()
{
	var strHtml = "";
 
	if (this.submenu != "")
	{
		strHtml = this.submenu.generate();
	}
	else
	{
		if (this.url == "") {
			this.url == "#";
		}
 
		strHtml += '<tr id="menuId_' + this.id + '" height="20">';
		strHtml += ' <td width="15">&nbsp;</td>';
 
		if (this.level = 2) {
			strHtml += ' <td><span class="menu2"><a class="menu" href="' + this.url + '"';
		}
		else {
			strHtml += ' <td><span class="menu3"><a class="menu" href="' + this.url + '"';
		}
 
		if (this.frame != "") {
			strHtml += ' target="' + this.frame + '"';
		}
 
		strHtml += '>' + this.title + '</a></span></td>';
		strHtml += '</tr>';
	}
 
	return strHtml;
}
 
<!--------------------------------------------------------------------------------------->
function Menu(p_id, p_level, p_title, p_url, p_frame)
{
	this.id = p_id;
	this.level = p_level;
	this.title = p_title;
  this.url = p_url;
  this.frame = p_frame;
  this.items = new Array();
 
	this.getId    = Menu_getId;
	this.addItem  = Menu_addItem;
	this.expand   = Menu_expand;
	this.collapse = Menu_collapse;
	this.generate = Menu_generate;
}
 
function Menu_getId()
{
	return this.id;
}
 
function Menu_addItem(p_item)
{
	this.items[this.items.length++] = p_item;
}
 
function Menu_expand()
{
	var idxItem;
	for (idxItem = 0; idxItem < this.items.length; idxItem++)
	{
		this.items[idxItem].display();
	}
}
 
function Menu_collapse()
{
	var idxItem;
	for (idxItem = 0; idxItem < this.items.length; idxItem++)
	{
		this.items[idxItem].hide();
	}
}
 
function Menu_generate()
{
	var strHtml = "";
 
	strHtml += '<tr id="menuId_' + this.id + '" height="20">';
 
	if (this.level = 1)
	{
		strHtml += ' <td width="15"><img src="../common/images/menu_bullet.gif" align="middle"></td>';
 
		if (this.url != "") {
			strHtml += ' <td><span class="menu1"><a class="menu" href="javascript: parent.' + this.frame + '.location.href=\'' + this.url + '\'; g_menubar.expandMenu(' + this.id + ')">' + this.title + '</a></span></td>';
		}
		else {
			strHtml += ' <td><span class="menu1"><a class="menu" href="javascript:g_menubar.expandMenu(' + this.id + ')">' + this.title + '</a></span></td>';
		}
	}
	else
	{
		strHtml += ' <td width="15">&nbsp;</td>';
		strHtml += ' <td><span class="menu2"><a class="menu" href="javascript:g_menubar.expandMenu(' + this.id + ')">+ ' + this.title + '</a></span></td>';
	}
 
	strHtml += '</tr>';
 
	var idxItem;
	for (idxItem = 0; idxItem < this.items.length; idxItem++)
	{
		strHtml += this.items[idxItem].generate();
	}
 
	return strHtml;
}
 
<!--------------------------------------------------------------------------------------->
function Menubar()
{
  this.menus = new Array();
 
	this.addMenu      = Menubar_addMenu;
	this.expandMenu   = Menubar_expandMenu;
	this.collpaseMenu = Menubar_collpaseMenu;
	this.generate     = Menubar_generate;
	this.display      = Menubar_display;
}
 
function Menubar_addMenu(p_menu)
{
	this.menus[this.menus.length++] = p_menu;
}
 
function Menubar_expandMenu(p_id)
{
	var idx;
	var menu;
 
	for (idx = 0; idx < this.menus.length; idx++) {
		menu = this.menus[idx];
 
		if (menu.getId() == p_id) {
			menu.expand();
		} else {
			menu.collapse();
		}
	}	
}
 
function Menubar_collpaseMenu(p_id)
{
	var idx;
	var menu;
 
	for (idx = 0; idx < this.menus.length; idx++) {
		menu = this.menus[idx];
 
		if (menu.getId() == p_id) {
			menu.collapse();
		}
	}	
}
 
function Menubar_generate()
{
	var strHtml = "";
	var idx;
 
	strHtml += '<table border="0" cellpadding="0" cellspacing="0" width="100%">';
 
	for (idx = 0; idx < this.menus.length; idx++) {
		strHtml += this.menus[idx].generate();
	}
 
	strHtml += '</table>';
 
	document.body.insertAdjacentHTML('beforeEnd', strHtml);
}
 
function Menubar_display()
{
	var idx;
 
	for (idx = 0; idx < this.menus.length; idx++) {
		this.menus[idx].collapse();
	}
}

document

Salut,

Remplace les document.all[XX] par des document.getElementById(XX) et teste le menu.

ERE

Citation:

Envoyé par emmanuel.remy

Salut,

Remplace les document.all[XX] par des document.getElementById(XX) et teste le menu.

ERE

Salut,

merci d'avoir répondu. j'ai essaillé mais ça n'as pas marché.sa a meme creer un problème car maintenant sur ie, tout les sous menu sont ouverts au lieu de uniquement ceux du menu selectioné.
j'ai donc remis en document.all

quelqu'un aurais uneautre solution svp?

Une chose est sure, c'est que Firefox ne reconnait pas l'instruction document.all qui est propriétaire Microsoft et complètement tombée en désuétude. Sa seule utilité aujourd'hui est de permettre de reconnaitre IE !

Script IE

Sûr, ce script a été fait pour IE et il doit dater .
Donc si tu veux une compatibilité avec les autres navigateurs, tu l'adaptes en remplaçant les document.all et toutes les autres fonctions et événements propres à IE (attachEvent...)

Tiens, voilà l'équivalent Firefox de la fonction insertAdjacentHTML (trouvé ici) via :chin::

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
 
if(typeof HTMLElement!="undefined" && !
HTMLElement.prototype.insertAdjacentElement){
	HTMLElement.prototype.insertAdjacentElement = function
(where,parsedNode)
	{
		switch (where){
		case 'beforeBegin':
			this.parentNode.insertBefore(parsedNode,this)
			break;
		case 'afterBegin':
			this.insertBefore(parsedNode,this.firstChild);
			break;
		case 'beforeEnd':
			this.appendChild(parsedNode);
			break;
		case 'afterEnd':
			if (this.nextSibling) 
this.parentNode.insertBefore(parsedNode,this.nextSibling);
			else this.parentNode.appendChild(parsedNode);
			break;
		}
	}
 
	HTMLElement.prototype.insertAdjacentHTML = function
(where,htmlStr)
	{
		var r = this.ownerDocument.createRange();
		r.setStartBefore(this);
		var parsedHTML = r.createContextualFragment(htmlStr);
		this.insertAdjacentElement(where,parsedHTML)
	}
 
 
	HTMLElement.prototype.insertAdjacentText = function
(where,txtStr)
	{
		var parsedText = document.createTextNode(txtStr)
		this.insertAdjacentElement(where,parsedText)
	}
}

Il te reste aussi la solution de chercher un script tout fait et cross navigateurs...

ERE