[resolu] afficher/masquer fonctionne pas sous firefox

afficher/masquer fonctionne pas sous firefox [resolu] - HTML/CSS - Programmation

Marsh Posté le 01-10-2010 à 14:24:21    

Bonjour,
Je suis nouveau sur la liste alors ma question vous paraîtra peut être évidente. :pfff:  
J'ai fais un script pour masquer/afficher des div avec des boutons radio, ça fonctionne sous ie mais rien sous firefox (ni chrome)  :cry:  
merci de votre aide  :bounce:  
 
voici le code

Code :
  1. <HTML>
  2. <HEAD>
  3. <!-- Menu  html/js/ex/5.bk Hiding Table Columns -->
  5. <link rel="stylesheet" type="text/css" href="../../default.css">
  6. <TITLE>JavaScript - Hiding Table Columns</TITLE>
  8. <style type="text/css">
  9. #progmenu { position:absolute; top:0; left:0; visibility:hidden; }
  10. #miscmenu { position:absolute; top:0; left:0; visibility:hidden; }   
  11. .TitleMenu { width:110; }
  12. .TitleMenuItem { }
  13. </style>
  15. <script language="javascript">
  16. var showMode = 'block';//'table-cell';
  17. if (document.all) showMode='block';
  18. function toggleVis(radio){
  19.   name=radio;
  20. radio   = document.forms['tcol'].elements[radio];
  21. for(j = 0; j < radio.length; j++){
  22.     if (radio[j].checked){
  23.       max=j;
  24.     }
  25.   }
  26.     for (k=0;k<4;k++){
  27.       cells = document.getElementsByName('div'+radio[k].value);
  28.    if (max!=4){
  29.     if (k==max)
  30.         mode  = showMode;
  31.       else
  32.         mode  = 'none';
  33.       }else{
  34.         mode  = showMode;
  35.       }
  36.    for(j = 0; j < cells.length; j++)
  37.         cells[j].style.display=mode;
  38.   }
  39. }
  40. </script>
  41. </HEAD>
  43. <BODY MARGINWIDTH=0 MARGINHEIGHT=0 onload="init()">
  45. <form name="tcol" onsubmit="return false">
  46. <table border=0 bgcolor="#ffeecc">
  47. <tr><td>
  48. Show columns
  49. <input type=radio name="col1" value="col1" onclick="toggleVis(this.name)"> 1
  50. <input type=radio name="col1" value="col2" onclick="toggleVis(this.name)"> 2
  51. <input type=radio name="col1" value="col3" onclick="toggleVis(this.name)"> 3
  52. <input type=radio name="col1" value="col4" onclick="toggleVis(this.name)"> 4
  53. <input type=radio name="col1" value="all" onclick="toggleVis(this.name)" checked> all
  54. </td></tr>
  55. </table>
  56. </form>
  58. <div id="divcol1" style="border: 2px solid rgb(209, 29, 67); padding: 5px; margin-top: 5px;">
  59.       <p>#1 : Ici mon texte</p>
  60. </div>
  61. <div id="divcol2" style="border: 2px solid rgb(209, 29, 67); padding: 5px;">
  62.       <p>#2 : Ici mon texte</p>
  63. </div>
  64. <div id="divcol3" style="border: 2px solid rgb(209, 29, 67); padding: 5px;">
  65.       <p>#3 : Ici mon texte</p>
  66. </div>
  67. <div id="divcol4" style="border: 2px solid rgb(209, 29, 67); padding: 5px;">
  68.       <p>#4 : Ici mon texte</p>
  69. </div>
  71. </BODY>
  72. </HTML>
  73. </head>


Message édité par tucdual le 04-10-2010 à 09:40:23
Reply

Marsh Posté le 01-10-2010 à 14:24:21   

Reply

Marsh Posté le 01-10-2010 à 16:15:25    

Heu, c'est peut-être parce que nous sommes en 2010, et que document.all n'est plus utilisé depuis 10 ans (et surtout ne fonctionne que sous IE)

Message cité 1 fois
Reply

Marsh Posté le 01-10-2010 à 18:49:19    

David Boring a écrit :

Heu, c'est peut-être parce que nous sommes en 2010, et que document.all n'est plus utilisé depuis 10 ans (et surtout ne fonctionne que sous IE)


Sans doute mais même sans cette ligne rien sous firefox  :??:

Reply

Marsh Posté le 03-10-2010 à 08:54:59    

Bonjour
Voici la solution :

Code :
  1. <script langage="Javascript">
  2. <!--
  3. function load(x)
  4. {
  5. if (x == 1)
  6. {
  7. document.getElementById('test1').innerHTML = "#1 : Ici mon texte";
  8. exit;
  9. }
  11. if (x == 2)
  12. {
  13. document.getElementById('test1').innerHTML = "#2 : Ici mon texte";
  14. exit;
  15. }
  17. if (x == 3)
  18. {
  19. document.getElementById('test1').innerHTML = "#3 : Ici mon texte";
  20. exit;
  21. }
  23. if (x == 4)
  24. {
  25. document.getElementById('test1').innerHTML = "#1 : Ici mon texte<br>#2 : Ici mon texte<br>#3 : Ici mon texte";
  26. exit;
  27. }
  28. }
  29. //-->
  30. </script>
  31. <table bgcolor="black">
  32. <tr>
  33. <td><font color="yellow">#1 :<input type=radio OnClick="load(1);" name="col"></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  34. <td><font color="yellow">#2 :<input type=radio OnClick="load(2);" name="col"></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  35. <td><font color="yellow">#3 :<input type=radio OnClick="load(3);" name="col"></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  36. <td><font color="yellow">all :<input type=radio OnClick="load(4);" name="col"></font></td>
  37. </tr>
  38. </table>
  39. <br><span id="test1"></span>


 
Fais en bon usage !
Ensuite tu vois pour les <div> : document.getElementById('test1').innerHTML = "<div id='Mondiv'></div>";
@++


Message édité par cetplus le 03-10-2010 à 09:00:22
Reply

Sujets relatifs:

Leave a Replay

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