Problème de menu en cascade avec Firefox

Problème de menu en cascade avec Firefox - HTML/CSS - Programmation

Marsh Posté le 08-11-2007 à 18:50:28    

Bonjour à tous,
 
J'ai un gros problème de compatibilité d'un script sur Firefox...
Voila, je suis chargé de réaliser un site pour une asso et je voulais mettre un menu en cascade pour la navigation.
J'ai trouvé un script sympa qui utilise un tableaux et pas les CSS. J'ai lu que c'était mieux avec les CSS, mais je suis plus à l'aise avec les balises <table>, <tr>, <td>, etc...
Ce dernier fonctionne très bien sur IE, mais les sous menus n'apparaissent pas sur FF.  :sweat:  
 
J'ai beau avoir bidouiller quelques trucs, rien ne bouge... Faut dire aussi que je suis pas une flèche en javascript  :lol:  
Je vous laisse les codes en espérant que vous puissiez m'aider pour que ça marche aussi sur Firefox...  
Merci d'avance
 
 

Citation :


<script type="text/javascript">
document.onmouseover = openIt  
 
function openIt() {
var items = 7 ;
currEl = window.event.toElement
if (currEl.className == "barItem" ) {
id = currEl.id + "box"  
showBox = document.getElementById(id)  
showBox.style.display = "block"  
}  
 
for (i=1; i<=items; i++) {
openItem="item" + i + "box"
elOpen = document.getElementById(openItem)
if ((elOpen.style.display == "block" )&&(elOpen != showBox))  
elOpen.style.display = "none"  
 
if (currEl.className == "closeIt" ) { elOpen.style.display = "none" }  
}
}
</script>


 
 

Citation :

<body class="closeIt">
 
<p><a name="1"></a></p>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8" align="center" valign="middle" nowrap><img src=".jpg" alt="" width="600" height="225" border="0" usemap="#MAP"></td>
</tr>
<tr bgcolor="#CCCCCC" class="barItem">
<!-- Menu Bar Item 1 -->
<td align="left" nowrap valign="top">| <a href=".html" class="barItem" id="item1">&</a> |<br>
<table id="item1box" class="box" style="display:none">
</table>
</td>
<!-- Menu Bar Item 2 -->
<td align="left" nowrap valign="top">| <a id="item2" class="barItem"></a> |<br>
<table id="item2box" class="box" style="display:none">
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
</table>
</td>
<!-- Menu Bar Item 3 -->
<td align="left" nowrap valign="top">| <a id="item3" class="barItem"></a> |<br>
<table id="item3box" class="box" style="display:none">
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
</table>
</td>
<!-- Menu Bar Item 4 -->
<td align="left" nowrap valign="top">|<a id="item4" class="barItem"></a> |<br>
<table id="item4box" class="box" style="display:none">
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
</table>
</td>
<!-- Menu Bar Item 5 -->
<td align="left" nowrap valign="top">| <a href=".html" id="item5" class="barItem"></a> |<br>
<table id="item5box" class="box" style="display:none">
</table>
</td>
<!-- Menu Bar Item 6 -->
<td align="left" nowrap valign="top">| <a id="item6" class="barItem"></a> |<br>
<table id="item6box" class="box" style="display:none">
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
<tr>
<td><a href=".html" class="cc"></a></td>
</tr>
</table>
</td>
<!-- Menu Bar Item 7 -->
<td align="left" nowrap valign="top">| <a href=".html" id="item7" class="barItem"></a> |<br>
<table id="item7box" class="box" style="display:none">
</table>
</td>
<!-- End of Menu Bar Items -->
<td colspan="2" align="left" valign="top" nowrap></td>
</tr>
</table>
 
</body>

Reply

Marsh Posté le 08-11-2007 à 18:50:28   

Reply

Marsh Posté le 08-11-2007 à 23:03:07    

"currEl = window.event.toElement " c'est du IE only ;)
 
essaye un truc comme ca :

