Un postit escamotable

L'idée est de compléter le dispositif précédent en ajoutant deux boutons de commande au  billet . Ces boutons se bornent à donner chacun une classe différente au div formant le  billet . L'aspect ouvert ou fermé du billet, l'affichage du bon bouton de commande… tout se règlera ensuite par du CSS.

Comme le seul JavaScript requis est un traitement d'événement (à savoir cliquer sur un bouton) cette solution est utilisable sur tout blog OB.

Le code HTML

Il grossit un peu :

 <div id="billet" class="ouvert"> <a href="#nogo" title="Fermeture du billet" class="fermeture" onclick="document.getElementById('billet').className='ferme';">[-]</a> <a href="#nogo" title="Ouverture du billet" class="ouverture" onclick="document.getElementById('billet').className='ouvert';">[+]</a> <div class="contenu"> Le texte de votre billet </div> </div> 

Le rôle de chaque lien est assez clair, je pense : lorsqu'on clique sur ce lien (onclick) trouver (getElementById) le  billet  dans la page et lui donner une certaine classe (className=...).

Le CSS associé

Ceci vous semble-t-il logique ?

• billet ouvert : l'image de fond est  la grande , on voit le contenu et le bouton de fermeture, on masque le bouton d'ouverture ;
• billet fermé : l'image de fond est une nouvelle image  petite  (je me contenterai ici d'un rectangle de couleur), on cache le contenu et le bouton de fermeture, on affiche le bouton d'ouverture.

Traduisons en CSS :

 /* ce qui est vrai pour le billet ouvert comme fermé*/ #billet {position:absolute; left:20%; top:50px} /* aspect du billet ouvert (=reprise de la version précédente) */ .ouvert {background-image:url(http:gnagnagna/billet.png); width:218px;height:150px} /* aspect du billet fermé */ .ferme {background:#ffffb7; border:1px solid gray; width:3em;height:2em} /* aspect du contenu (=reprise de la version précédente)*/ .contenu {padding:20px} /* emplacement des boutons de commande */ .ouverture, .fermeture {position:absolute; right:2px; top:2px} /* masquer/afficher les composants du billet selon son état */ .ouvert .ouverture, .ferme .fermeture, .ferme .contenu {display:none} 

C'est tout ? Oui.

---

Quelques remarques de détail :

