• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

TP : Redimensionnez du texte avec le plugin WideText

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce TP, vous allez utiliser le plugin WideText pour qu’un bout de texte occupe toute la largeur de la fenêtre du navigateur lorsqu’elle est redimensionnée.

Votre mission

Je vais vous demander de télécharger le plugin jQuery WideText et de l’appliquer.

Voici la simple page HTML que je vous propose de créer :

 

 

Pour cela, commencez par copier le code suivant et sauvegardez le dans un fichier tp_widetext.html.

<!DOCTYPE html>

<html>

  <head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>

  <body>
    <span id="texteAdaptatif">Ce texte s’adapte à la largeur de la page</span>
  </body>

</html>

 

Suivez ces instructions pour mettre en place le plugin jQuery WideText.

Appliquez ce plugin au texte “Ce texte s’adapte à la largeur de la page”. À vous de jouer !

Besoin d'aide ?

Le plugin jQuery WideText est très simple à utiliser : il suffit de procéder selon les 5 étapes suivantes :

  1. Téléchargez le fichier JS contenant le plugin sur cette page.

  2. Dézippez le plugin pour extraire le fichier jQuery.wideText.js et et placez ce fichier dans le dossier contenant votre fichier tp_widetext.html.

  3. Faites référence au plugin avec une balise<script>.

  4. Insérez dans la feuille de styles interne le code CSS indiqué dans la documentation du plugin.

  5. Appliquez la méthodewideText() au span ayant pour identifiant texteAdaptatif.

 

Découvrez la correction

  1. Téléchargez le plugin.
    Là, rien de compliqué !

  2. Dézippez le plugin.
    Une fois que vous avez récupéré le fichier du plugin contenu dans le ZIP, attention à bien le placer au même niveau que votre fichier tp_widetext.html !

  3. Ajoutez dans l’entête de votre fichier tp_widetext.html une référence vers le plugin à l’aide d’une balise<script>  :

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="jQuery.wideText.js"></script>
  4. Insérez les instructions CSS suivantes dans votre page html, comme indiqué dans la documentation en ligne :

    .wtext {
        white-space: nowrap;
        display: inline-block;
    }
  5. Enfin, appliquez la méthode wideText() au span ayant pour identifiant texteAdaptatif :

    $(function(){
        $('#texteAdaptatif').wideText();
    });

Et voilà le travail, le code de votre page tp_widetext.html devrait ressembler au code ci-dessous ! Bien sûr, comme toujours, plusieurs variantes sont envisageables, ne vous inquiétez pas si vous n’avez pas écrit le même code à la lettre près. :)

<!DOCTYPE html>

<html>
    
  <head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="jQuery.wideText.js"></script>
    <style>
      .wtext {
        white-space: nowrap;
        display: inline-block;
      }
    </style>   
  </head>

  <body>
    <div id="tout">
    <span id="texteAdaptatif">Ce texte s’adapte à la largeur de la page</span>
    </div>
    
    <script>
      $(function(){
        $('#texteAdaptatif').wideText();
      });
    </script>   

  </body>
  
</html>
Exemple de certificat de réussite
Exemple de certificat de réussite