Menu en cascade ne redimensionne pas le calque conteneur sous firefox

Menu en cascade ne redimensionne pas le calque conteneur sous firefox - HTML/CSS - Programmation

Marsh Posté le 01-02-2007 à 21:17:16    

Bonjour à tous!
 
Je devais faire un menu en cascade sans javascript (j'avais déja une fonction javascript pour personaliser des checkbox et à peine un autre code javascript était àjouté, mes checkbox foiraient...). J'ai donc opté pour la solution suivante :
 

Code :
  1. <div id="un" style="cursor:pointer;display:block"><a href="#" onClick="trois.style.display='block'; deux.style.display='block'; un.style.display='none'">+</a></div>
  2. <div id="deux" style="cursor:pointer;display:none"><a href="#" onClick="trois.style.display='none'; deux.style.display='none'; un.style.display='block'">-</a> </div>
  3. <div id="trois" style="display:none">texte</div>


 
Est-ce que d'après vous c'est une bonne solution? Elle marche sur IE et Firefox mais marche-t-elle sur les autres navigateurs?
 
Merci pour vos conseils!
 
Gaëtan
 
[EDIT] ce petit exemple de code marche sous firefox... mais pas quand je l'ai mis dans ma page...  :??: [/EDIT]


Message édité par g_bu le 02-02-2007 à 11:45:22
Reply

Marsh Posté le 01-02-2007 à 21:17:16   

Reply

Marsh Posté le 01-02-2007 à 22:09:57    

Code :
  1. onClick="trois.style.display='none'; deux.style.display='none'; un.style.display='block'"


 
Lol tu appels ça comment ?
 
Du JS, nonnn il aurait pas osé ;)  :whistle:  
 
Donc oui ceci est du JS
 
Et surement ça marche partout ;) http://perso.wanadoo.fr/k.fd/HFR/waveyicon7.gif

Reply

Marsh Posté le 01-02-2007 à 22:13:24    

