Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
888 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de menu en cascade avec Firefox

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Problème de menu en cascade avec Firefox

n°1639490
guitou61
Posté le 08-11-2007 à 18:50:28  profilanswer
 

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>

mood
Publicité
Posté le 08-11-2007 à 18:50:28  profilanswer
 

n°1639636
SICKofitAL​L
misanthrope
Posté le 08-11-2007 à 23:03:07  profilanswer
 

"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...
n°1639682
guitou61
Posté le 09-11-2007 à 00:59:23  profilanswer
 

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.
@ +

n°1639726
SICKofitAL​L
misanthrope
Posté le 09-11-2007 à 09:23:50  profilanswer
 

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...
n°1639731
FlorentG
Unité de Masse
Posté le 09-11-2007 à 09:31:16  profilanswer
 

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...

n°1643031
guitou61
Posté le 14-11-2007 à 21:00:37  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Problème de menu en cascade avec Firefox

 

Sujets relatifs
probléme avec la fonction getDate()Problème OLE DB avec Delphi 7
Probleme avec ob_start [RESOLU]Débutant inside : Problème de 0 à gauche dans un nombre.
Problème de date avec macroProblème avec l'URL Rewriting.
Problème Lien sur un bouton[Flash AS2] Problème de preload en XML
Problème de class et d'attributprobleme avec ShellExecute
Plus de sujets relatifs à : Problème de menu en cascade avec Firefox

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.035 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR