Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
16 novembre 2008 7 16 /11 /novembre /2008 14:51

Un besoin simple : réduire un module quand on clique sur son titre, le développer quand on reclique. Au lieu d'escamoter le contenu, on peut vouloir changer l'image de fond et/ou la couleur du texte et/ou sa taille, ou encore déplacer le module dans l'écran, ou… libre à vous.

En généralisant : quand on clique sur le titre la présentation du module change, qund on reclique elle revient à la normale.

Le programme que je vous propose (inutilisable au niveau Confiance) ne change pas l'aspect du blog. Il donne une classe supplémentaire aux modules désignés, cette classe change quand on clique sur leur titre – le reste est pure affaire de CSS.


Installation

Si vous n'avez jamais installé de JavaScript chez vous rendez-vous ici pour les détails.

  1. Cliquez sur le bouton et sauvegardez le fichier sur votre ordinateur.
  2. Ensuite stockez ce programme, sans rien y changer, dans l'espace  Mes Documents/Autres fichiers  de votre admin de blog.
  3. Enfin, ajoutez une ligne au pied de page du blog :
     <script type="text/javascript" src="URL_du_programme"></script> 

Remplacez bien sûr URL_du_programme par l'url effective du fichier. Voilà.

Mise en œuvre

À lui seul ce programme ne change rien à l'aspect du blog, il faut encore indiquer quels modules vous voulez rendre "cliquables".

Dotez d'abord chacun de ces modules d'un identifiant (comment fait-on ?) s'il n'en a pas déjà un.

Ensuite ajoutez dans le pied de page, après la ligne déjà ajoutée, une nouvelle section script sur le modèle suivant :

 <script type="text/javascript"> moduleCliquable('id_d'un_module','etat_initial'); moduleCliquable('id_d'un_autre_module','etat_initial'); </script> 

