Bonjour à tous !!
Voilà j'ai un problème de nul en Java Script...
J'ai 2 javascripts qui fonctionnent très bien séparement, mais dès que je les mets sur la même page, ça ne marche plus... galère !!
Quelqu'un peut-il m'aider ?? Il doit y avoir une "interférence" quelque part...
Voilà les 2 scripts à la suite, un pour simuler un :hover, et l'autre pour un menu déroulant en JavaScript.
Merci d'avance !!
Modifié par kristof (08 Aug 2006 - 00:08)
Voilà j'ai un problème de nul en Java Script...
J'ai 2 javascripts qui fonctionnent très bien séparement, mais dès que je les mets sur la même page, ça ne marche plus... galère !!
Quelqu'un peut-il m'aider ?? Il doit y avoir une "interférence" quelque part...
Voilà les 2 scripts à la suite, un pour simuler un :hover, et l'autre pour un menu déroulant en JavaScript.
Merci d'avance !!
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("DL");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
// Raccourci et création d'un objet
var d = document,
o = {};
// Définition des propriétés de l'objet
o.Menu =
{
// Chargement du menu
__Load__: function()
{
// On lance le test pour s'assurer du bon fonctionnement
o.Menu.__Test__();
},
// Test d'existence des méthodes et de la syntaxe xhtml
__Test__: function()
{
// Si l'une des méthodes du script n'est pas interprétée ou si le menu n'existe pas, on stoppe le script.
if ( !d.getElementById ||
!d.getElementsByTagName ||
!d.createElement ||
!d.createTextNode ||
!d.getElementById('menu') ||
!d.getElementById('menu').setAttribute ||
!d.getElementById('menu').replaceChild ||
!d.getElementById('menu').appendChild ||
!d.getElementById('menu').getElementsByTagName('dl') ) return false;
/*
----- Tests facultatifs et non exhaustifs de bon augure ^^ -----
----- Les codes contenus dans la zone suivante peuvent -----
----- être virés si vous êtes sûr de votre syntaxe xhtml. -----
*/
// Une fois le premier test effectué, on définit les variables nécessaires.
var iA, iB, iC, iD,
oMenu = d.getElementById('menu'),
oDl = oMenu.getElementsByTagName('dl');
// Pour chaque élément dl du tableau oDl,
for ( iA = oDl.length - 1; iA >= 0; iA-- )
{
// on récupère les éléments dt dans un tableau.
var oDt = oDl[iA].getElementsByTagName('dt');
// Si le tableau oDt est vide, on stoppe le script.
if ( !oDt ) return false;
}
// Pour chaque élément dl du tableau oDl,
for ( iA = oDl.length - 1; iA >= 0; iA-- )
{
// on récupère les éléments dd dans un tableau oDd.
var oDd = oDl[iA].getElementsByTagName('dd');
// Si le tableau oDd est vide, on stoppe le script.
if ( !oDd ) return false;
// sinon
else
{
// pour chaque élément dd du tableau oDd,
for ( iB = oDd.length - 1; iB >= 0; iB-- )
{
// on récupère les éléments ul dans un tableau oUl.
var oUl=oDd[iB].getElementsByTagName('ul');
// S'il n'y a pas d'élément ul, on stoppe le script.
if( !oUl ) return false;
// sinon
else
{
// pour chaque élément ul du tableau oUl,
for ( iC = oUl.length - 1; iC >= 0; iC-- )
{
// on récupère les éléments li dans un tableau oLi.
var oLi = oUl[iC].getElementsByTagName('li');
// S'il n'y a aucun objet oLi, on stoppe le script.
if( !oLi ) return false;
// sinon
else
{
// pour chaque élément li du tableau oLi,
for ( iD = oLi.length - 1; iD >= 0; iD-- )
{
// on récupère l'élément a dans un objet oA.
var oA = oLi[iD].getElementsByTagName('a')[0];
// S'il n'y a pas d'objet oA, on stoppe le script.
if( !oA ) return false;
}
}
}
}
}
}
}
/*
----- -----
----- Fin des tests facultatifs de bon augure ^^ -----
----- -----
*/
// Une fois le test effectué, on initialise le menu.
return o.Menu.__Init__();
},
// Méthode d'initialisation du menu
__Init__:function()
{
// On définit les variables nécessaires.
var iA,
oMenu = d.getElementById('menu'),
oDl = oMenu.getElementsByTagName('dl');
// On cache tous les éléments dd en lançant la méthode dédiée à cette tâche.
o.Menu.__HideLists__();
// Pour chaque élément dl du tableau oDl,
for ( iA = oDl.length - 1; iA >= 0; iA-- )
{
// On récupère l'élément dt.
var oDt = oDl[iA].getElementsByTagName('dt')[0];
// On crée un élément dt et un élément a
var oNewDt = d.createElement('dt'),
oA = d.createElement('a'),
oTextA = d.createTextNode('');
// On définit les propriétés de l'objet oA
// (récupération du noeud texte de l'élément dt pour définir celui de l'élément a)
oA.setAttribute('href','#');
oTextA.data = oDt.firstChild.nodeValue;
// On constitue l'arbre DOM en remplaçant l'élément dt du code xhtml
// par celui qu'on vient de créer.
oA.appendChild(oTextA);
oNewDt.appendChild(oA);
oDl[iA].replaceChild(oNewDt,oDt);
// On définit des méthodes en fonction des actions de l'utilisateur.
oA.onclick = o.Menu.__Discard__;
oDl[iA].onmouseover = o.Menu.__MouseDisplay__;
oA.onfocus = o.Menu.__TabDisplay__;
oA.onkeypress = o.Menu.__TabDisplay__;
}
},
// Méthode d'affichage de l'élément dd lorsqu'on le survole.
__MouseDisplay__:function()
{
// On cache tous les éléments dd en lançant la méthode dédiée à cette tâche.
o.Menu.__HideLists__();
// On récupère l'élément dd de l'élément dl qu'on survole dans un objet.
var oDd = this.getElementsByTagName('dd')[0];
// On affecte la propriété css "display: block;" à l'objet oDd (affichage)
oDd.style.display = 'block';
// On cache l'élément dd lorsqu'on ne survole plus l'élément dl.
this.onmouseout = o.Menu.__HideLists__;
},
// Méthode d'affichage de l'élément dd lorsqu'il prend le focus.
__TabDisplay__:function()
{
// On cache tous les éléments dd en lançant la méthode dédiée à cette tâche.
o.Menu.__HideLists__();
// On récupère l'élément dd de l'élément dl qui a le focus dans un objet.
var oDd = this.parentNode.parentNode.getElementsByTagName('dd')[0];
// On affecte la propriété css "display: block;" à l'objet oDd (affichage)
oDd.style.display = 'block';
// On donne le focus au premier lien de l'élément dd traité.
oDd.getElementsByTagName('a')[0].focus();
},
// Méthode de masquage des éléments dd
__HideLists__:function()
{
// On définit les variables nécessaires.
var iA,
oDd = d.getElementById('menu').getElementsByTagName('dd');
// Pour chaque élément dd du tableau oDd,
for (iA = oDd.length - 1; iA >= 0; iA-- )
{
// On affecte la propriété css "display: none;" à l'objet oDd (masquage)
oDd[iA].style.display = 'none';
}
},
// Fonction d'annulation
__Discard__:function()
{
// On annule l'action.
return false;
}
};
// Une fois que le document est chargé en mémoire, on charge le script.
window.onload=o.Menu.__Load__;Modifié par kristof (08 Aug 2006 - 00:08)
).