• comme tout à l'heure, les valeurs numériques ne sont que des exemples. Que certaines soient exprimées en em plutôt qu'en px ne doit pas vous intimider ;
• j'ai choisi de placer les deux boutons de commande au même endroit dans le billet, en haut à droite (rappelez-vous qu'on n'en voit qu'un à la fois). Ce n'est bien sûr pas indispensable, juste que tout le monde fait comme ça ;
• j'ai aussi choisi d'afficher le billet toujours au même endroit, qu'il soit ouvert ou fermé. Mais vous pouvez changer ça en reportant la définition de left et/ou top dans les règles qui définissent l'aspect 'ouvert' ou 'fermé' (exemple : le présent blog) ;
• j'ai enfin choisi d'afficher le billet ouvert lors du chargement de la page, il vous suffit de changer sa classe pour inverser cette préférence ;
• pour aller vite les boutons ne se composent que de quelques caractères. Vous pouvez bien sûr créer un joli signe '+' et un signe '-' en guise d'images de fond (ce que j'ai fait sur ce blog) 
• toujours pour aller vite, le billet  fermé  se réduit à une couleur de fond et une bordure. Vous pouvez fabriquer une petite image si vous préférez (là aussi, je l'ai fait sur ce blog).

Quelques remarques de principe :

• vous voyez maintenant l'utilité de mettre le contenu dans un div à part ? ;-)
• rien ne porte un identifiant, exception faite du  billet  lui-même. Vous pouvez donc créer autant de billets que vous le désirez, pourvu que chacun porte un identifiant différent. Je vous laisse le soin de retoucher les deux petits bouts de JS et de compléter le CSS ;

---

Un peu de pensée profonde, pour conclure. Le principe technique est, finalement, très simple :

1. on clique sur un lien,
2. ça change une classe quelque part,
3. ce changement de classe fait que certaines règles CSS ne s'appliquent plus et que d'autres agissent.

C'est simple et très général, vous avez désormais de quoi créer n'importe quel gadget cliquable qui vous fait envie : pas seulement afficher ou masquer quelque chose, mais changer une image de fond, une police de caractères, voire un emplacement dans la page. Pour la petite histoire : c'est exactement le principe employé ici pour faire des "Lire la suite" ou pour donner leur pleine largeur à des photos très larges.

Autre conséquence agréable : puisque les deux petits bouts de JS n'interviennent pas directement sur l'aspect de leur cible mais se contentent d'en changer la classe, personnaliser ce gadget revient à personnaliser des classes en CSS. Autrement dit vous n'avez pas besoin de connaître les finesses de JavaScript (puisque je vous fournis le code nécessaire) mais seulement de savoir triturer du CSS. Sympathique, non ?

• Postit simple
• Postit escamotable
• Postit "intelligent"

Comments

[sagan33]

Comment ça s'il marche ?? mais bien évidemment ! en plus réalisé en 5mn. Parole, j'ai copié ton script et tout a fonctionné à merveille, quand on donne, comme ici, les bonnes informations. J'espère
que tu es allé te rendre compte par toi même sur mon blog. Idem pour les modules qui s'ouvrent et se referment... rien de plus simple quand il existe les bons codes.
Ce n'est pas flatterie, mais franchement, chez toi c'est de l'érudition. Le blog porte bien son nom.
Bonne soirée, encore merci.

[Aïe mes doigts !]

Merci merci ! C'était pure coquetterie d'artiste - et prudence de bidouilleur échaudé par certains accouchements difficiles...


Pour les mots élogieux ensuite, je t'en laisse l'entière responsabilité - je sais qu'il y a des lacunes dans mes topos, je les comble au fur et à mesure.

[sagan33]

Salut Monsieur le génie,
Merci mille fois pour ces partages. Je viens d'installer votre superbe post-it.
Bonne soirée à vous. Bien amicalement.
Geneviève.

[Aïe mes doigts !]

Et, heu... il marche ????


:-DDDD

[pieric62]

Pourquoi ne pas rendre le code encore plus court en utilisant jQuery.. c'est plus facile à manipuler que le javascript de base... ;)

[Aïe mes doigts !]

On pourrait, bien sûr, mais


1- je n'ai jamais appris à m'en servir, hé oui ! :-D


2-sur cet article le JS (purement online) est tout de même déjà très bref (une instruction par lien. Je veux bien tenter de raccourcir  mais...). Charger jquery pour ça me semble un peu
beaucoup. J'accepte volontier l'idée pour l'article suivant où le JS est (un peu) plus étoffé


2-bis chez overblog le recours à jquery (ou à tout élément ) est réservé au niveau privilège, or cet article se veut utilisable par tout blog


3-si jquery fait tout le boulot, à quoi ça sert que Brendie il se décarcasse ? ?


Plus sérieusement : les JS que je propose sont tous plutôt courts et didactiques. Rien d'aussi complexe que des temporisations partout pour un fondu enchaîné entre images de dimensions
différentes...

[Anna]

Très sympathique !
Si je n'étais pas si fainéante, je mettrais en application. Les choses étant ce qu'elles sont, je vais prétendre que je crois au minimalisme (pour mon blog, pas pour les autres qui savent en sortir
avec talent !)

[AïmD !]

Héhéhé... toi, tu sais parler aux hommes ! :-D


Plus sérieusement : beaucoup d' "effets dynamiques" (je cause riche, là !) se ramènent  à "je veux changer la présentation de quelque chose" : le faire apparaître ou disparaître, l'agrandir,
le réduire, etc. Pour obtenir ce changement "à la main", on peut


ajouter/supprimer des éléments HTML

ajouter des "style=.." à certains éléments

modifier les règles CSS applicables à ces éléments

changer la classe de ces éléments pour choisir un  jeu de règles parmi plusieurs.



JavaScript permet de reproduire par programmation chacune de ces actions - même, théoriquement, modifier des règles CSS (non pas modifier le fichier CSS mais modifier la représentation que s'en
fait le navigateur)


Le changement de classe est la technique la moins intrusive, la plus économique à programmer : trouver l'élément. puis modifier sa classe - rien d'autre. Modifier sa classe n'est pas très
compliqué, le trouver par JavaScript est direct si, comme ici, l'élément porte un identifiant. Alors pourquoi se priver ?


Mon "accordéon" de menus ne fait pas autre chose : les modules changent de classe quand on les survole, il y a un onmouseover et un onmouseout pour gérer ça. Le compliqué n'est pas d'écrire ces
deux on-trucs mais de les greffer au bon endroit : comme je ne peux modifier "à la main" le code HTML des modules, il faut réaliser cette greffe par JS, ce qui est de la technique plus
fastidieuse que virtuose.


Mais comme, ici, on crée soi-même le code HTML du billet, tout est plus facile et la part de JS se réduit au minimum indispensable. Glop glop ! J'ai voulu le faire ressortir :-)