11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai un petit souci avec IE9.
Mon menu fonctionnait très bien jusqu'à présent avec FF, Safari et les anciennes versions d'IE... mais plus avec IE9.

C'est un menu déroulant, les titres ne s'affichent plus, IE9 me les a remplacé par "null".
Je n'arrive pas à trouver la solution.

Si quelqu'un connait la solution, je veux bien un peu d'aide SVP...
Merci d'avance !

> Voici une page du site internet :
http://www.domaines-tatin.com/vins-reuilly.html

> Et voici le code javascript :
// JavaScript Document

( function() {

// Test de passage d'un argument
var fnTest = function()
{
var iI = arguments.length - 1;
for(iI; iI >= 0; iI--) if(!arguments[iI]) return false;
return true;
};

// Ajout d'une action sur un événement
var fnConnect = function(oElem, sEvType, fn, bCapture)
{
return oElem.addEventListener ?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent ?
oElem.attachEvent('on' + sEvType, fn):
oElem['on' + sEvType] = fn;
};

// Retrait d'une action sur un événement
var fnDisconnect = function (oElem, sEvType, fn, bCapture)
{
return oElem.removeEventListener?
oElem.removeEventListener(sEvType, fn, bCapture):
oElem.detachEvent?
oElem.detachEvent('on' + sEvType, fn):
oElem['on' + sEvType] = null;
};

// Annulation du clic sur un élément
var fnCancelClick = function(e)
{
if(e && e.stopPropagation && e.preventDefault)
{
e.stopPropagation();
e.preventDefault();
return false; // Pour Safari
}
else if(window.event && window.event.cancelBubble && window.event.returnValue)
{
window.event.cancelBubble = true;
window.event.returnValue = false;
return false;
}
else return false;
};

// Récupération de la source de l'événement
var fnGetTarget = function(e)
{
var target = window.event ? window.event.srcElement : e ? e.target : this;
if(!target) return false;
if(target.nodeName.toLowerCase() != 'a') target = target.parentNode; //Pour Safari
return target;
};

// Affichage des menus
var fnMontre = function(e)
{
var oTarget = fnGetTarget(e);
var oList = oTarget.parentNode.getElementsByTagName('ul')[0];
oList.className = 'Montre';
fnDisconnect(oTarget, 'click', fnMontre, false);
fnConnect(oTarget, 'click', fnCache, false);
return fnCancelClick(e);
};

// Masquage des menus
var fnCache = function(e)
{
var oTarget = fnGetTarget(e);
oTarget.nextSibling.className = 'Cache';
fnDisconnect(oTarget, 'click', fnCache, false);
fnConnect(oTarget, 'click', fnMontre, false);
return fnCancelClick(e);
};

// Initialisation du menu
var fnMenu = function()
{
var oMenus = document.getElementById('menus'),
oItem = oMenus.getElementsByTagName('li'),
iI = oItem.length - 1,
oUl = oMenus.getElementsByTagName('ul'),
iJ = oUl.length - 1;
for(iJ; iJ >= 0; iJ--) if(oUl[iJ].className != 'Montre') oUl[iJ].className = 'Cache';
for(iI; iI >= 0; iI--)
{
if(oItem[iI].parentNode.getAttribute('id') == 'menus')
{
var oA = document.createElement('a'),
sTxtLi = oItem[iI].firstChild.nodeValue,
oTxtA = document.createTextNode(sTxtLi);
oA.setAttribute('href', '#ouverture-fermeture-Menu');
oA.appendChild(oTxtA);
oItem[iI].replaceChild(oA, oItem[iI].firstChild);
oA.nextSibling.className != 'Montre' ?
fnConnect(oA, 'click', fnMontre, false):
fnConnect(oA, 'click', fnCache, false);
}
}
};

// Méthode de chargement rapide
// Thanks to Dean Edwards, Matthias Miller & John Resig (http://dean.edwards.name/weblog/2006/06/again/)
function fnFastLoadEvent(func)
{
if(document.addEventListener) document.addEventListener('DOMContentLoaded', func, false);

/*@cc_on @*/
/*@if(@_win32) document.write('<scr'+'ipt id="__ie_onload" defer src="javascript:void(0)"><\/scr'+'ipt>');
var script = document.getElementById('__ie_onload');
script.onreadystatechange = function()
{
if(this.readyState === 'complete') func();
};
/*@end @*/

if(/WebKit/i.test(navigator.userAgent) && /loaded|complete/.test(document.readyState)) func();
};

// Test des méthodes du script et lancement si c'est bon...
fnTest(document.getElementById, document.getElementsByTagName, document.createElement, document.createTextNode) ?
fnFastLoadEvent(fnMenu) :
false;

} ) ();



> 2eme code javascript sur la page :
<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
Voici le code du menu :

<ul id="menus">

<li>Accueil
<ul id="sousMenu">
<li><a href="index.html">Edito</a></li>
</ul>
</li>

<li>Les Domaines
<ul id="sousMenu">
<li><a href="domaines-histoire.html">L'histoire</a></li>
<li><a href="domaines-ballandors.html">Les Ballandors</a></li>
<li><a href="domaines-tremblay.html">Le Tremblay</a></li>
<li><a href="domaines-demoiselles.html">Les Demoiselles Tatin</a></li>
<li><a href="domaines-groupements.html">Group. fonciers viticoles</a></li>
</ul>
</li>

<li>Les vins
<ul id="sousMenu" class="Montre">
<li><a href="vins-quincy.html">Quinçy</a></li>
<li><a href="vins-reuilly.html">Reuilly</a></li>
<li><a href="vins-adresses.html">Où trouver nos vins</a></li>
</ul>
</li>

<li>De la vigne au vin
<ul id="sousMenu">
<li><a href="vigne-terroir.html">Le terroir</a></li>
<li><a href="vigne-vignerons.html">Les vignerons</a></li>
<li><a href="vigne-cave.html">La cave</a></li>
<li><a href="vigne-vendanges.html">Les vendanges</a></li>
</ul>
</li>

<li>Oenotourisme
<ul id="sousMenu">
<li><a href="oenotourisme-degustation.html">Dégustation</a></li>
<li><a href="oenotourisme-visite.html">Visite et découverte</a></li>
<li><a href="oenotourisme-gastronomie.html">Gastronomie</a></li>
</ul>
</li>

<li>Gîte rural
<ul id="sousMenu">
<li><a href="gite.html">Le gîte du Tremblay</a></li>
</ul>
</li>

<li>Presse
<ul id="sousMenu">
<li><a href="presse-articles.html">Articles</a></li>
<li><a href="presse-distinctions.html">Distinctions</a></li>
<li><a href="presse-citations.html">Citations</a></li>
</ul>
</li>

<li>Nouvelles
<ul id="sousMenu">
<li><a href="reve-raison.html">Rêve et Raison</a></li>
<li><a href="anciens-edito.html">Anciens édito</a></li>
</ul>
</li>

<li>Contact
<ul id="sousMenu">
<li><a href="contact.php">Formulaire et contacts</a></li>
</ul>
</li>

<li>Liens
<ul id="sousMenu">
<li><a href="liens.html">Tourisme local<br/> Hôtels/restaurants<br/> Amis...</a></li>
</ul>
</li>

</ul>
Non les balises de code, ce sont les boutons Coloration syntaxique sous la zone de texte qui permettent de présenter ton code correctement, ce n'est pas à nous de le déchiffrer.
Pardon !
J'espère que je l'ai bien fait cette fois-ci... Désolée...
Merci de votre patience...


