11528 sujets

JavaScript, DOM et API Web HTML5

Afficher/cacher une div [résolu]

Bonjour à tous,

Premièrement, j'ai jamais fait de javascript....

J'ai trouvé un bout de code JS pour afficher et cacher un div (ici avec juste du texte).
Tout marche très bien, cependant, j'aimerais trouver comment faire pour que par défaut, mon div soit caché lorsque l'on arrive sur la page.

Je vous montre le code :

<script type="text/javascript">
    <!--
function afficheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
  }

function cacheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
  }

cacheId('contenu');
// si JavaScript est disponible, cache le contenu dès le
// chargement de la page. Sans JavaScript, le contenu sera
// affiché.
    -->
</script>


<div class="clicTitre">
  <a href="javascript:afficheId('contenu')">En savoir plus</a>
</div>
<div class="contenant" id="contenu">
  <div class="clicCacher">
    <a href="javascript:cacheId('contenu');" class="fermer">Fermer</a>  </div>

  <p>XXXXXXXXXXXXXXXXX</p>
  <p>XXXXXXXXXXXXXXXXX</p>
  <p>XXXXXXXXXXXXXXXXX</p>
  <p>XXXXXXXXXXXXXXXXX</p>
  <p>XXXXXXXXXXXXXXXXX</p>
  <p>XXXXXXXXXXXXXXXXX</p>


</div>







.clicCacher
  {
  top: -20px;
  position: relative;
  text-align:right;
  }

.contenant
  {
	display : block;
	background: url(images/corps_y.jpg) repeat-y;
	padding-top: 0px;
	padding-left: 65px;
	padding-right: 65px;
  }
.fermer  {
	font-family: Arial, Helvetica, sans-serif;
	color: #993366;
	text-decoration: underline;
}


Merci pour votre aide.
Cordialement,
jeromeartemis.
Modifié par jeromeartemis (27 Jun 2009 - 17:22)
Visibility j'avais essayé, ca ne convenait pas, ca me créait un trou avant le pied de page.
Par contre display non, parfait. J'aurais du y penser plus tot.
MERCI beaucoup !
jeromeartemis a écrit :
Visibility j'avais essayé, ca ne convenait pas, ca me créait un trou avant le pied de page.


c'est effectivement le comportement normal de visibility. Il rend l'élément visible ou non, mais dans tous les cas "garde" de la place pour l'élément en question.
Laurie-Anne a écrit :
Bonjour,

Pour qu'il soit caché de base, il suffit de mettre display:none et/ou visibility:hidden dans le CSS.

Mauvaise idée: l'utilisateur n'ayant pas JavaScript activé n'aura pas accès à l'information. Le contenu doit donoc être masqué via JavaScript.
J'ai une autre solution a vous proposer pour que le div soit cacher au chargement de la page en fait il suffit de deplacer
la fonction "cacheID('contenu');" a la fin du script et de la metre
dans la balise body <body OnLoad="cacheId('contenu';">
et le tour est joué elle est cacher au depart
merci nova pour cette solution, en fait ça faisait un bail qu ej'essayai de sortir du conflit display: none, stle, et referencement, voilà c fait Smiley smile

seul petit hic, on voit les divs disparaitre à l'arrivée sur la page, aucune méthode plus rapide ? en externalisant le cacheId peut etre ?
Sujet clos
Aller à