masquer les divs au chargement de la page - Forum Javascript / DOM / Ajax

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  Javascript / DOM / Ajax (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  masquer les divs au chargement de la page

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: masquer les divs au chargement de la page (Lu 1226 fois)

masquer les divs au chargement de la page
« sur: le 10-04-2007 a 16:39:15 »

bsketeur
Membre récent

Hors-Ligne

Sexe: Male

Messages: 17

bonjour a tous j'ai trouver un petit code pour faire un menu cliquable avec des div le seul problème c'est que le java script et moi ca fait deux.

j'aimerai savoir si il est possible de masquer des div au chargement et n'en laisser qu'une apparante

je vous laisse mon code ( lourd peu etre mais je vien juste de me mettre dessus)

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
   /*
   * Montre / Cache un div
   */
   function DivStatus( nom, numero )
      {
         var divID = nom + numero;
         if ( document.getElementById && document.getElementById( divID ) ) // Pour les navigateurs récents
            {
               Pdiv = document.getElementById( divID );
               PcH = true;
             }
         else if ( document.all && document.all[ divID ] ) // Pour les veilles versions
            {
               Pdiv = document.all[ divID ];
               PcH = true;
            }
         else if ( document.layers && document.layers[ divID ] ) // Pour les très veilles versions
            {
               Pdiv = document.layers[ divID ];
               PcH = true;
            }
         else
            {

               PcH = false;
            }
         if ( PcH )
            {
               Pdiv.className = ( Pdiv.className == 'cachediv' ) ? '' : 'cachediv';
            }
      }

   /*
   * Cache tous les divs ayant le même préfixe
   */
   function CacheTout( nom )
      {
         var NumDiv = 1;
         if ( document.getElementById ) // Pour les navigateurs récents
            {
               while ( document.getElementById( nom + NumDiv) )
                  {
                     SetDiv = document.getElementById( nom + NumDiv );
                     if ( SetDiv && SetDiv.className != 'cachediv' )
                        {
                           DivStatus( nom, NumDiv );
                        }
                     NumDiv++;
                  }
            }
         else if ( document.all ) // Pour les veilles versions
            {
               while ( document.all[ nom + NumDiv ] )
                  {
                     SetDiv = document.all[ nom + NumDiv ];
                     if ( SetDiv && SetDiv.className != 'cachediv' )
                        {
                           DivStatus( nom, NumDiv );
                        }
                     NumDiv++;
                  }
            }
         else if ( document.layers ) // Pour les très veilles versions
            {
               while ( document.layers[ nom + NumDiv ] )
                  {
                     SetDiv = document.layers[ nom + NumDiv ];
                     if ( SetDiv && SetDiv.className != 'cachediv' )
                        {
                           DivStatus( nom, NumDiv );
                        }
                     NumDiv++;
                  }
            }
      }

   /*
   * Montre tous les divs ayant le même préfixe
   */
   function MontreTout( nom )
      {
         var NumDiv = 1;
         if ( document.getElementById ) // Pour les navigateurs récents
            {
               while ( document.getElementById( nom + NumDiv) )
                  {
                     SetDiv = document.getElementById( nom + NumDiv );
                     if ( SetDiv && SetDiv.className != '' )
                        {
                           DivStatus( nom, NumDiv );
                        }
                     NumDiv++;
                  }
            }
         else if ( document.all ) // Pour les veilles versions
            {
               while ( document.all[ nom + NumDiv ] )
                  {
                     SetDiv = document.all[ nom + NumDiv ];
                     if ( SetDiv && SetDiv.className != '' )
                        {
                           DivStatus( nom, NumDiv );
                        }
                     NumDiv++;
                  }
            }
         else if ( document.layers ) // Pour les très veilles versions
            {
               while ( document.layers[ nom + NumDiv ] )
                  {
                     SetDiv = document.layers[ nom + NumDiv ];
                     if ( SetDiv && SetDiv.className != '' )
                        {
                           DivStatus( nom, NumDiv );
                        }
                     NumDiv++;
                  }
            }
      }

   /*
   * Inverse les divs: Cache les divs visible et montre le divs cachés :)
   */
   function InverseTout( nom )
      {
         var NumDiv = 1;
         if ( document.getElementById ) // Pour les navigateurs récents
            {
               while ( document.getElementById( nom + NumDiv ) )
                  {
                     SetDiv = document.getElementById( nom + NumDiv );
                     DivStatus( nom, NumDiv );
                     NumDiv++;
                  }
            }
         else if ( document.all ) // Pour les veilles versions
            {
               while ( document.all[ nom + NumDiv ] )
                  {
                     SetDiv = document.all[ nom + NumDiv ];
                     DivStatus( nom, NumDiv );
                     NumDiv++;
                  }
            }
         else if ( document.layers ) // Pour les très veilles versions
            {
               while ( document.layers[ nom + NumDiv ] )
                  {
                     SetDiv = document.layers[ nom + NumDiv ];
                     DivStatus( nom, NumDiv );
                     NumDiv++;
                  }
            }
      }
</script>
<style type="text/css">
   .cachediv {
      visibility: hidden;
      overflow: hidden;
      height: 1px;
      margin-top: -1px;
      position: absolute;
   }


</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#F0F0F0"></td>
</tr>
</table><br>
<table width="169" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="menu.png" width="169" height="21"></td>
</tr>
</table>
<table width="169" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="Style1" id="club" name="club">
<div onClick="javascript:DivStatus( 'menu', '1' )" style="margin-bottom: 2px; ; cursor: hand; text-align: left; font-family:"Comic Sans MS"; font-size:12px; background-color: #FFEE99;">
Le Club
</div>
</div>
<div name="menu1" id="menu1">
<div class="unnamed1" style="background-color: white; margin-bottom: 2px;">
   <a href="club/histo.php">L'Historique</a><br>
<a href="club/bureau.php">Le Bureau</a><br>
<a href="club/spons.php">Les Sponsors</a></div>
</div>
</div>

<div name="equipe" id="equipe">
<div class="unnamed1" onClick="javascript:DivStatus( 'menu', '2' )" style="margin-bottom: 2px; color: #FF9900;">
Les Equipes
</div>
</div>
<div name="menu2" id="menu2">
<div class="unnamed1" style="background-color: white; margin-bottom: 2px;">
   <a href="equipe/equipe.php">Les Equipes</a><br>
<a href="resultat.php">Les Résultats</a><br>
<a href="classement.php">Les Classement</a></div>
</div>
</div>

<div name="photo" id="photo">
<div class="unnamed1" onClick="javascript:DivStatus( 'menu', '3' )" style="margin-bottom: 2px; color: #FF9900;">
Les Photos
</div>
</div>
<div name="menu3" id="menu3">
<div class="unnamed1" style="background-color: white; margin-bottom: 2px;">
   <a href="photo/photo.php">Les Matchs</a><br>
<a href="photo/soiree.php">Les Soirées</a><br>
</div>
</div>

<div name="discu" id="discu">
<div class="unnamed1" onClick="javascript:DivStatus( 'menu', '4' )" style="margin-bottom: 2px; color: #FF9900;">
Discussion
</div>
</div>
<div name="menu4" id="menu4">
<div class="unnamed1" style="background-color: white; margin-bottom: 2px;">
   <a href="forum/index.php">Le forum</a>
</div>
</div></td>
</tr>
</table>
</body>
</html>