Écrivez une ligne 'moduleCliquable' par module concerné. Indiquez-y l'identifiant (sans dièse !) du module et l'état initial (c'est facultatif) de ce module : on ou off.

Désormais chaque module mentionné reçoit, lors du chargement de la page, la classe on ou off que vous avez indiquée. Ensuite le module passe d'une classe à l'autre à chaque clic sur sa barre de titre, à vous de fournir les règles CSS qui décrivent ces deux classes.

Un exemple

Exemple bateau : on veut pouvoir plier ou déplier le module des derniers commentaires et celui des derniers articles.

Il faut d'abord décider de la signification de 'on' et 'off' : on décide que, pour ces modules, la classe on correspond à l'état déplié (=comme d'habitude) et la classe off à l'état replié.

Il faut aussi préciser le sens exact de 'plié' et 'déplié'. Admettons que

  1. 'plié' signifie qu'on cache le corps du module, en laissant visibles son titre et son 'footer', et aussi que le titre montre un signe 'plus'.
  2. 'déplié' signifie qu'on montre tout le module, et que le titre montre un signe 'moins'.

Les modules ordinaires (=inertes) n'auront aucun signe distinctif dans leur titre. On espère ainsi que le visiteur du blog, retrouvant des conventions familières, ne sera pas trop dérouté. C'est important de ne pas trop dérouter les visiteurs, j'en sais quelque chose…

Vous avez bien pigé l'idée, elle vous convient ? Bon, allons-y.

Commencez par donner un identifiant à chacun de ces modules, mettons artRecent et commRecent (mais vous choisissez bien ce qui vous convient).

Dans le pied de page du blog, après la ligne qui appelle le programme, ajoutez ceci :

 <script type="text/javascript"> moduleCliquable('artRecent','on'); moduleCliquable('commRecent','on'); </script> 
N'oubliez pas les apostrophes et ne confondez pas majuscules et minuscules !

Pour montrer ou cacher le contenu, deux nouvelles lignes de CSS :

 .on .box-content {display:block} /* dans l'état 'on' on montre le contenu du box */ .off .box-content {display:none} /* dans l'état 'off' on le cache */ 

Pour la barre de titre préparez d'abord deux images de fond similaires, l'une avec le plus et l'autre avec le moins, puis trois autres lignes de CSS pour s'en servir :

 .on .box-title,.off .box-title {background-position: left center; background-repeat: no-repeat} .on .box-title {background-image:url('URL_de_l'image_avec_moins')} .off .box-title {background-image:url('URL_de_l'image_avec_plus')} 

Total : cinq lignes de CSS et c'est tout. Vous avez compris le principe ?

D'autres exemples

Pour grossir les caractères de 20%, ce sera :

 .on .box-content {font-size:120%} .off .box-content {font-size:100%} 

Encore un exemple : pour déplacer le module de 20 pixels vers la droite, ce sera :

 .box.on, .box.off {position:relative} .box.on {left:20px;} .box.off {left:0px;} 
… et ainsi de suite. Tant pis si je me répète : les deux classes on et off n'ont que la signification que vous leur donnez par le CSS.

Deux remarques

D'abord ce gadget n'agit pas sur tous les modules mais seulement sur ceux que vous indiquez dans les lignes du bas de page, donc pensez à les mentionner ! Les autres modules restent inchangés.

Ensuite : si le lecteur de votre blog navigue sans JavaScript il ne verra aucun changement, ni en bien ni en mal – ça, j'aime bien.

Et voilà toute la partie pratique.


Merci à Cln pour les tests.


Démontage

Le présent article vous fournit le programme et son mode d'emploi. Son article jumeau démonte entièrement le programme si vous voulez comprendre comment il marche (lecture totalement facultative mais espérée intéressante !).

Mises à jour

  • Octobre 2008 : 1ère publication
  • Mai 2012 : simplification du programme, mise à disposition du programme sous forme téléchargeable, révision de l'article, réécriture de la  dissection  du programme et report dans un article séparé.
par Aïe mes doigts ! - dans La gadgetière
commenter cet article

commentaires

Incognitototo 07/05/2012 13:24

Bonjour Bren du fat ou Aïe les doigts !

J'ai essayé de faire les copier/coller, sans me poser de question, mais ça ne le fait pas et c'est pourquoi, je pense que j'ai dû rater quelque chose, mais quoi...

Pour essayer de t'expliquer, je voudrais modifier mon module "Tous les articles publiés" (C'est mon sommaire actuel qui devient beaucoup trop long et illisible pour les lecteurs...) en regroupant
les articles publiés dans des catégories que je vais créer...

Quand le lecteur cliquera sur la "catégorie", les URL des articles qu'elle contient s'afficheront et ils pourront cliquer sur l'article, pour avoir accès à l'article... et quand ils recliqueront
sur la catégorie la liste d'articles se fermera...

Si au moment du clic, sur la catégorie le résumé des articles qu'elle contient s'affiche (comme actuellement dans le corps de la page), c'est encore mieux...

Ai-je bien dites ??? J'espère que j'ai été plus clair, mais j'ai des doutes lol

P.-S. : C'est pourquoi, j'aurais préféré de l'Html, si c'est possible, beaucoup de navigateurs étant désactivés pour le Java...

AïmD ! 07/05/2012 16:19



J'ai répondu dans le forum : plus simple, et ça peut en intéressser d'autres :-)



Incognitototo 07/05/2012 00:51

Superbe et très pédagogique... mais, ça me dépasse totalement. Rien de plus simple en Html ?

Je ne comprends pas comment on déclare les variables...

Pourtant ça a l'air de correspondre à ce que je cherche : http://forum.over-blog.com/thread-2717999-0.html

Aïe mes doigts ! 07/05/2012 09:59



Bonjour, je suis en train de reprendre cet article, il sera bien moins intimidant !


Pour commencer, oublie totalement la seconde partie et dispense-toi de lire le programme (il suffit de le copier/coller, tu peux même aller le chercher directement là). Ce qui reste est plus abordable, en tout cas c'était mon intention...


Ensuite, si j'ai bien compris le fil du forum, tu souhaites créer un module de texte libre dont on voit tantôt seulement le titre, tantôt tout le module ? Si oui, c'est un des exemples que je
donne. Si non, si c'est plus complexe, explique-moi.


Enfin, pour répondre à ta question : non, je ne vois pas de réponse en pur HTML, parce que HTML n'est pas fait pour gérer des événements tels qu'un clic de souris : c'est précisément une des
fonctions de JavaScript.



Sagan33 08/04/2012 21:07

Je n'y arrive pas,
j'ai tout enlevé,
Merci tout de même Bren mais je ne suis pas assez calée en la matière....
Bonne soirée à toi.
Bien cordialement.

Aïe mes doigts ! 11/04/2012 11:32



On regardera tout ça au calme quand j'aurai un moment :-)



Sagan33 08/04/2012 18:13

J'ai rajouté ceci dans la css :

/*articleaccueil repliable amour*/

#amour {position:absolute; left:50%; top:1300px}

.fermer {background-image:url(http://idata.over-blog.com/4/11/06/20/SUITE/vert.gif); width:218px;height:150px}

.ouvrir {background-image:url(http://idata.over-blog.com/4/11/06/20/SUITE/vert.gif); width:218px;height:150px}

.contenu {padding:20px}

.ouverture, .fermeture {position:absolute; right:2px; top:2px}

.ouvert .ouverture, .ferme .fermeture, .ferme .contenu {display:none}

le module est à replacer, les ouvrir et fermer s'affichent bien mais le module ne se ferme ni ne s'ouvre,
J'ai du faire une erreur de syntaxe dans les lignes...

AïmD ! 08/04/2012 19:05



Houp houp houp ! Il faut aussi voir ce que tu as mis dans le HTML !


Précision pour l'emploi de la rustine précédente : tu as remarqué qu'il y traîne plusieurs getElementById :un dans la ligne de script à incorporer au HTML, deux par lien ouverture/fermeture. Dans
le détail, il est écrit


getElementById('amour')


Sur fond bleu tu reconnais l'identifiant (sans #) du div concerné par la cuisine d'ouverture/femeture. Ce div, et seulement ce div, se voit ajouter une classe 'on' ou 'off' selon qu'il
est considéré comme ouvert ou fermé. Le lien qui ajoute la classe 'on' porte lui-même la classe 'ouvrir', celui qui ajoute la classe 'off' porte la classe 'fermer'. Tu noteras qu'il n'est nulle
part question de classe 'ouverture' ou 'fermeture'...


Le css complet dépend de ce que tu veux obtenir. Ppour les deux liens il est, au minimum, ceci :


.on .ouvrir, .off .fermer {display:none}


Repense à ce que fait chaque lien et tu comprendras l'utilité de cette ligne.


Ensuite, si c'est le div 'billet' que tu veux cacher, tu peux écrire


.off .billet {display:none}


Aller plus loin me demanderait plus de temps - pas tout de suite ! :-)


 



Sagan33 08/04/2012 16:50

Merci beaucoup Bren.
Beaucoup.
Beaucoup.

Tu as changé certaines de tes images animées, j'aime beaucoup l'ambiance qu'elles donnent à ton blog. C'est un réel plaisir de venir le visiter.
Encore merci pour l'aide.
GG

Bren du fat ! 08/04/2012 18:46



Images animées ??? Elles sont bien l'élément le plus stable de ce blog car leur fabrication est un travail de bénédictin ! Mais, leur tirage étant aléatoire, le hasard a pu t'en mettre sous les
yeux une rarement sortie :-)



Sagan33 08/04/2012 14:52

Oups ! j'ai un petit souci
http://harmonylegend.over-blog.com/
tous mes modules cliquables fonctionnent, mis-à-part le module de texte libre mis au-dessus de l'article qui s'appelle "l'amour est international". xhtml amour.
Il ne veut rien entendre pour se refermer.
Est-ce que tu aurais une petite idée d'où cela peut provenir.
Aussi, est-ce possible de refermer un module au survol ?
Voilà, c'est la résurrection, nous ne sommes pas encore au 3ème jour... de congés, alors j'en profite.
Merci !!!

AïmD ! 08/04/2012 15:33



Mon programme ne traite que les 'vrais' modules, ceux des colonnes, de classe box et dotés d'un box-titre. Je ne me suis jamais préoccupé de l'article d'accueil... il faudra bien m'y mettre ! En
attendant, tu peux supprimer l'instruction "moduleCliquable('amour');" dans ton pied de page.


En attendant aussi, tu peux ajouter dans le corps de cet article d'accueil


-une ligne de script :
document.getElementById('amour').className+=' on'


-un lien :
Fermer le module


-un lien très ressemblant :
Ouvrir le module


Le tout reproduit 'a la mano' le fonctionnement du programme :


- la ligne de script ajoute au module la classe 'on' pour commencer (tu peux remplacer on par off mais ne supprime surtout pas le blanc situé après la 1ère apostrophe !)


- l'un des liens ferme le module, l'autre l'ouvre. Tu peux bien sûr modifier le texte de ces liens ('Fermer le module', 'ouvrir le module'), voire le remplacer par une image (cadenas
ouvert/fermé, pour rester cohérent ?). Ne charcute surtout pas les onclick !


Tout ça est à mettre en forme avec du css, c'est bien pourquoi j'ai donné une classe à chaque lien.


Youpla !


PS : j'avais complètement zappé la question sur la fermeture par survol. Bien sûr c'est techniquement possible, mais m'obligerait à réécrire le programme. Et je n'ai pas de rustine rapide à te
proposer pour ce coup-là :-(


PS2 : gngngngngngn de complications pour écrire du HTML ! Cette réponse devrait être un peu plus claire maintenant.



Sagan33 01/04/2012 12:57

Je retournerai sur ton article Javascript...
Tiens il y a un beau bouquet qui vient de s'afficher sur ton fond animé, Il faut quand même le faire ! c'est superbe !

Bren du fat ! 01/04/2012 22:22



Oh il est vieux ce bouquet ! As-tu essayé le choix 'catalogue' du petit menu en haut à gauche ? (prévoir un peu de temps libre...)



Sagan33 30/03/2012 20:21

Tout fonctionne ! cadenas visible, main au survol.
M e r c i bcp.
Bonne soirée,
Je vais tenter ma chance sur quelques bribes autres que je pourrais comprendre dans tes articles...

AïmD ! 01/04/2012 11:00



De rien :-) Je mettrai le coup du curseur dans le corps de l'article, ça rendra service et je n'y avais pas pensé lors de sa rédaction.



Sagan33 30/03/2012 19:29

Pas dur, pas dur, c'est à voir ! justement ce langage est très compliqué. Logique que dans une entreprise les ingénieurs informaticiens soient sous-payés (rire). Ils en connaissent plus que leur
Directeur, c'est eux qui font la pluie et le beau temps. Pas dur ? par ex. récemment, impossible de placer un script que j'avais trouvé. A inclure entre head, body, etc... c'est ce qui se disait
dans le script mais rien n'a jamais fonctionné, j'en suis restée avec mes hiéroglyphes. Alors dans ce cas, mieux vaut laisser tomber. Pour les débutants, s'ils ne veulent pas perdre un temps
précieux, s'abstenir. C'est ce que j'ai fait.
Dans tous les cas, merci pour la ligne de code avec les précisions.
A bientôt pour un super nouvel article ?
Bien cordialement.

AïmD ! 01/04/2012 10:58



"Langage très compliqué" : il y a pire, crois-moi ! :-D


Les scripts trouvés sur le Net sont de qualité inégale. Tous, en général, fonctionnent, mais certains seulement chez leurs auteurs : pas conçus pour éviter les interactions avec d'autres scripts.
Indice : si un script commence par "var ...." plutôt que par "function ...", mieux vaut se tenir à l'écart.


L'installation du script (=la manière de le greffer dans le blog, pas celle de s'en servir) peut aussi dérouter un blogueur OB. Celui-ci ne peut pas intervenir n'importe où dans la page de blog,
et en particulier pas dans son "head". Les blogueurs OB (moi, PêUR, Francisek...) le savent et adaptent leurs explications, les autres auteurs de script supposent généralement que leurs lecteurs
peuvent faire ce qu'ils veulent. L'adaptation aux possibilité d'OB n'est jamais très compliquée mais hors de portée d'un profane. C'est pourquoi j'ai écrit une notice d'installation standardisée
: elle vaut pour mes scripts mais aussi, je pense, pour tous les scripts proposés par des auteurs OB.


Enfin presque tous les scripts demandent de faire un peu de CSS pour peaufiner le résultat - et là, le niveau des lecteurs est très variable. J'essaie de donner les indications nécessaires, mais
on peut toujours oublier le détail qui tue !



Sagan33 30/03/2012 15:44

Hello,
J'ai mis des qq modules repliables à l'accueil du lien du blog indiqué + dans la partie articles.
Mais si dans la partie articles les petits cadenas s'affichent bien (taille de l'image 20px) les modules mis en cliquables dans l'accueil n'affichent pas le cadenas en totalité.
Est-ce que tu saurais par hasard (je suis sûre que oui !) ce qu'il faut rajouter dans la ligne css que tu as donnée avec l'adresse de l'image - box-titre pour afficher l'image du + ou - (dans mon
cas le cadenas) comme on le souhaite. En rajoutant width et height rien ne bouge.
Bon après-midi de vendredi.
Bien cordialement.

AïmD ! 30/03/2012 17:03



Dans le CSS d'accueil, il faut :


.box-titre h2 {margin-left:20px} et non 10px


Pour les modules cliquables, il serait bon aussi d'ajouter


#telmodule .box-titre, #tel_autremodule .box-titre {cursor:pointer}


pour que le curseur devienne une main au survol.


Pas dur ! :-)



Archives