Chatbox latérale

pas à pas

Difficulté : Facile
Pré-requis :
- Connaitre le vocabulaire HTML
- Connaitre le vocabulaire CSS

Le code

Trouvable un peu partout en libre service, il est souvent accompagné d'explications sommaires pour le modifier. Seulement au dixième design, vous aurez peut-être oublié comment le modifier... Ou l'aurez modifié trop rapidement et ne le verrez plus fonctionner sans comprendre pourquoi.

http://www.css-actif.com/t15898-chat-box-lateral-coulissante
http://www.pub-rpg-design.com/t71709-chatbox-laterale-en-spoiler (necessite un compte sur PRD)
http://www.bazzart.org/t35365-chatbox-laterale (nécessite un compte sur Bazzart)

Bref, je ne vais pas refaire un enième tutoriel pour vous permettre de mettre en place la chatbox latérale... Ici, je vous propose d'apprendre comment et pourquoi ça marche, et ainsi savoir détecter pourquoi ça ne marche pas
Pour ce faire, je vais me concentrer sur la partie image du code, et plus précisément de la partie "onclick" contenu dans la balise HTML

Code:

<img src="OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='OUVRIR')?'block':'none';this.src=(this.src=='OUVRIR')?'FERMER':'OUVRIR';"/>

Bases de vocabulaire

Dans notre exemple, l'interaction ouvrir/fermer le panneau latéral contenant la chatbox est rendu possible grâce à un peu de javascript.

La théorie est assez simple : quand on clique sur une image ouvrir, ça ouvre le panneau. Quand on clique à nouveau dessus alors qu'elle est ouverte, ça se referme. Tout le monde sera d'accord avec ça.

L'action de cliquer en javascript se matérialise par ce qu'on appelle un évènement. Il en existe beaucoup bien sur, mais celui qui nous intéresse ici est donc celui du clic : "onclick"... oui, ça reste assez logique ! Il y a plusieurs façon de l'utiliser. Dans notre cas, il est écrit directement dans la balise html sur laquelle on devra cliquer : l'image d'ouverture.

Code:

<img src="OUVRIR" onClick="instructions javascript"/>

Pour définir les instructions à effectuer (comme on aurait les étapes d'une recette), on va avoir besoin de quelques mots clés que vous avez surement remarqué (ou que vous connaissez peut-être déjà). Ils vont notamment nous permettre de cibler les éléments html qu'on va vouloir manipuler, les attributs de ceux-ci ou leurs propriétés css.

En javascript, on sélectionne d'abord un ou des éléments de la page qu'on souhaite, puis on lui accole à l'aide de points ce qui est à manipuler. Cela peut être un attribut de la balise HTML, une propriété css ou une action à effectuer directement dessus. On peut avoir plusieurs points, ils sont traités dans l'ordre de lecture.

Code:

this.src

"this" est le mot clé pour "là où j'ai fait l'action". L'élément en cours de traitement si vous préférez. Ici, on a cliqué sur l'image; this est donc l'image. Et src, l'attribut HTML source de cette image, son url.

Code:

document.getElementById('chatboxpop').style.display

"document" est votre page html. C'est un mot clé souvent utilisé vu qu'on utilise souvent javascript pour interagir avec la page.
On y accole ensuite "getElementById", on demande donc à cette page : "donne-moi l'élément dont l'attribut "id" est ...", suivi, dans les parenthèses et guillemets, du nom de l'id qu'on cherche. Ici 'chatboxpop'. On cible donc une partie de la page, ici la table qui contient la chatbox, cachée pour le moment (mais existante).
".style.display" indique ensuite qu'on va modifier le style (c'est donc du css) de la propriété display de l'élément ciblé (chatboxpop)

Enfin, vous avez peut-être repéré que parfois il n'y avait qu'un symbole égal, parfois deux. Dans un grand nombre de langages informatiques, cela distingue deux actions différentes

Code:

x=2

On affecte la donnée "2" à x, ça signifie que x vaut 2 une fois que l'instruction est réalisée.

Code:

x==2

C'est le test pour savoir si x équivaut à la valeur 2. Ce n'est pas sur, il peut valoir n'importe quelle valeur. En general, on cherche ensuite à faire un traitement si c'est vrai, ou si c'est faux... ou les deux !

Les explications

Tout ce qui est contenu entre les guillemets de "onclick" est donc un script écrit dans le langage javascript qui se déclenche lorsque l'évènement "onclick" survient sur la partie HTML dans laquelle elle est contenu. En français et dans notre exemple, ça veut simplement dire que c'est une suite d'instructions qui se réalisent lorsqu'on clique sur l'image.

Ce script est court et s'appuie sur ce qu'on appelle l'opérateur ternaire "?". Il permet de poser une question (le test). Uniquement deux possibilités de réponse, vrai ou faux. On lui fourni alors en suivant ce qu'on doit faire dans chacun des deux cas, d'abord le vrai, ensuite le faux. Le symbole ":" sépare les deux cas, le ";" la fin de la réponse à la question. Il ne faut pas les oublier

On pourrait résumer comme cela :

Code:

(mon test est vrai) ? si oui utilise ça : sinon utilise plutôt ça;

Code:

(this.src=='OUVRIR')?'FERMER':'OUVRIR';

Vous pourrez donc constater que la portion de code ci-dessus ne fait donc que tester que la source (src) de élément cliqué (this) est OUVRIR. Si c'est oui, utilise FERMER. Si non (ça signifie que ce n'est pas OUVRIR), utilise OUVRIR.
L'élément cliqué, this, est l'image ; src est la source, l'url de l'image.

Cette technique est utilisé deux fois :

- une fois pour afficher/cacher le panneau de la chatbox

Code:

document.getElementById('chatboxpop').style.display=(this.src=='OUVRIR')?'block':'none';

Ce n'est que du css qui donne l'illusion d'ouverture/fermeture, à l'aide de la propriété display et de ses valeurs block/none. On dit donc que si le test est vrai, on affecte la valeur block au display de la table "chatboxpop"; si c'est faux c'est qu'on est déjà passé une fois (pour l'ouvrir), donc on met donc none pour la refermer.

- une fois pour changer l'image et pouvoir détecter si on est en mode ouvert ou en mode fermé

Code:

this.src=(this.src=='OUVRIR')?'FERMER':'OUVRIR';"

Ici, on affecte à src l'url de l'image fermé si elle est sur l'url d'ouverture, et inversement... Cela permet qu'au prochain clic, on puisse détecter suivant l'url de l'image si le panneau chatboxpop doit être ouvert, ou fermé...

Et à chaque clic, on effectue les deux tests, et on change les valeurs en conséquence

Et le premier clic ?

Effectivement, du coup pour le premier clic comment savoir ce qui va arriver ? C'est pour cela qu'il est important de bien vérifier ce qu'on à mis dans l'attribut de l'image : le lien de l'ouverture.
Et dans l'iframe dont id est "chatboxpop", on pense à bien mettre la propriété css display à none (cachée par défaut). Comme cela, le premier clic correspondra à l'ouverture.

Code:

<iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe>

Si par hasard vous voudriez l'afficher par défaut ouverte, il suffirait de mettre le lien de l'image de fermeture dans le src, et display à block pour l'iframe