Ouais pardon je me suis mal exprimé... je voulais dire que je ne voulais pas une fonction JS (je crois que c'était window.onload qui faisait foiré!)
 
Maintenant mon problème c'est que quand j'ai mis ce code dans ma page ça ne marche plus sous firefox.......

Reply

Marsh Posté le 01-02-2007 à 23:05:11    

Sous firefox j'arrive pas à faire marcher mon code qui modifie mes case à cocher et mon truc de cascade...
 
bon... je vous montre mon code mais je doute que qqun aura le courage de le lire... voici la fonction qui affiche mes formulaire :

Code :
  1. function form($id_form, $langue) {
  2. $tableau = array("a", "b", "c", "d", "e", "f", "g", "h", "i",
  3. "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
  4. "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8",
  5. "9" );
  6. $valeurs_aleatoires = array_rand($tableau, 10);
  7. $name_form = "";
  8. foreach($valeurs_aleatoires as $i)
  9. {
  10.   $name_form = $name_form . $tableau[$i];
  11. }
  12. include('Connections/conn.php');
  13. $query_Recordset_formulaire = sprintf("SELECT * FROM t_formulaire WHERE(for_lan_id = '$langue' AND for_id = '$id_form')" );
  14. $Recordset_formulaire = mysql_query($query_Recordset_formulaire, $conn) or die(mysql_error());
  15. $row_Recordset_formulaire = mysql_fetch_assoc($Recordset_formulaire);
  16. $totalRows_Recordset_formulaire = mysql_num_rows($Recordset_formulaire);
  18. $query_Recordset_for_act = sprintf("SELECT * FROM t_for_act WHERE for_id = '$id_form'" );
  19. $Recordset_for_act = mysql_query($query_Recordset_for_act, $conn) or die(mysql_error());
  20. $totalRows_Recordset_for_act = mysql_num_rows($Recordset_for_act);
  21. $formulaire  = "<blockquote>";
  22. $formulaire .= "<form method='post' name='".$name_form."' action='result.php'>";
  23. $formulaire .= "<p id='NewCB'>";
  24. $formulaire .= "<b>".$row_Recordset_formulaire['for_titre']."</b>";
  25. $formulaire .= "<table border='0' cellspacing='0' cellpadding='0'>";
  26. $i=0;
  27. while($row_Recordset_for_act = mysql_fetch_assoc($Recordset_for_act)){
  28.  $i++;
  29.  $act_id = $row_Recordset_for_act['act_id'];
  30.  $query_activite = mysql_query("SELECT * FROM t_activite WHERE act_id='$act_id' AND act_lan_id = $langue" );
  31.  $row_query_activite = mysql_fetch_array($query_activite);
  32.  $formulaire .=  "<tr><td><label><input type='checkbox' name='id_act[]' value='".$row_query_activite['act_id']."' />".$row_query_activite['act_titre']."</label><br>";
  33.   //recherche de sous activité
  34.   $req_sous_activite = mysql_query("SELECT * FROM t_sous_activite WHERE acs_act_id = '$act_id' AND acs_lan_id = $langue" );
  35.   $total_sous_activite = mysql_num_rows($req_sous_activite);
  36.   if($total_sous_activite != 0){
  37.    $formulaire .= "<div id='detail".$name_form.$i."' style='display:none;margin-left:25px'>";
  38.    while($tab_sous_activite = mysql_fetch_array($req_sous_activite)){
  39.     $nom_sous_activite = $tab_sous_activite['acs_titre'];
  40.     $formulaire .= "<font color='#535353'>".$nom_sous_activite."</font><br>";
  41.    }
  42.    $formulaire .= "<br></div>";
  43.   }
  44.   $formulaire .= "</td><td valign='top'>";
  45.   if($total_sous_activite != 0){
  46.    $formulaire .= "<div id='plus".$name_form.$i."' style='display:block;margin-left:10px'><a href='#' onClick=\"detail".$name_form.$i.".style.display='block'; moins".$name_form.$i.".style.display='block'; plus".$name_form.$i.".style.display='none'\"><img src='images/images/plus.gif' border='0'></a></div><div><div id='moins".$name_form.$i."' style='display:none;margin-left:10px'><a href='#' onClick=\"detail".$name_form.$i.".style.display='none'; moins".$name_form.$i.".style.display='none'; plus".$name_form.$i.".style.display='block'\"><img src='images/images/minus.gif' border='0'></a></div>";
  47.   }
  48.   $formulaire .= "</td></tr>";
  49. }
  51. $formulaire .= "</table>";
  52. $formulaire .= "<table border='0' cellspacing='0' cellpadding='0'>
  53.       <tr>
  54.      <td width='3'><img src='images/submit1.gif' width='3' height='21'></td>
  55.      <td background='images/submit2.gif' id='send'><a href='javascript:document.".$name_form.".submit();'> Recherchez votre spécialiste </a></td>
  56.      <td width='3'><img src='images/submit3.gif' width='3' height='21'></td>
  57.       </tr>
  58.     </table>";
  59. $formulaire .= "</p>";
  60. $formulaire .=  "</form>";
  61. $formulaire  .= "</blockquote>";
  62. echo $formulaire;
  63. }


 
et voici mon code JS pour modifier l'affichage des checkbox :
 

Code :
  1. <script language="javascript">
  2. function chgCB(){ 
  3. ALL = document.getElementsByTagName('p');
  4. for (j=0;j < ALL.length;j++){
  5.  CHKB= ALL[j].getElementsByTagName('input');
  6.  for(i=0; i < CHKB.length; i++){   
  7.   if(CHKB[i].type == "checkbox" ){     
  8.    IMG = document.createElement('img');     
  9.    CHKB[i].parentNode.insertBefore(IMG, CHKB[i]);     
  10.    IMG.src = "nocheck.gif";     
  11.    if(CHKB[i].checked  == true) IMG.src = "check.gif";     
  12.    if(CHKB[i].disabled == true) IMG.src = "nocheck.gif";     
  13.    else{ // Les comportements de changement d'état ne sont appliqués que si la checkbox est cliquable !         
  14.     CHKB[i].onchange = function(){         
  15.      IMG = this.parentNode.getElementsByTagName('img')[0];         
  16.      if(this.checked == true) IMG.src = 'check.gif'         
  17.      else IMG.src = 'nocheck.gif'       
  18.     }       
  19.     if(!window.sidebar){         
  20.      CHKB[i].parentNode.onclick = function(){           
  21.       CHK = this.getElementsByTagName('input')[0];           
  22.       CHK.checked = (CHK.checked == true) ? false : true;           
  23.       CHK.onchange()         
  24.      }       
  25.     }     
  26.    }     
  27.    CHKB[i].style.visibility = "hidden";     
  28.    CHKB[i].style.position   = "absolute";   
  29.   } 
  30.  }
  31. }
  32. }
  33. window.onload = chgCB;
  34. </script>


 
Dès que j'ajoute mes calques pour mon espèce de menu à plusieurs niveaux, mes checkbox ne sont plus modifiée et mon "menu" ne fonctionne pas....... (dans firefox je précise... dans IE tous fonctionne parfaitement!!!)


Message édité par g_bu le 01-02-2007 à 23:21:40
Reply

Marsh Posté le 02-02-2007 à 08:59:19    

window.onload = chgCB <== là tu ecrase le window.onload par defaut
de plus le window.onload est systématiquement écrasé par le onload du body s'il y a quelque chose dedans le mieux est d'utiliser les events c'est moins crade. Et via une fonction comme addEvent qui est crossBrowser (oublions IE5 Mac)
 

Code :
  1. function addEvent( obj, type, fn )
  2. {
  3. if (obj.addEventListener)
  4.  obj.addEventListener( type, fn, false );
  5. else if (obj.attachEvent)
  6. {
  7.  obj["e"+type+fn] = fn;
  8.  obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  9.  obj.attachEvent( "on"+type, obj[type+fn] );
  10. }
  11. }
  13. addEvent(window, "load", chgCB)
  14. addEvent(window, "load", autrefonction)


Reply

Marsh Posté le 02-02-2007 à 09:04:36    

Bon j'ai déjà réussi à refaire marché mes checkbox personalisées. A la ligne 23 (de ma fonction d'affichage de formulaire) j'avais un <p id='NewCb'> je l'ai viré (ainsi que la ligne 59) et à la balise table de la ligne 25 j'ai ajouté id='NewCb'...
Mes checkbox marche mais toujours pas mon menu déroulant... Je vous donne quelques détails: A la ligne 46 je place deux image (un "+" visible dès le départ et un - invisible) Normalement dès que l'on clique sur le + il disparait, le - apparait et le calque que j'affiche de la ligne 37 à 42 devrait également apparaître. Cela ne fonctionne pas sous Firefox...