Code :
  1. document.onmouseover = openIt;
  3. function openIt (e)
  4. {
  5. var items = 7;
  6. e =  e || window.event;
  7. var currEl = e.relatedTarget || e.fromElement;
  8. ...
  9. ...
  10. ...


 
Et, si je puis me permettre bien sûr, le javascript est un langage assez cool sur la syntaxe, mais pour progresser il faut prendre certaines bonnes habitudes, comme par exemple ne pas oublier le ";" en fin de ligne (dit NON au BASIC-like ^^), et définir les variables par le préfixe qui va bien, à savoir "var".
 
Bonne chance :)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 09-11-2007 à 00:59:23    

Salut,
Merci bien de ta réponse, j'ai repris un peu d'espoir... Effectivement ça marche maintenant aussi avec Firefox.
Les sous menus apparaissent quand on les survole mais (j'ai l'impresion qu'il y a toujours un "mais" quand on débute... :heink: ), le "rollover" est décalé, sur IE et FF !!
C'est à dire que quand on passe le pointeur sur le menu, il se passe plus rien, il faut décalé le pointeur entre les colonnes du tableau qui contient les menus. Je sais pas si je me fais bien comprendre. Je pourrais mettre ça en ligne pour que tu puisses regarder si ça t'intéresse...
Du coup je comprend plus...
 
Je te remet le script modifié avec ton truc, si tu peux me dire si me je suis pas cracké :
 

Citation :


document.onmouseover = openIt;
 
function openIt (e)
{
var items = 7;
e =  e || window.event;
var currEl = e.relatedTarget || e.fromElement;
   if (currEl.className == "barItem" ) {
     id = currEl.id + "box"  
      showBox = document.getElementById(id)  
       showBox.style.display = "block"  
       }          
  for (i=1; i<=items; i++) {
    openItem="item" + i + "box"
      elOpen = document.getElementById(openItem)
        if ((elOpen.style.display == "block" )&&(elOpen != showBox))  
          elOpen.style.display = "none"  
 
    if (currEl.className == "closeIt" ) { elOpen.style.display = "none"  }  
   }
}


 
Et merci bien aussi pour tes conseils sur la synthaxe de javascript. Je vais tacher de faire gaffe.
@ +

Reply

Marsh Posté le 09-11-2007 à 09:23:50    

en fait c normal puisque tu places ton evenement "onmouseover" sur l'element "document", et il suffit que tu es un texte ou un bloc ou ce que tu veux qui ne soit pas un element "document" (càd tout en fait :D) pour que l'event ne se déclenche pas :)

 

Ce que tu peux essayer c de placer ton onmouseover sur un autre element, dans ton cas à priori ca serait les elements TABLE.
Pour éviter les 30 tonnes de texte à taper tu peux essayer ca :

Code :
  1. var initialisation = function ()
  2. {
  3.   var tableau = document.getElementsByTagName ("TABLE" );  // renvoi un pseudo-tableau contenant tt les elements TABLE de ton document
  4.   for (var i = 0; i < tableau.length; tableau[i++].onmouseover = openIt);
  5. }
  7. ...
  8. ...
  10. document.onload = initialisation;
 

Comme tu le constates ya une feinte ! Sachant que le script est situé au-dessus (pour schématiser ;)) du code HTML, ce dernier n'existe pas encore (pas encore chargé et parsé par le browser) si tu exécutes la mise en place de l'évenement, car il ne trouvera alors AUCUNE table dans le document, puisque ca n'a pas été chargé :)
Donc il faut que à la fin de ton code javascript, tu dois lui donner la fonction qui doit s'executer lorsque la page est chargée ("onload" ), ainsi tu accedes à tt les elements de ta page.

 

good luck :)


Message édité par SICKofitALL le 09-11-2007 à 09:37:34

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 09-11-2007 à 09:31:16    

D'un autre côté, l'utilisation d'un menu déroulant à plusieurs niveaux est extrêmement déconseillée pour des raisons d'usabilité et d'accessibilité. Si c'est absolument nécessaire, on se limitera à un seul niveau, mais le mieux est de ne pas du tout les utiliser...

Reply

Marsh Posté le 14-11-2007 à 21:00:37    

Bonjour à tous,
Merci beaucoup pour vos réponses, ça m'a bien aidé.
@+

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed