Forum de référencement pour forums RPG

Le Deal du moment : -55%
Friteuse sans huile – PHILIPS – Airfryer ...
Voir le deal
49.99 €

    [Javascript] Chatbox latérale - explications

    [Javascript] Chatbox latérale - explications Empty [Javascript] Chatbox latérale - explications

    Message n°1 message rédigé Jeu 3 Aoû - 10:09

    Lyskhat
    Louis d'Or : 1469
    Messages : 1881
    Age : 38
    Localisation : Gironde

    Chatbox latérale


    pas à pas


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

    Tutoriel Collaboratif. Quelque chose vous semble erroné ou vous voudriez ajouter des informations sur ce tutoriel ? Une autre façon de faire la même chose vous semble intéressante à partager ? N'hésitez pas à poster un message à la suite et, si l'auteur ou le staff trouve votre remarque pertinente, votre contribution sera rajouté sous forme de citation au bon endroit dans le texte ou à la suite du tutoriel.


    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 Razz
    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 Wink

    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 Wink


    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 Wink


      La date/heure actuelle est Mer 27 Nov - 3:21