digital-nation

Afficher et masquer des DIV

Posté le mercredi, 28 juin, 2006

Script Javascript et CSS d'affichage ou de masquage d'information

Je suis tombé par hasard sur une propriété JavaScript que je n'avais encore jamais utilisé : className ! De fait, je me suis un peu penché vers Google et j'ai pu découvrir quelques concepts assez sympathique de cette propriété notament afficher ou masquer une information contenue dans un DIV.

Information importante : j'utiliserais ici getElementById par simplicité d'écriture, mais celle-ci est tout a fait possible via l'objet document.forms['mon_formulaire'].element['mon_element']

Avant j'utilisais souvent cette routine de fonctionnalité :

function afficher(id_div) { document.getElementById(id_div).style.display = 'block'; }

function masquer(id_divv) { document.getElementById(id_divv).style.display = 'none'; }

Un cas classique n'est-il pas ? J'utilise simplement le display d'un style avec une valeur block (affiché) ou none (masquée). Ce qui était pratique car l'élement masqué laissait la place libre contrairement à la visibilité d'un style (style.visibility) avec une valeur sur hidden ou visible qui lui laissait l'élément "physiquement" dans une place de la page.

J'ai donc testé avec la propriété className une routine totalement identique :

function aff_class(id_3) { document.getElementById(id_3).className = 'affich_div'; }

function masq_class(id_4) { document.getElementById(id_4).className = 'masq_div'; }

Bien entendu j'ai dû y associer un CSS comportant les deux classes dites, à savoir :

.cache_div {

visibility: hidden;

overflow: hidden;

height: 0px;

}

.montre_div {

visibility: visible;

overflow: auto;

height: 100%;

}

Comme élément de base par défaut, je masquais les différents éléments. Donc j'ai attribué la propriété class="cache_div" à mes éléments.

Poussons un peu les choses plus loin... Comme dans un cas bien démontré, le Javascript n'est pas toujours nécessaire à l'affichage ou au masquage d'information. Il est tout a fait possible de cacher une information ou de la montrer sur un surlignage comme le démontre si bien le tutorial correspondant de Alsacréations.com librement inspiré d'un grand maître Eric Meyer.

Il vous appartient donc de jouer sur les éléments surligner (propriété :hover) sur l'identifiant du DIV (qui à par défaut la classe cache_div) :

#identifiant .classe_div:hover {

visibility: visible;

overflow: auto;

height: 100%;

} /* j'inverse toutes mes propriétés ! */

Vous n'aurez de limite que dans votre imagination et les fonctionnalités désirées. Ici n'oublions pas que nous jouons sur un effet de surlignage, et le javascript est quant à lui "permanent". C'est la seule différence majeure que j'ai pu constater.

Futilité amusante : j'aimerais ne pas voir dans les prochaines heures un billet portant la mention Groumphy découvre le Javascript ; cela me ferait un énorme plaisir ! ?