Médiaforma

All posts tagged width

Comme nous l’avons vu précédemment, la taille d’une cellule s’adapte à son contenu. Cependant, il est parfois nécessaire de fixer la taille d’une cellule (et donc de la colonne qui la contient) à une largeur bien précise. Vous utiliserez pour cela l’attribut HTML width, en précisant la dimension de la colonne en pixels.

Ici par exemple, la taille de la première colonne est fixée à 200 pixels. L’attribut width a été spécifié dans la première balise <td> de la colonne, mais il aurait tout aussi bien pu être spécifié dans la deuxième balise <td> de cette colonne.

Supposons maintenant que vous vouliez fixer la taille de toutes les colonnes à 200 pixels. Comment procèderiez-vous ? La première idée qui vient à l’esprit consiste à insérer un attribut width dans chacune des cellules d’une colonne. Cette technique fonctionne, mais elle n’est pas très élégante. Dans la rubrique précédente, je vous ai montré que le CSS pouvait s’avérer très efficace pour agir globalement sur un document. Ici, c’est précisément ce que nous cherchons à faire puisque toutes les cellules doivent avoir une largeur de 200 pixels. La solution devient alors évidente : il suffit de modifier le style de la balise <td>.

Insérez la balise <style> </style> entre les balises <head> et </head>, puis modifiez la propriété width de la balise <td>. Vous pouvez supprimer l’attribut width de la première balise <td>, qui fait doublon avec la redéfinition de la balise <td>.


Vous utiliserez les méthodes offset().left et offset().top pour connaître/modifier la position d’un élément sur l’écran et les méthodes width() et height() pour connaître/modifier la largeur et la hauteur d’un élément par rapport au coin supérieur gauche de l’écran.

Exercice 1

Entrez le code suivant dans NotePad++ et sauvegardez-le sous le nom taille-et-position.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille et position des éléments sur la page</title>
    <style>
      #boite {
        position: absolute;
        top: 40px;
        left: 50px;
        width:300px;
        height: 200px;
        background-color: yellow;
        border: solid;
        border-width: 2px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <div id="boite"></div>
    <p id="status"></p>
    <script>
      $(function() {
        //Insérer le code jQuery ici
      });
    </script>
  </body>
</html>

Ajoutez les instructions jQuery nécessaires pour afficher les dimensions et la position de l’élément #boite dans l’élément #status.

 

Solution

var x = $('#boite').offset().left;
var y = $('#boite').offset().top;
var l = $('#boite').width();
var h = $('#boite').height();
$('#status').text('Dimensions : '+l+'x'+h+' px. Position : à '+y+'px du haut et à '+x+' px de la gauche.');

 

Exercice 2

Ajouter deux éléments button au DOM et définir le code jQuery pour que :

  1. Le premier bouton positionne l’élément #boite à 200 pixels du bord gauche et 120 pixels du bord supérieur
  2. Le deuxième bouton redimensionne l’élément #boite à 150×30 pixels

 

Solution

$('#position').on('click',function(){
  $('#boite').offset({top:120,left:200});
});
$('#taille').on('click',function(){
  $('#boite').width('150px').height('30px');
});

Lorsque vous cliquez sur un lien, la page cible s’ouvre dans la même fenêtre. Pour l’afficher dans une fenêtre secondaire, il suffit d’affecter la valeur _blank à l’attribut target de ce lien. Enfin, pour l’afficher dans une fenêtre secondaire de taille bien précise, vous utiliserez la fonction JavaScript window.open(), associée à l’événement onclick de la balise <a>. Définissez l’adresse de la page cible dans le premier paramètre de la fonction, le nom de la fenêtre dans le deuxième paramètre et les dimensions de la fenêtre secondaire dans les paramètres height et width. Ici, la fenêtre secondaire pointe vers le moteur de recherche Bing. Elle a une largeur de 400 pixels et une hauteur de 600 pixels.

Voici le résultat :