Blog (technique) - Un loup blessé

Liens déroulants en Javascript

En septembre 2005, j'installais ici des liens déroulant dans la sidebarre afin de l'alléger. Je suivais les indications trouvées sur Brindilles, un code valide XHTML offert par Borgo à Lithium. Depuis, le billet a disparu et comme Arkane m'a réclamé le code javascript, je me permet d'en faire un billet afin qu'il puisse servir à d'autres.

Il faut d'abord inclure ce script à l'intérieur des balises <head> et </head> (pour DotClear 1, c'est dans le fichier template.php du thème qu'il faut l'insérer. Sous Dotlear 2, c'est dans le fichier _head.html du thème)


<script type="text/javascript">
function showMoreAnything(blocknum, isOpen) {
hid = ('hide' + (blocknum));
unhid = ('click' + (blocknum));
if( document.getElementById ) {
if( document.getElementById(hid).style.display ) {
if( isOpen != 0 ) {
document.getElementById(hid).style.display = "block";
document.getElementById(unhid).style.display = "none";
} else {
document.getElementById(hid).style.display = "none";
document.getElementById(unhid).style.display = "block";
}
} else {
location.href = isOpen;
return true;
}
} else {
location.href = isOpen;
return true;
}
}
</script>

Ensuite, à l'endroit où doit apparaitre un lien déroulant, insérer ce code :


<span id="click111">
   <a href="#?jsenabled=no" onclick="showMoreAnything(111,'#?jsenabled=no');return false;">
   LIEN1</a>
</span>

<div id="hide111" style="display: none" >
   <a href="#" onclick="showMoreAnything(111,0);return false;">
   LIEN2</a>

   insérer ici les fonctions (php), textes, images apparaissant après avoir cliqué

</div>

Le LIEN1 est le texte du lien ou image apparaissant initialement et permettant de "dérouler" la suite
Le LIEN2 est le texte du lien ou image apparaissant après avoir cliqué et permettant "d'enrouler" = revenir à l'état initial

Il est possible bien évidemment d'utiliser des <ul><li> ... </li></ul> pour englober ce code afin d'améliorer la présentation.

En cas d'utilisation multiple de cette astuce, il faut changer le blocknum. Ici, dans l'exemple, c'est le nombre 111. Changer donc chaque occurrence de 111 par 112 pour le suivant puis éventuellement 113 etc... lors de l'utilisation dans une sidebarre. Dans une utilisation dans une liste de billets, vous pouvez aussi utiliser à la place une fonction php. Par exemple, pour obtenir le déroulement des commentaires sur ce blog dans la présentation "Commentaires par enroulement", j'ai remplacé 111 par <php dcPostID(); ?>, permettant d'avoir un numéro unique pour chacun des billets.

Pour voir un exemple, vous pouvez regarder la sidebarre de droite du blog de Mekbrun : ses liens, galeries, catégories et archives se déroulent en cliquant sur une image. Vous pouvez aussi regarder la présentation de ce blog en passant, dans la sidebarre, en "Commentaires par enroulement" au lieu des "Commentaires inclus" et voir qu'après chaque billet ayant des commentaires, vous pouvez les dérouler en cliquant sur le signe "+" à l'intérieur de la bulle de commentaire.

Amusez-vous bien

Billet écrit à 19:40 par 1loup dans la catégorie Blog (technique)

<div id="archives"> <h2 class="brighth2">Archives</h2> <span id="click111"> <a href="#?jsenabled=no" onclick="showMoreAnything(111,'#?jsenabled=no');return false;"> +Dérouler les archives+</a> </span> <div id="hide111" style="display: none" > <a href="#" onclick="showMoreAnything(111,0);return false;"> -Enrouler les archives-</a> <?php dcMonthsList(); ?> </div> </div>

Syndication / Autres

WebAnalytics solution by

↓

Commentaires et trackbacks

1. Le dimanche 16 septembre 2007 à 08:19, par fiuuu

ma foi cela me plairait bien pour mes archives arghhh je comprend en partie le principe :
mais lien 1 et lien 2 je capte pas trop (lien 1 = année ?)

2. Le dimanche 16 septembre 2007 à 08:56, par Baptiste

Ho!!!!! C'est canon!!!!

3. Le dimanche 16 septembre 2007 à 16:46, par 1loup

Non, Fiuuu, tu n'as pas compris. Bon, on travaille sur ton exemple, alors...

Actuellement, tu as ce code pour afficher tes archives :
<div id="archives">
   <h2 class="brighth2">Archives</h2>
   <?php dcMonthsList(); ?>
</div>
LIEN1 = +Dérouler les archives+
LIEN2 = -Enrouler les archives-
Fonction = <?php dcMonthsList(); ?>

Ce qui donne :
<div id="archives">

   <h2 class="brighth2">Archives</h2>

   <span id="click111">
      <a href="#?jsenabled=no" onclick="showMoreAnything(111,'#?jsenabled=no');return false;">
      +Dérouler les archives+</a>
   </span>

   <div id="hide111" style="display: none" >
      <a href="#" onclick="showMoreAnything(111,0);return false;">
      -Enrouler les archives-</a>

      <?php dcMonthsList(); ?>
   </div>