<div id="gauche">

		<ul id="menus">
        
		<li>Accueil
			<ul id="sousMenu">
				<li><a href="index.html">Edito</a></li>	
			</ul>
		</li>
        
		<li>Les Domaines
			<ul id="sousMenu">
				<li><a href="domaines-histoire.html">L'histoire</a></li>
				<li><a href="domaines-ballandors.html">Les Ballandors</a></li>
				<li><a href="domaines-tremblay.html">Le Tremblay</a></li>
				<li><a href="domaines-demoiselles.html">Les Demoiselles Tatin</a></li>
				<li><a href="domaines-groupements.html">Group. fonciers viticoles</a></li>
			</ul>
		</li>
        
		<li>Les vins
			<ul id="sousMenu" class="Montre">
				<li><a href="vins-quincy.html">Quinçy</a></li>
				<li><a href="vins-reuilly.html">Reuilly</a></li>
				<li><a href="vins-adresses.html">Où trouver nos vins</a></li>
			</ul>
		</li>
        
		<li>De la vigne au vin
			<ul id="sousMenu">
				<li><a href="vigne-terroir.html">Le terroir</a></li>
				<li><a href="vigne-vignerons.html">Les vignerons</a></li>
				<li><a href="vigne-cave.html">La cave</a></li>
				<li><a href="vigne-vendanges.html">Les vendanges</a></li>
			</ul>
		</li>
        
		<li>Oenotourisme
			<ul id="sousMenu">
				<li><a href="oenotourisme-degustation.html">Dégustation</a></li>
				<li><a href="oenotourisme-visite.html">Visite et découverte</a></li>
				<li><a href="oenotourisme-gastronomie.html">Gastronomie</a></li>
			</ul>
		</li>
        
		<li>Gîte rural
			<ul id="sousMenu">
				<li><a href="gite.html">Le gîte du Tremblay</a></li>
			</ul>
		</li>
        
		<li>Presse
			<ul id="sousMenu">
				<li><a href="presse-articles.html">Articles</a></li>
				<li><a href="presse-distinctions.html">Distinctions</a></li>
				<li><a href="presse-citations.html">Citations</a></li>
			</ul>
		</li>
        
        <li>Nouvelles
			<ul id="sousMenu">
				<li><a href="reve-raison.html">Rêve et Raison</a></li>
                <li><a href="anciens-edito.html">Anciens édito</a></li>
			</ul>
		</li>
        
		<li>Contact
			<ul id="sousMenu">
				<li><a href="contact.php">Formulaire et contacts</a></li>
			</ul>
		</li>
        
		<li>Liens
			<ul id="sousMenu">
				<li><a href="liens.html">Tourisme local<br/> Hôtels/restaurants<br/> Amis...</a></li>
			</ul>
		</li>
        
	</ul>
    
	</div> 





( function() {

// Test de passage d'un argument
var fnTest = function()
{
var iI = arguments.length - 1;
for(iI; iI >= 0; iI--) if(!arguments[iI]) return false;
return true;
};

// Ajout d'une action sur un événement
var fnConnect = function(oElem, sEvType, fn, bCapture)
{
return oElem.addEventListener ?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent ?
oElem.attachEvent('on' + sEvType, fn):
oElem['on' + sEvType] = fn;
};

// Retrait d'une action sur un événement
var fnDisconnect = function (oElem, sEvType, fn, bCapture)
{
return oElem.removeEventListener?
oElem.removeEventListener(sEvType, fn, bCapture):
oElem.detachEvent?
oElem.detachEvent('on' + sEvType, fn):
oElem['on' + sEvType] = null;
};

// Annulation du clic sur un élément
var fnCancelClick = function(e)
{
if(e && e.stopPropagation && e.preventDefault)
{
e.stopPropagation();
e.preventDefault();
return false; // Pour Safari
}
else if(window.event && window.event.cancelBubble && window.event.returnValue)
{
window.event.cancelBubble = true;
window.event.returnValue = false;
return false;
}
else return false;
};

// Récupération de la source de l'événement
var fnGetTarget = function(e)
{
var target = window.event ? window.event.srcElement : e ? e.target : this;
if(!target) return false;
if(target.nodeName.toLowerCase() != 'a') target = target.parentNode; //Pour Safari
return target;
};

// Affichage des menus
var fnMontre = function(e)
{
var oTarget = fnGetTarget(e);
var oList = oTarget.parentNode.getElementsByTagName('ul')[0];
oList.className = 'Montre';
fnDisconnect(oTarget, 'click', fnMontre, false);
fnConnect(oTarget, 'click', fnCache, false);
return fnCancelClick(e);
};

// Masquage des menus
var fnCache = function(e)
{
var oTarget = fnGetTarget(e);
oTarget.nextSibling.className = 'Cache';
fnDisconnect(oTarget, 'click', fnCache, false);
fnConnect(oTarget, 'click', fnMontre, false);
return fnCancelClick(e);
};

// Initialisation du menu
var fnMenu = function()
{
var oMenus = document.getElementById('menus'),
oItem = oMenus.getElementsByTagName('li'),
iI = oItem.length - 1,
oUl = oMenus.getElementsByTagName('ul'),
iJ = oUl.length - 1;
for(iJ; iJ >= 0; iJ--) if(oUl[iJ].className != 'Montre') oUl[iJ].className = 'Cache';
for(iI; iI >= 0; iI--)
{
if(oItem[iI].parentNode.getAttribute('id') == 'menus')
{
var oA = document.createElement('a'),
sTxtLi = oItem[iI].firstChild.nodeValue,
oTxtA = document.createTextNode(sTxtLi);
oA.setAttribute('href', '#ouverture-fermeture-Menu');
oA.appendChild(oTxtA);
oItem[iI].replaceChild(oA, oItem[iI].firstChild);
oA.nextSibling.className != 'Montre' ?
fnConnect(oA, 'click', fnMontre, false):
fnConnect(oA, 'click', fnCache, false);
}
}
};

// Méthode de chargement rapide
// Thanks to Dean Edwards, Matthias Miller & John Resig (http://dean.edwards.name/weblog/2006/06/again/)
function fnFastLoadEvent(func)
{
if(document.addEventListener) document.addEventListener('DOMContentLoaded', func, false);

/*@cc_on @*/
/*@if(@_win32) document.write('<scr'+'ipt id="__ie_onload" defer src="javascript:void(0)"><\/scr'+'ipt>');
var script = document.getElementById('__ie_onload');
script.onreadystatechange = function()
{
if(this.readyState === 'complete') func();
};
/*@end @*/

if(/WebKit/i.test(navigator.userAgent) && /loaded|complete/.test(document.readyState)) func();
};

// Test des méthodes du script et lancement si c'est bon...
fnTest(document.getElementById, document.getElementsByTagName, document.createElement, document.createTextNode) ?
fnFastLoadEvent(fnMenu) :
false;

} ) ();



