[JS-Confiance] 'Lire la suite', quelques perfectionnements

01.04.2007

(merci à Julie, Justemoa, Maître Po et Fañch dont les questions m'ont aidé à préciser certains passages – article revu en août 2008)

Article tout à fait sérieux en dépit de la date de publication !

Le précédent article avait abouti à cette solution, à transporter dans le HTML :

 <p>Début de l'article</p> <a href="#nom_unique" onclick=" document.getElementById('nom_unique').style.display= ''; this.style.display= 'none'; return false;">Lire la suite…</a> <div id="nom_unique" style="display:none"> <p>Le texte à cacher</p> </div>

On peut aller plus loin à peu de frais, voyons donc ça.

Perfectionnement 1 : faire un vrai bouton

Un vrai bouton, c'est-à-dire avec une n'image de bouton.

Idée 1 : récupérer et trafiquer, ou bien fabriquer vous-même cette n'image, avec ou sans texte dessus. La stocker quelque part dans votre admin OB. Remplacer les mots "Lire la suite…" par <img src="url_de_l_image" />. C'est tellement bête…

Idée 2 : employer une image comme ci-dessus mais sans texte – par exemple un bouton allongé – pour en faire l'image de fond background-image du lien. La manœuvre traîne partout sur le Web (et même ici), je vous laisse chercher, na !

Perfectionnement 2 : pouvoir masquer à nouveau le texte

Pas bien compliqué : on ajoute un deuxième interrupteur dans le div escamotable, interrupteur qui fera revenir ce div en display:none.

Pour que le système soit tout à fait complet, le premier interrupteur s'escamotera lui-même quand on cliquera dessus, et le deuxième fera revenir le premier. Il faudra donc donner un identifiant à ce premier interrupteur, et vogue la galère !

Enfin, une classe supplémentaire (ce n'est pas obligatoire du tout, juste commode) pour chaque interrupteur permet d'en ajuster finement l'apparence :

CSS

 .lienjecache, .lienjemontre {font-style:italic} /* ici, vous mettez ce qui */ .lienjecache {margin-left: 5em; } /* vous semble bon */

HTML avec commentaires

 <p>Texte toujours affiché</p> <a id="nom_unique_afficher" href="#nom_unique" class="lienjemontre" onclick=" document.getElementById('nom_unique').style.display= ''; /* montre le div */ this.style.display = 'none'; /* Nouveau : cache le présent lien */ return false; /* empêche de bouger */ ">Lire la suite …</a> <div id="nom_unique" style="display:none"> <p>Texte à cacher</p> <a class="lienjecache" href="#nom_unique_afficher" onclick=" document.getElementById('nom_unique').style.display= 'none'; /* cache le div */ document.getElementById('nom_unique_afficher').style.display = ''; /* montre le 1er lien */ return true; /* Cette fois on suivra le href pour revenir au 1er lien, après clic*/ ">… masquer la fin</a> </div>

HTML sans commentaires

 <p>Texte toujours affiché</p> <a id="nom_unique_afficher" href="#nom_unique" class="lienjemontre" onclick=" document.getElementById('nom_unique').style.display= ''; this.style.display = 'none'; return false; ">Lire la suite …</a> <div id="nom_unique" style="display:none"> <p>Texte à cacher</p> <a class="lienjecache" href="#nom_unique_afficher" onclick=" document.getElementById('nom_unique').style.display= 'none'; document.getElementById('nom_unique_afficher').style.display = ''; return true; ">… masquer la fin</a> </div>

Stockez ce bout de HTML dans un petit fichier à copier/coller dans vos articles, ça marche (presque) tout seul mais n'oubliez pas de remplacer le mot nom_unique (7 exemplaires) par un identificateur unique dans le blog !

Selon vos besoins, vous pouvez modifier le href du deuxième lien pour faire revenir le lecteur à un endroit quelconque de la page, par exemple un peu avant le lien "Lire la suite". Bien sûr, cet autre endroit devra porter un id , quelque chose comme nom_unique_retour où nom_unique est à remplacer par ce que vous avez choisi (technique utilisée dans le présent article).

Observations JavaScript :
le mot-clé this désigne l'élément HTML auquel est attaché le code JavaScript. Très pratique pour éviter de multiplier les identifiants, les getElementById et pour alléger l'écriture.
par défaut, le lien est suivi et l'instruction return true; pourrait donc disparaître. Cependant, j'aime mieux la laisser que de risquer de croire à un oubli : c'est plus explicite.

Perfectionnement 3 : masquer autre chose qu'un div

Ben… il suffit que cette autre chose porte un identifiant…

Perfectionnement 4 : séparer le lien de ré-escamotage de l'élément escamotable

Déjà, le lien de révélation n'a aucun besoin de précéder immédiatement l'élément escamotable, ni même de le précéder : si ça vous amuse, vous pouvez faire apparaître quelque chose dans l'en-tête du blog par un lien situé dans un module de texte libre. Pour que le découplage entre l'élément et sa commande soit complet, il faudrait aussi que le lien de ré-escamotage vienne s'afficher à la place du lien de révélation quand on affiche l'élément, et inversement quand on le masque.

Voici un tout petit exemple pour afficher un paragraphe supplémentaire.

Chiche ?

Ce n'est qu'une extension du procédé, sans rien de neuf. Vous allez voir :

le p porte l'id paragsurprise ,
le lien de révélation porte l'id paragsurprise_afficher ,
le lien de ré-escamotage porte l'id paragsurprise_masquer et un attribut style="display:none" ,
le lien de ré-escamotage est écrit juste après le lien de révélation, ce qui lui permettra de s'afficher à sa place,
et les gestionnaires onclick ont un peu grossi pour traiter le lien de ré-escamotage.

Concrètement voilà le code source de ce qui précède :

 <p id="paragsurprise" style="display:none">Avez-vous remarqué ce nouveau paragraphe ?</p> <p>Voici un tout petit exemple pour afficher un paragraphe supplémentaire. </p> <a id="paragsurprise_afficher" href="#paragsurprise" onclick=" document.getElementById('paragsurprise').style.display = ''; document.getElementById('paragsurprise_masquer').style.display = ''; this.style.display = 'none'; return false;">Chiche&nbsp;?</a> <a id="paragsurprise_masquer" href="#paragsurprise_afficher" style="display:none" onclick=" document.getElementById('paragsurprise').style.display = 'none'; document.getElementById('paragsurprise_afficher').style.display = ''; this.style.display = 'none'; return false;">Alors, convaincu&nbsp;?</a>

Vous constatez qu'il ne faut aucune technique nouvelle, juste combiner astucieusement celles déjà connues.

Il faut tout de même savoir rester raisonnable. En particulier, il peut être hasardeux de vouloir faire apparaître puis disparaître des fragments de texte à l'intérieur d'un paragraphe : bien que le JavaScript fasse son travail, le navigateur semble avoir du mal à reformatter correctement le texte.

Perfectionnement 5 : utiliser autre chose que des liens

Eh oui : TOUT, ou presque, peut recevoir un gestionnaire onclick.

Vous pouvez donc employer des images en guise d' interrupteurs , pourquoi pas ? C'est ainsi que se ferme l'adhésif jaune repositionnable (marque déposée) de la page d'accueil de ce blog.

Plus vicieux : si vous utilisez un span, rien (mais alors rien de rien) ne signalera qu'on peut cliquer dessus. Utile pour dissimuler des easter eggs (petits cadeaux au lecteur), des indices d'énigmes…

Perfectionnement 6 : pourquoi seulement jouer à cache-cache ?

Plutôt que de cacher un élément, vous pouvez vouloir modifier son image de fond, sa bordure, ses dimensions… Il suffit de jouer sur autre chose que style.display. Pour l'image de fond, intervenez sur style.backgroundImage, pour bordure sur style.borderColor et/ou style.borderWidth et/ou style.borderStyle. Pour la marge du haut, ce sera style.marginTop, etc.

Remarquez au passage la transformation des noms des propriétés CSS lorsqu'ils sont composés : à border-color correspond style.borderColor

.

Notez aussi que JavaScript ne connaît pas les propriétés raccourcies. Gné ? En CSS, on peut écrire en une seule fois margin pour définir les quatre marges margin-top , margin-left , margin-bottom et margin-right. En JavaScript rien de tel, vous gérerez les quatre propriétés élémentaires. Même chose pour les fonds : pas de style.background, mais la déclinaison complète style.backgroundColor , style.backgroundImage , style.backgroundPosition , style.backgroundRepeat , style.backgroundAttachment et style.backgroundScroll. Le JavaScript, c'est un peu verbeux.

Perfectionnement 7 : pourquoi cliquer ?

C'est vrai, cliquer fatigue l'index et use la souris. On peut préférer quelque chose comme je survole le bouton, ça change quelque chose, je ne survole plus le bouton, on revient à la normale. . Voici la recette :

il n'y a pas de gestionnaire onclick sur le bouton.
on le dote d'un gestionnaire onmouseover pour traiter ce qui se passe au survol. Ce gestionnaire reprend le onclick du bouton de révélation, sauf la gestion du bouton de ré-escamotage puisqu'il n'y en a pas.
Ce gestionnaire se composera principalement d'instructions document.getElementById('id_de_la_cible).style.propriété='valeur';.
on dote le bouton d'un deuxième gestionnaire onmouseout pour traiter le retour à la normale.
Ce gestionnaire se composera principalement d'instructions document.getElementById('id_de_la_cible).style.propriété='';

Pour gérer l'aspect du bouton lui-même, il faut distinguer deux cas :

si c'est un lien, le plus simple est de passer par le CSS, avec des règles du genre de #lebouton:hover {background-color:yellow}
si c'est autre chose, et comme IE (au moins jusqu'à IE7) ne comprend toujours pas :hover sur autre chose que des liens, il faudra compléter les deux gestionnaires. Le gestionnaire onmouseover recevra des instructions this.style.propriété='valeur'; et le gestionnaire onmouseout, pour les mêmes propriétés, recevra des instructions this.style.propriété='';. Fastidieux mais inévitable.

Maintenant, c'est à vous de jouer

Des heures d'amusement en perspective…

La manip' de base Une technique basique mais sans JavaScript

Technique de base
Quelques perfectionnements
Version ultra-light