</div>
Mais tu ne préfères pas la présentation de mes archives ? (c'est un plugin)

4. Le lundi 17 septembre 2007 à 22:24, par MarcelD

Excusez moi de vous déranger mais il n'y aurait-il pas, par hasard une faute de syntaxe en ligne 12093, ...<none>
Il n'y aurait pas deux "n" à "nonne" ?
Désolé!

5. Le mardi 18 septembre 2007 à 11:12, par mekbrun

Whaouu, pour la première fois je suis pris en exemple, merci à toi mon Loup, c'est vrai que le menu déroulant est plutot sympa, il permet un gain de place....En revanche je ne comprend pas pourquoi dans mybloglog mon avatar n'apparait jamais sur les blogs que je visite? Est ce dû à la fréquence des visites? ou bien à un mauvais enregistrement de mon profil?

6. Le mardi 18 septembre 2007 à 21:13, par 1loup

Mais c'est normal, non ? Je crois que tu as été dans les premiers à utiliser le code que je te donnais et essayer de t'en dépatouiller presque tout seul.
Pour MyBlogLog, je crois que c'est parce que ton blog a été "catégorisé" en "adulte".

7. Le mercredi 19 septembre 2007 à 20:15, par mekbrun

Ah bon mon site est catégorisé "adulte", ???? Surement à cause des z.... ici et là dans les photos..

8. Le lundi 8 octobre 2007 à 19:25, par pierro

J'essaye de comprendre, mais je suis bloqué depuis le départ: pas de <head> et </head> dans le fichier _head.html
Par contre, j'en trouve dans le ficher _home.html
Une petite erreur?
Bon, je vais attendre la réponse avant d'aller plus loin.
Pour être clair, j'ai installé le plugin samecategorie (pour dotclear 2.0), et je voudrais pouvoir enrouler/dérouler la liste des billets.

9. Le lundi 8 octobre 2007 à 19:44, par 1loup

Non, il n'y a pas d'erreur. Si tu regardes les fichiers : 404.html, archive.html, archive_month.html, category.html, home.html, post.html, search.html, tag.html et tags.html, tu verras qu'ils ont tous un <head> </head> et que juste avant le </head>, tu as un appel au fichier que je te demande de modifier (_head.html) par un {{tpl:include src="_head.html"}}.
Alors soit tu t'amuses à modifier tous les fichiers précédents (au risque d'en oublier un suivant qu'il est présent on non dans ton thème / thème par défaut) soit tu rajoutes juste dans le _head.html
Je ne connais pas le plugin samecategorie donc je ne sais pas si c'est adapté ou non...

10. Le lundi 8 octobre 2007 à 23:44, par pierro

Bien. Donc j'insère le code n'importe où dans le fichier _head.html?
J'espère que tu auras un peu d'indulgence pour quelqu'un qui n'a jamais bidouillé dans les codes...

"Ensuite, à l'endroit où doit apparaitre un lien déroulant, insérer ce code :"
Il faut donc que j'arrive à savoir où se trouve cet "endroit où doit apparaitre le lien déroulant"... gasp!

11. Le mardi 9 octobre 2007 à 08:01, par 1loup

Oui, c'est à cela que sert le fichier _head.html, à rajouter du code dans tous les fichier du thème, dans le header, entre <head> et </head>.
Je tente, dans la mesure du possible, de me mettre au niveau de mon interlocuteur.

Oups...

J'ai donc installé le plugin sur un DC2 pour voir ce qu'il fait. Actuellement, le plugin (widget en fait) fonctionne soit dans le bandeau de navigation soit dans le bandeau d'extra. Il faudrait donc que tu demandes à l'auteur quel code insérer si tu souhaites te servir de son plugin et le mettre ailleurs que dans la sidebarre (par exemple dans le footer ou le top) et comment transmettre les variables (Titre, limite, trier par et Direction) dans ce cas. Je dis bien comment l'insérer ailleurs même si toi tu veux le mettre dans la sidebarre, là n'est pas le problème. Suis-je clair ?

12. Le mardi 9 octobre 2007 à 13:54, par pierro

Bien bien bien. Je commence à y voir clair. Je vais donc poser la question. Merci pour cette "mise à niveau"

13. Le dimanche 21 octobre 2007 à 08:27, par Compositeur de Musique

Bonjour, cahpeau pour ce joli design ! très agréable à regarderb (et à lire) bonnne continuation !

14. Le samedi 13 décembre 2008 à 14:32, par croks

Salut, ce code est genial mais quand je le fait sous firefox, le premier derouler ne se fait pas et je ne peux plus rien faire apres vu que tout est parti en meme temps que le derouler.
Je peux vous passer le code mais j'attend encore pour savoir si une version flash plus recente pourrai changer quelque chose?
merci

15. Le samedi 13 décembre 2008 à 17:31, par 1loup

>Croks: C'est du javascript, pas du flash, donc une version flash plus récente n'y changera rien. Au lieu de me passer le code, donne-moi plutôt l'adresse de ta page web qui déconne que je regarde le contexte et le reste du code qui pourrait interférer.

↑

Rajouter un commentaire