<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>




/*MENU*/
#menus{
margin: 22px 0 0 4px;
}
#sousMenu{
padding-bottom: 5px;
}
li, ul{
list-style-type: none;
}
#menus li{
font-size: 1em;
line-height: 1.5em;
display: list-item;
border-top: 2px dotted #fbed8d;
width: 160px;
font-weight: bold;
margin-top: 10px;
margin-right: 2px;
color: #fbed8d;
}
#menus li ul li{
display: list-item;
border-top: none;
width: 160px;
margin-top: 2px;
height: 10px;
color: #fbed8d;
font-size: 10px;
}
#menus li a{
text-decoration: none;
display: block;
margin: 0 2px;
color: #fbed8d;
cursor: pointer;
}
#menus li ul a{
color: #fbed8d;
font-size: 11px;
cursor: pointer;
width: 160px;
display: block;
margin: 0 2px;
}
#menus li ul a:hover{
text-decoration: none;
color: #c0ce2d;
}
#menus li ul a:active{
text-decoration: none;
color: #c0ce2d;
}

/*classes nécessaires au javascript*/
.Cache{
display: none;
}
.Montre{
display: list-item;
}
Merci pour les balises, je suis du côté Linux de mon PC ce soir, donc j'ai pas IE mais je testerai demain.

Sinon, tu peux déjà essayer de regarder ce hack qui me paraît douteux :
var target = window.event ? window.event.srcElement : e ? e.target : this;

Peut-être qu'il marche bien avec les anciennes versions de IE9 mais si ça se trouve depuis la 9 window.event n'existe plus alors que target est toujours remplacé par srcElement. Ca vaudrait le coup d'essayer ça à la place :
e=e||window.event;
var target=(e.srcElement||e.target)||this;
Coucou, j'ai pensé à toi aujourd'hui et j'ai lancé mon ordi en Windows.

Du coup, je crois voir d'où ça vient, c'est nodeValue qui n'est pas compatible :
sTxtLi = oItem[iI].firstChild.nodeValue,

Essaye ceci à la place :
sTxtLi = oItem[iI].firstChild.nodeValue||oItem[iI].firstChild.innerHTML,
Super ! Génial !
Merci beaucoup d'avoir pris le temps ! Et d'avoir résolu le problème !
Ça fonctionne maintenant.