Reply

Marsh Posté le 02-02-2007 à 09:15:37    

On est pas à la carte au trésor ici, tu reposte ton code mais en version généré pas le PHP :fou: :fou: :fou: :fou:

Reply

Marsh Posté le 02-02-2007 à 09:34:26    

ouais c'est ce que j'étais en train de préparer et tester en dehors de ma page... donc voici la partie du code générée par ma fonction php :
 

Code :
  1. <table border='0' cellspacing='0' cellpadding='0'>
  2. <tr>
  3.  <td>
  4.   <input type='checkbox' name='ok' value='7' />porte-clés<br>
  5.  </td>
  6.  <td valign='top'></td>
  7. </tr>
  8. <tr>
  9.  <td>
  10.   <input type='checkbox' name='ok' value='8' />vide-poche<br>
  11.   <div id='detailbgklmnst025' style='display:none;margin-left:25px'><font color='#535353'>Test sous activité</font><br><br></div></td>
  12.  <td valign='top'>
  13.   <div id='plusbgklmnst025' style='display:block;margin-left:10px'><a href='#' onClick="detailbgklmnst025.style.display='block'; moinsbgklmnst025.style.display='block'; plusbgklmnst025.style.display='none'"><img src='images/images/plus.gif' border='0'></a></div>
  14.   <div><div id='moinsbgklmnst025' style='display:none;margin-left:10px'><a href='#' onClick="detailbgklmnst025.style.display='none'; moinsbgklmnst025.style.display='none'; plusbgklmnst025.style.display='block'"><img src='images/images/minus.gif' border='0'></a></div>
  15.  </td>
  16. </tr><tr>
  17.  <td><input type='checkbox' name='ok' value='9' />interphone<br>
  18.  </td><td valign='top'></td>
  19. </tr>
  20. </table>


 
J'ai copier ça dans une simple page HTML et ça ne marchait toujours pas sous Firefox...
J'ai essayé de virer la première ligne :
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


 
et là ça marche! j'ai tous de suite essayé sur ma page... ça marche également mais les caractères deviennent plus gros et tous se décale...  :??:  
 
Quelqu'un à une idée? Merci bcp!

Reply

Marsh Posté le 02-02-2007 à 10:28:04    

Ah j'ai trouvé... enfin presque! Au moins quand je clique sur le plus il se passe qqch. En fait il fallait utiliser le document.getElementById() dans mon onClick... Le problème maintenant c'est que des fois ça marche et des fois pas et après il y a tous qui se décale...
 
[EDIT]
C'est bon ça marche aussi sous Firefox (j'ai refait un peu mon tableau).  :bounce:  Mais il reste tout de même un problème :
Mon tableau avec ces menus en cascade se trouve dans un calque conteneur. Lorsque j'ouvre mes cascades, Firefox ajoute une scroll à mon calque au lieux de l'agrandir... Est-ce que quelqu'un à une idée pour qu'il s'agrandisse au lieux d'ajouter une scroll? Aucune hauteur (height) n'est déclarée pour ce calque conteneur!  
Si quelqu'un à une proposition je suis preneur!  
Merci à tous!!!  ;)  
[/EDIT]


Message édité par g_bu le 03-02-2007 à 23:17:35
Reply

Marsh Posté le 20-02-2007 à 22:46:44    

Salut,
 
Tu peux me rappeler où tu as pris le script de personnalisation des checkbox s'il te plaît ?


---------------
Consultant SEO
Reply

Marsh Posté le 20-02-2007 à 22:46:44   

Reply

Marsh Posté le 21-02-2007 à 10:25:25    

'tain le code PHP [:johneh] Dix balles qu'on peut le rendre 50 fois plus rapide [:johneh] Avec un peu d'output buffering pour la concaténation de fou. Et en mettant de joli CSS dans un _fichier_... Et faire le JS de manière non-obstrusive

Reply

Sujets relatifs:

Leave a Replay

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