AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [HTML] ChatBox latéral

    Partagez
    Denkou
    MasculinAge : 20Messages : 46

    le Mer 16 Déc 2009 - 11:21

    Rappel du premier message :

    Bonjour, voici un code qui vous permettera de faire ceci :

    Spoiler:

    Pour cela, allez dans P.A > Affichage > Generalité et dans le fenêtre Htlm inserer se code :

    Code:

    <table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><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></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>



    Pour personaliser :

    Code:

    <table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td>
    <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 690px; height: 390px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="ADRESSE DE L'IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='ADRESSE DE L'IMAGE OUVRIR')?'block':'none';this.src=(this.src=='ADRESSE DE L'IMAGE OUVRIR')?'ADRESSE DE L'IMAGE FERMEE':'ADRESSE DE L'IMAGE OUVRIR';"/>
    </td></tr></table>

    Voilà !

    Important : Faites attention aux " et aux ', sans cela le code ne fonctionne pas.

    Histoire de ne pas avoir 2 ChatBox, allez dans : P.A > Module > ChatBox > Ne plus afficher.

    Voilou !

    Edit Sparrow : veillez à avoir deux adresses d'image DIFFERENTES pour l'ouverture et la fermeture de la CB. Si vous souhaitez mettre la même image, hébergez-la deux fois pour que les adresses soient différentes.


    Dernière édition par Denkou le Mer 16 Déc 2009 - 11:41, édité 1 fois
    Zayl
    MasculinAge : 28Messages : 5311

    le Dim 28 Fév 2010 - 20:38

    Ah je connais ce code, il est très sympa, merci de l'avoir fait partager ^^
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Sam 6 Mar 2010 - 20:13

    @Denkou a écrit:
    Code:
    background-color: #none
    Bonsoir, cette partie de code est fausse.
    Voilà la syntaxe exacte :
    Code:
    background-color: transparent;
    ou éventuellement :
    Code:
    background-color: none;
    à essayer mais sans certitude pour le second.

    Pour les autres, pour l'effet de glissement, l'idéal reste de passer par la bibliothèque jquery.
    Je note dans un coin de vous proposer un script d'ici quelques semaines si ça vous intéresse.

    Bonne soirée à tous !

    PS : si jamais j'oublie n'hésitez pas à me relancer par MP !!
    PS 2 : j'ai envie de nettoyer un peu ce code, il n'est vraiment pas pratique !
    Je reposte juste derrière si j'ai trouvé de quoi faire mieux.




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Sam 6 Mar 2010 - 20:40

    Voilà une version exportable sur tout le forum si vous le souhaitez.
    Placez ce code dans votre feuille de style CSS :
    Code:
    #lateral_chat {
          position: fixed; /*positionne l'élément en fixé*/
          bottom: 50px; /*positionne l'élément à partir du bas du référent à 50px*/
          left: 0px; /*idem mais à partir du côté gauche*/
          background-color: #ffffff; /*couleur de fond...*/
          z-index:1000; /*pour s'assurer que l'élément se place devant le reste*/
       }
       iframe#chatboxlaterale {
          width: 690px; /*largeur de la box*/
          height: 390px; /*hauteur de la box*/
          margin: 0; /*on retire les marge*/
          padding: 0; /*on retire les marges internes*/
          overflow: none; /*on empêche l'apparition d'un ascenseur*/
       }
       .bouton {
          vertical-align: bottom; /*place le bouton en bas du cadre*/
       }
       .bouton img {
          cursor: pointer; /*fait apparaitre un doigt (comme un lien) au survol du bouton*/
       }
    Les /* xxx */ à la fin de chaque ligne sont là pour vous aider à comprendre le code, inutile de les supprimer, ce n'est pas compris par le navigateur.

    Voilà la partie de code HTML et javascript à placer dans le template "overall_header_new" juste après < body >.

    Code:
    <table id="lateral_chat">
       <tr>
          <td>
             <iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxlaterale" scrolling="no" style="display: none;" frameborder="0"></iframe>
          </td>
          
          <td class="bouton">
             <img id="img_bouton" src="ADRESSE DE L'IMAGE OUVRIR" onclick="document.getElementById('chatboxlaterale').style.display=(this.src=='ADRESSE DE L'IMAGE OUVRIR')?'block':'none';this.src=(this.src=='ADRESSE DE L'IMAGE OUVRIR')?'ADRESSE DE L'IMAGE FERMER':'ADRESSE DE L'IMAGE OUVRIR';"/>
          </td>
       </tr>
    </table>

    Surtout n'oubliez pas de bien avoir deux images différentes pour la fermeture et l'ouverture, même si au final vous sohaitez n'avoir qu'une seule image (graphiquement parlant). En fait le script javascript vérifie l'adresse de l'image au moment où on clique. Si l'adresse est celle de l'image OUVRIR, alors il ouvre et affiche l'image FERMER, et inversement. Il est donc important d'avoir deux adresses d'image différentes, même si ce sont deux fois les mêmes images !

    Bisous !




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Redemption
    MasculinAge : 23Messages : 196

    le Lun 8 Mar 2010 - 19:32

    C'est possible d'empêcher les invité et simple membre de voir la chatbox ?

    Donnez juste le droits à certain groupes quoi ^^

    Merci
    naruto-seikô
    MasculinAge : 21Messages : 178

    le Mer 17 Mar 2010 - 20:47

    Bonjour! Tout d'abord merci !
    J'ai un soucis :/ ! Lorsque je met le premier code [sans personnalisation] la CB fonctionne très bien! Mais dès que je personnalise rien ne va plus, j'ai beau cliquer sur "Ouvrir" la CB ne s'ouvre pas! J'ai vérifier et re-vérifier, je n'ai changer a part ajouté de nouveaux liens d'images !

    Merci encore une fois Wink





    Kit By Me
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Jeu 25 Mar 2010 - 10:32

    Hello,

    Pourrais-tu nous placer ton tronçon de code final une fois les modifications effectuées ?..
    Merci.

    Comme promis je vous ai conçu un petit script pour le même principe de positionnement de la box mais avec une animation. Ce script est présenté de manière général, vous pouvez y mettre votre chatbox en ajoutant le ligne IFRAME proposée par Denkou, mais vous pouvez y placer d'autres éléments aisément.

    Voici le petit tuto : http://creativejuiz.fr/donnees/simple-slide-box

    Je vais créer un autre sujet pour plus de lisibilité des astuces et compléter la liste des astuces.

    Bises

    PS : voici le lien de l'autre topic :
    http://www.never-utopia.com/trucs-et-astuces-f38/html-css-jquery-chatbox-laterale-coulissante-t26228.htm




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Ziktaon
    MasculinAge : 24Messages : 843

    le Dim 4 Avr 2010 - 18:17

    Bonjour, tout d'abord merci pour l'astuce, j'ai aimer le style et tout mais pourrais tu m'aider ??
    J'aimerai changer l'intérieur de la chat box, peut tu me dire comment on fait ?






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Yujoba
    MasculinAge : 21Messages : 1576

    le Dim 4 Avr 2010 - 23:10

    C'est-à-dire ? Si tu veut y mettre une image, cherche un peu, il y a un sujet divers code pour la chat box, un truc comme ça. Sinon, merci de préciser ce que tu veut Wink





    Sign by Yosumi
    Ziktaon
    MasculinAge : 24Messages : 843

    le Lun 5 Avr 2010 - 6:19

    Souvent quand dans les forum, on ouvre la chat box latéral, il y a un fond d'écran dans la chat box. Si il y a un code pour ca, peut tu me le donner ? Car moi j'ai pas réussi a trouver ^^.






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Pti' Biscuit
    MasculinAge : 21Messages : 1690

    le Sam 17 Avr 2010 - 23:55

    moi je mes le code mais sa ne me met rien xD
    J'ai beau en prendre plusieurs il y a juste le code et pas de CB
    aidez moi s'il vous plais ^^'





    ~ Canonnier of Calypso ~
    Lou'N@il
    FémininAge : 36Messages : 5

    le Sam 1 Mai 2010 - 8:47

    j'ai un soucis depuis un moment je craque
    je comprend pas du tout, elle ne se referme pas !!

    voila mon code

    Code:
    /*ChatBox*/


    <table style="position: fixed; bottom: 50px; left: 0px;background-color: #none;z-index:10000;"><tr><td><iframe src="/chatbox/chatbox.forum?page=front&" id="chatboxpop" scrolling="no" style="width: 600px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i39.tinypic.com/so8p06.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i39.tinypic.com/so8p06.png')?'block':'none';this.src=(this.src=='http://i39.tinypic.com/so8p06.png')?'http://i39.tinypic.com/so8p06.png':'http://i39.tinypic.com/so8p06.png';"/></td></tr></table> 


    merci de m'aider a comprendre mon erreur
    Okhmhaka
    FémininAge : 31Messages : 31708

    le Sam 1 Mai 2010 - 9:29

    Il faut t'assurer que les adresses des images servant à ouvrir et à fermer soient différentes, sinon ça ne se referme pas^^ Donc même si tu utilises la même image, il te faut l'héberger deux fois afin que les deux n'aient pas la même adresse.



    aymene256
    MasculinAge : 21Messages : 245

    le Sam 1 Mai 2010 - 9:32

    Merci pour cette astuce,je la cherchais justement.



    glambabe
    FémininAge : 32Messages : 62

    le Lun 31 Mai 2010 - 1:09

    super merci Denkou!! ca marche!
    Sabrina
    FémininAge : 35Messages : 6

    le Mar 31 Aoû 2010 - 2:38

    Ah... génial, simple et efficace ! Merci !
    Kal57
    MasculinAge : 29Messages : 292

    le Dim 5 Déc 2010 - 16:09

    Bonjour, j'ai aussi un problème avec la chatbox latérale, les images "Ouvrir" et "Fermer" sont décalées (voir mon forum de test). Comment faire pour que l'image "Ouvrir" soit bien contre le côté gauche de l'écran, et l'image "Fermer" contre la chatbox s'il vous plaît ?
    Merci d'avance Wink

    P.S. : Je précise que j'ai utilisé les codes de la version exportable sur tout le forum donnés par Riku Asakura en page 2.



    Kal57
    MasculinAge : 29Messages : 292

    le Ven 10 Déc 2010 - 23:19

    C'est bon, problème résolu ^^

    Il y avait un width: 96%; dans mon CSS que je devais supprimer, et il fallait aussi que je rajoute cette ligne de code dans mon CSS :

    Code:
    #lateral_chat { border-collapse: collapse; } #lateral_chat td { padding: 0; }



    Nyla
    FémininAge : 25Messages : 84

    le Sam 12 Mar 2011 - 7:03

    Genial ! Merci !
    alcantara
    FémininAge : 18Messages : 121

    le Mar 10 Mai 2011 - 21:07

    voilà , j'ai enfin trouver ce que je voulais pour mon forum test[enfin , forum de test quoi , d'ou son nom xD] , donc breff , tuto simple & parfait;)

    ha oui , juste une ptite question.. je trouve que la chattbox , prends un peux [beaucoup] de place , je voudrais savoir comment faire pour diminuer sa longueur.. largeur parfait Very Happy


    merci♥
    Orange Pressée
    FémininAge : 29Messages : 4

    le Dim 22 Mai 2011 - 23:31

    Merci pour le code, c'est génial!
    Daddoo
    FémininAge : 26Messages : 23

    le Mer 1 Juin 2011 - 23:18

    Merci :) Comment faire pour que sa reste sur toutes les pages ? :)
    alcantara
    FémininAge : 18Messages : 121

    le Mer 1 Juin 2011 - 23:18

    Dabboo , je venais justement demander la même question ?:)
    Daddoo
    FémininAge : 26Messages : 23

    le Mer 1 Juin 2011 - 23:19

    Ah désolé. Je ne regarde pas trop les derniers messages ^.^
    Je regarderais la prochaine fois Wink Encore désolé ..
    Slyfoa
    FémininAge : 31Messages : 8

    le Dim 19 Juin 2011 - 14:18

    Merci beaucoup !
    C'est parfait cheers
    Minaso
    MasculinAge : 20Messages : 145

    le Dim 19 Juin 2011 - 14:32

    Sur un forum xooit nous devons mettre le code où ?





    Spoiler:








    Contenu sponsorisé

    Aujourd'hui à 17:30


      La date/heure actuelle est Lun 5 Déc 2016 - 17:30