Votre question

[Résolu]Cacher des blocs DIV à l'ouverture de la page.

Tags :
  • Script
  • Programmation
Dernière réponse : dans Programmation
4 Octobre 2007 18:13:19

Tout dabord, bonjour à tous !
Après quelques recherches sur le net, j'ai trouvé un script sympa qui permet via un lien d'ouvrir et de fermer un bloc DIV en JavaScript. Jusque-là, tout va bien. Mais, j'ai voulu, pour le design de mon site, que les blocs restent cachés à l'ouverture de la page. Malheureusement, après tout ce que j'ai fais, je n'ai pas réussi à avoir ce que je voulais. J'ai décidé donc de faire appel à vous, qui sait, peut-être que j'ai raté une étape.

Voici le code à mettre entre les balises Head :
  1. <style type="text/css" media="all">
  2. /* Ce style CSS ne dois pas être enlevé, sinon les divs ne se cacherons pas ... */
  3. .cachediv {
  4. visibility: hidden;
  5. overflow: hidden;
  6. height: 1px;
  7. margin-top: -1px;
  8. position: absolute;
  9. }
  10. </style>
  11. <!-- Script créé par KevBrok ;-) -->
  12. <script type="text/javascript">
  13. /*
  14. * Montre / Cache un div
  15. */
  16. function DivStatus( nom, numero )
  17. {
  18. var divID = nom + numero;
  19. if ( document.getElementById && document.getElementById( divID ) ) // Pour les navigateurs récents
  20. {
  21. Pdiv = document.getElementById( divID );
  22. PcH = true;
  23. }
  24. else if ( document.all && document.all[ divID ] ) // Pour les veilles versions
  25. {
  26. Pdiv = document.all[ divID ];
  27. PcH = true;
  28. }
  29. else if ( document.layers && document.layers[ divID ] ) // Pour les très veilles versions
  30. {
  31. Pdiv = document.layers[ divID ];
  32. PcH = true;
  33. }
  34. else
  35. {
  36.  
  37. PcH = false;
  38. }
  39. if ( PcH )
  40. {
  41. Pdiv.className = ( Pdiv.className == 'cachediv' ) ? '' : 'cachediv';
  42. }
  43. }
  44.  
  45. /*
  46. * Cache tous les divs ayant le même préfixe
  47. */
  48. function CacheTout( nom )
  49. {
  50. var NumDiv = 1;
  51. if ( document.getElementById ) // Pour les navigateurs récents
  52. {
  53. while ( document.getElementById( nom + NumDiv) )
  54. {
  55. SetDiv = document.getElementById( nom + NumDiv );
  56. if ( SetDiv && SetDiv.className != 'cachediv' )
  57. {
  58. DivStatus( nom, NumDiv );
  59. }
  60. NumDiv++;
  61. }
  62. }
  63. else if ( document.all ) // Pour les veilles versions
  64. {
  65. while ( document.all[ nom + NumDiv ] )
  66. {
  67. SetDiv = document.all[ nom + NumDiv ];
  68. if ( SetDiv && SetDiv.className != 'cachediv' )
  69. {
  70. DivStatus( nom, NumDiv );
  71. }
  72. NumDiv++;
  73. }
  74. }
  75. else if ( document.layers ) // Pour les très veilles versions
  76. {
  77. while ( document.layers[ nom + NumDiv ] )
  78. {
  79. SetDiv = document.layers[ nom + NumDiv ];
  80. if ( SetDiv && SetDiv.className != 'cachediv' )
  81. {
  82. DivStatus( nom, NumDiv );
  83. }
  84. NumDiv++;
  85. }
  86. }
  87. }
  88.  
  89. /*
  90. * Montre tous les divs ayant le même préfixe
  91. */
  92. function MontreTout( nom )
  93. {
  94. var NumDiv = 1;
  95. if ( document.getElementById ) // Pour les navigateurs récents
  96. {
  97. while ( document.getElementById( nom + NumDiv) )
  98. {
  99. SetDiv = document.getElementById( nom + NumDiv );
  100. if ( SetDiv && SetDiv.className != '' )
  101. {
  102. DivStatus( nom, NumDiv );
  103. }
  104. NumDiv++;
  105. }
  106. }
  107. else if ( document.all ) // Pour les veilles versions
  108. {
  109. while ( document.all[ nom + NumDiv ] )
  110. {
  111. SetDiv = document.all[ nom + NumDiv ];
  112. if ( SetDiv && SetDiv.className != '' )
  113. {
  114. DivStatus( nom, NumDiv );
  115. }
  116. NumDiv++;
  117. }
  118. }
  119. else if ( document.layers ) // Pour les très veilles versions
  120. {
  121. while ( document.layers[ nom + NumDiv ] )
  122. {
  123. SetDiv = document.layers[ nom + NumDiv ];
  124. if ( SetDiv && SetDiv.className != '' )
  125. {
  126. DivStatus( nom, NumDiv );
  127. }
  128. NumDiv++;
  129. }
  130. }
  131. }
  132.  
  133. /*
  134. * Inverse les divs: Cache les divs visible et montre le divs cachés :)
  135. */
  136. function InverseTout( nom )
  137. {
  138. var NumDiv = 1;
  139. if ( document.getElementById ) // Pour les navigateurs récents
  140. {
  141. while ( document.getElementById( nom + NumDiv ) )
  142. {
  143. SetDiv = document.getElementById( nom + NumDiv );
  144. DivStatus( nom, NumDiv );
  145. NumDiv++;
  146. }
  147. }
  148. else if ( document.all ) // Pour les veilles versions
  149. {
  150. while ( document.all[ nom + NumDiv ] )
  151. {
  152. SetDiv = document.all[ nom + NumDiv ];
  153. DivStatus( nom, NumDiv );
  154. NumDiv++;
  155. }
  156. }
  157. else if ( document.layers ) // Pour les très veilles versions
  158. {
  159. while ( document.layers[ nom + NumDiv ] )
  160. {
  161. SetDiv = document.layers[ nom + NumDiv ];
  162. DivStatus( nom, NumDiv );
  163. NumDiv++;
  164. }
  165. }
  166. }
  167. </script>


Et voici le code à mettre entre la balise Body :
  1. <a href="javascript:DivStatus( 'mondiv', '1' )">Ouvrir/Fermer le Bloc 1</a><br />
  2. <div name="mondiv1" id="mondiv1"><div style="border: 3px dashed white; background-color: #cce698; margin-bottom: 2px;">Voilà ce que l'on met dans le bloc...</div></div>

Autres pages sur : resolu cacher blocs div ouverture page

4 Octobre 2007 21:58:19

le code CSS, visibility: hidden; cache le bloc mais l'espace est réservé !

donc il faut utiliser, display: none; pour supprimé l'espace réservé,

et pour l'afficher , display: block;
5 Octobre 2007 08:58:03

Merci de ton aide.
Mais, j'ai testé, et à l'ouverture de la page, les blocs restent ouvertes.
Moi ce que je veux, c'est que les blocs restent fermés, et que le visiteur clique sur les liens ( qui permettent d'ouvrir et de fermer les blocs, sur ça, j'ai pas de problème ) pour ouvrir le bloc en question.
Contenus similaires
a c 232 L Programmation
5 Octobre 2007 11:17:51

Et bien, au départ tu mets display: none;

Et quand ils ont cliqué display: block;
5 Octobre 2007 20:10:19

Désolé, je pense que j'ai du mal à saisir. Je veux bien mettre les display, mais où, je suis totalement perdu. Si je mets ca dans le CSS, ca n'apporte pas grand chose, ca ne marche pas.
Merci d'avance.

PS: J'ai trouvé la solution. Il suffit de mettre class='cachediv' dans le bloc qu'on veut garder fermé.
Merci quand même.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS