Tom's Guide > Forum > Programmation > [Résolu]Cacher des blocs DIV à l'ouverture de la page.

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

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

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
yuna57   04-10-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 :

Code :
  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.                 {
  37.                     PcH = false;
  38.                 }
  39.             if ( PcH )
  40.                 {
  41.                     Pdiv.className = ( Pdiv.className == 'cachediv' ) ? '' : 'cachediv';
  42.                 }
  43.         }
  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.         }
  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.         }
  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 :

Code :
  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>


Message édité par yuna57 le 05-10-2007 à 21:02:58
Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
OmegaClaw   04-10-2007 à 21:58:19
- 0 +

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;


Message édité par OmegaClaw le 04-10-2007 à 21:59:26
Répondre à OmegaClaw
yuna57   05-10-2007 à 08:58:03
- 0 +

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.

Répondre à yuna57
OmaR   05-10-2007 à 11:17:51
- 0 +

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

Et quand ils ont cliqué display: block;

Répondre à OmaR
yuna57   05-10-2007 à 20:10:19
- 0 +

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.


Message édité par yuna57 le 05-10-2007 à 20:55:47
Répondre à yuna57
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > [Résolu]Cacher des blocs DIV à l'ouverture de la page.
Aller à :

Il y a 1339 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,467 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens