Médiaforma

All posts tagged div

Pour alléger une page Web, il peut être utile de dissimuler certaines parties non essentielles tout en laissant le loisir aux internautes de révéler ces parties s’ils le souhaitent en cliquant sur un contrôle quelconque : un bouton ou un lien hypertexte par exemple. En mêlant quelques lignes de HTML, de CSS et de JavaScript, il est très simple de réaliser cet effet.

Le code HTML contient trois paragraphes délimités par les balises <p> et </p>. Le deuxième paragraphe est de classe cache et il est précédé d’un bouton d’identifiant bouton qui permettra de l’afficher ou de le dissimuler.

Le code CSS définit les caractéristiques de la balise d’identifiant cache. Par défaut, cette balise n’est pas affichée. Lorsqu’elle sera affichée, elle aura une bordure continue épaisse de 1 pixel et de couleur silver et une couleur d’arrière-plan jaune.

Lorsque le bouton est cliqué, la fonction JavaScript affiche() est exécutée. Examinons les instructions utilisées dans cette fonction. La première ligne s’intéresse au texte affiché dans le bouton. S’il est égal à “Montrer“, cela signifie que le paragraphe n’est pas affiché. Le texte du bouton se transforme en “Cacher” et la propriété display de la balise <p> est initialisée à block, ce qui a pour effet d’afficher le paragraphe.

Si le texte affiché dans le bouton n’est pas “Montrer“, cela signifie que le paragraphe est affiché. Dans ce cas, le texte du bouton se transforme en “Montrer” et la propriété display de la balise <p> est initialisée à none, ce qui a pour effet de dissimuler le paragraphe.

Voyons comment se comporte ce code dans un navigateur :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Vous utiliserez la propriété CSS z-index pour définir la position relative de plusieurs éléments empilés. Plus la valeur affectée à la propriété z-index d’un élément est élevée, plus cet élément se trouve en avant-plan.

Pour illustrer cette propriété, nous allons empiler plusieurs rectangles colorés dans une balise <div> et choisir leur ordre de superposition.

Le code HTML est élémentaire. Il contient une balise <div> conteneur ligne 36 et trois balises <div> enfants lignes 37 à 39.

Examinons le code CSS.

Pour limiter l’écriture, les propriétés communes aux trois classes sont rassemblées entre les lignes 5 et 10. Ainsi, les éléments de classe rectangle1, rectangle2 et rectangle3 seront tous trois positionnés en absolu et auront une dimension de 200×150 pixels.

Les caractéristiques propres à chaque classe sont définies :

  • entre les lignes 11 et 17 pour le premier rectangle ;
  • entre les lignes 18 et 24 pour le deuxième rectangle ;
  • entre les lignes 25 et 31 pour le troisième rectangle.

La propriété z-index de la balise <div> de classe rectangle1 a pour valeur 1. Celle de la balise <div> de classe rectangle2 a pour valeur 2 et celle de la balise <div> de classe rectangle3 a pour valeur 3. La balise de classe rectangle3 se trouve donc devant la balise de classe rectangle2, el la balise de classe rectangle2 se trouve devant la balise de classe rectangle1.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

La balise <span> est comparable à la balise <div>, à ceci près que la première est de type inline et la deuxième de type block. Deux balises <span> consécutives apparaîtront donc sur une même ligne, alors que deux balises <div> consécutives apparaîtront sur deux lignes différentes.

Pour illustrer ce que je viens de dire, voici un peu de code HTML.

Les lignes 8 et 9 définissent deux balises <span>.

Quant à elles, les lignes 13 et 14 définissent deux balises <div>.

Comme prévu, les balises <span> apparaissent sur une même ligne, alors que les balises <div> apparaissent sur deux lignes différentes.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, je vais vous montrer comment remplacer les zones de saisie des deux exemples précédents par des curseurs. Pour l’instant, ce code ne fonctionne que dans Google Chrome. Voici le résultat que nous cherchons à obtenir :

Dans Firefox et Internet Explorer, les curseurs seront représentés par des zones de texte.

Les portions CSS et JavaScript du document sont identiques à celles de la rubrique précédente. Nous n’y reviendrons pas. Par contre, n’hésitez pas à vous reporter aux rubriques “Alignement avec un tableau” et “Codes couleur en JavaScript” pour avoir des informations complémentaires à leur sujet.

Examinons le code HTML.

<table>

 <tr><td colspan=2><div id="div1"></div></td></tr>

 <tr><td>Rouge</td><td><input id="rouge" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Vert</td><td><input id="vert" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td>Bleu</td><td><input id="bleu" min="0" max="255" value="0" onchange="changeCouleur(event)"></td></tr>

 <tr><td colspan=2><div id="hexa"></div></td></tr>

</table>

Comme vous pouvez le remarquer, les balises <input> (c’est-à-dire les zones de saisie) ont été remplacées par des balises <input>. Cette simple substitution provoque l’affichage de curseurs dans Google Chrome. Les attributs min et max définissent les valeurs minimale et maximale de chaque curseur : 0 et 255. L’attribut value indique la position du curseur à l’ouverture du document. Cet attribut étant initialisé à 0 pour les trois curseurs, ils seront tous trois positionnés au minimum à l’ouverture de la page. Enfin, pour relier la position de chaque curseur avec la couleur d’arrière-plan de la balise div1, il faut définir une fonction événementielle qui sera exécutée à chaque modification d’un des curseurs. Pour cela, il suffit de capturer l’événement onchange. La fonction exécutée a pour nom changeCouleur(). Son code est quasiment identique à celui utilisé dans les deux rubriques précédentes. Reportez-vous à la rubrique “Codes couleur en JavaScript” pour en savoir plus à son sujet.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la vidéo précédente, les zones de saisie n’étaient pas alignées verticalement. Nous allons voir comment améliorer leur mise en page en utilisant un tableau. Tant que nous y sommes, nous allons centrer horizontalement les deux <div> et le bouton dans le tableau pour obtenir quelque chose comme ceci :

Examinons le code HTML.

Comme vous pouvez le voir, les différents éléments affichés dans le document ont été placés dans un tableau comportant deux colonnes. Les deux balises <div> et le bouton de commande occupent deux colonnes dans le tableau. Pour cela, il suffit d’affecter la valeur 2 à l’attribut colspan de ces trois éléments. Par contre, les éléments concernant les composantes Rouge, Vert et Bleu sont répartis sur deux colonnes : à gauche les libellés des couleurs, à droite, les zones de saisie. Remarquez l’utilisation de la propriété CSS text-align pour aligner à gauche les trois zones de saisie.

<table>

<tr><td colspan=2><div id=”div1″></div></td></tr>

<tr><td>Rouge</td><td style=”text-align:left;”><input id=”rouge”> (0 à 255)</td></tr>

<tr><td>Vert</td><td style=”text-align:left;”><input id=”vert”> (0 à 255)</td></tr>

<tr><td>Bleu</td><td style=”text-align:left;”><input id=”bleu”> (0 à 255)</td></tr>

<tr><td colspan=2><div id=”hexa”>Définissez les composantes RVB et cliquez sur le bouton</div></td></tr>

<tr><td colspan=2><input type=”button” value=”Afficher la couleur correspondante”></td></tr>

</table>

Examinons le code CSS.

  • La première balise <div> a pour identifiant div1. Ses caractéristiques sont définies entre les lignes 5 et 12. Les trois premières instructions définissent la couleur et les dimensions de la balise <div>. Quant aux deux dernières instructions, elles provoquent le centrage de la balise dans le tableau.
  • Les lignes 13 à 17 définissent la mise en forme des cellules du tableau. Le texte sera centré dans les cellules et les cellules auront une largeur de 300 pixels.

Le code JavaScript est identique à celui de la rubrique précédente. N’hésitez pas à vous y reporter pour avoir de plus amples renseignements à son sujet.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Nous allons mettre en pratique ce qui a été vu dans les rubriques précédentes pour afficher une couleur en fournissant ses composantes RVB. Les valeurs Rouge, Vert et Bleu seront saisies dans des zones de texte. Un bouton de commande affichera le code hexadécimal correspondant et affectera ce code à l’attribut CSS background-color d’une balise <div> :

Examinons le code HTML, entre les lignes 29 et 38.

  • La ligne 30 définit la balise <div> d’identifiant div1. Cette balise sera utilisée pour représenter la couleur dont les composantes RVB sont spécifiées par l’utilisateur.
  • Les lignes 32 à 34 définissent les zones de texte d’identifiant rouge, vert et bleu.
  • La ligne 35 définit une deuxième balise <div> d’identifiant hexa. Cette balise sera utilisée pour afficher le code hexadécimal correspondant aux composantes décimales RVB saisies par l’utilisateur.
  • Enfin, la ligne 36 définit un bouton de commande et lui associe la fonction événementielle couleur(). Cette fonction sera exécutée à chaque clic sur le bouton de commande.

Examinons le code CSS, entre les lignes 4 et 11. Ce code est identique à celui des rubriques précédentes. Il définit la couleur d’arrière-plan (ici noir) et les dimensions de la balise <div> d’identifiant div1.

Examinons le code de la fonction JavaScript couleur(), entre les lignes 13 et 25.

  • Les lignes 15 à 17 récupèrent les valeurs numériques décimales qui se trouvent dans les zones de texte rouge, vert et bleu et les stockent dans les variables r, v et b.
  • La ligne 19 utilise ces trois valeurs pour calculer le code la couleur. Ce code est obtenu en multipliant la composante Rouge par 256*256, en y ajoutant la composante Vert multipliée par 256 et en y ajoutant la composante Bleu. Si cette technique ne vous est pas familière, sachez qu’elle permet d’obtenir une valeur unique composée à partir de trois valeurs codées entre 0 et 255.
  • La ligne 20 affecte le code de la couleur à la propriété backgroundColor de la balise <div>. Remarquez l’utilisation de la fonction parseInt() qui fournit une valeur entière à la propriété backgroundColor. Sans cette fonction, la valeur passée serait interprétée comme une chaîne de caractères et la propriété backgroundColor ne serait pas bien initialisée.
  • Il ne reste plus qu’à modifier le contenu de la balise <div> d’identifiant hexa. La ligne 22 définit la variable h et la relie à la balise <div> d’identifiant hexa.
  • La ligne 23 affiche la valeur hexadécimale de la couleur dans la balise <div> d’identifiant hexa. La conversion en hexadécimal est obtenue avec la fonction toString(16) appliquée à la variable codeCouleur.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, je vais vous montrer comment afficher ou cacher une balise HTML en agissant sur une de ses propriétés CSS via du code JavaScript.

Examinons le code HTML. Le corps du document occupe les lignes 32 à 38. Très simple, il se contente d’afficher une balise <div> d’identifiant div1 et un bouton de commande d’identifiant afficheCache. La procédure événementielle bascule() est associée au clic sur ce bouton.

Examinons le code CSS, défini entre les lignes 4 et 11. Ce code a déjà été utilisé à plusieurs reprises dans les rubriques précédentes. Il définit la couleur d’arrière-plan et les dimensions de la balise <div>.

Vous l’aurez compris, le plus gros du traitement se fait dans la fonction JavaScript bascule(), entre les lignes 12 et 29.

  • La ligne 15 définit la variable etat et y stocke la valeur de la propriété CSS display de la balise <div> div1.
  • La ligne 16 définit la variable bouton et l’initialise avec la balise d’identifiant afficheCache, c’est-à-dire avec le bouton.

Si la variable etat vaut none, cela signifie que la balise <div> n’est pas affichée. Il faut donc l’afficher. C’est ce que fait la ligne 20, en affectant la valeur block à la propriété CSS display de la balise <div>. Par la même occasion, le texte affiché sur le bouton de commande est modifié en “Cacher la balise div” ligne 21.

Si la variable etat a une autre valeur que none, cela signifie que la balise <div> est affichée. Il faut donc la dissimuler. Cette opération est réalisée dans la ligne 25, en affectant la valeur none à la propriété CSS display de la balise <div>. Le texte affiché sur le bouton de commande est également modifié en “Afficher la balise div” ligne 26.

Il ne reste plus qu’à exécuter ce code dans un navigateur. Comme vous pouvez le constater, le bouton de commande est en mesure de cacher puis de réafficher la balise <div>.