AccueilRechercherS'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.


    ChatBox latérale (avec ou sans transition)

    Denkou
    Denkou
    MasculinAge : 25Messages : 46

    Mer 16 Déc 2009 - 11:21

    Rappel du premier message :


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


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

    Spoiler:
    ChatBox latérale (avec ou sans transition) - Page 2 Animat10

    Ensuite, on va aller mettre la chatbox où vous voulez qu'elle soit.

    Si vous voulez qu'elle apparaisse uniquement sur l'index, vous allez dans :
    Panneau d'administration > Affichage > Page d'accueil > Generalité

    Si vous voulez qu'elle apparaisse sur toutes les pages, vous allez dans :
    Panneau d'administration > Affichage > Templates > Général > overhall_header
    Et vous allez mettre le code juste sous la balise body. Pour phpBB2, la balsie body ressemble à ceci :
    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">




    Puis, vous mettez le code de la chatbox à l'endroit choisi.

    Code normal de la chatbox :
    Code:
    <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; 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>

    Code de la chatbox avec transition fluide :
    Code:
      <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
        <tr>
          <td style="background-color: #ffffff; padding: 2px;">
            <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" 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.left=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'0px':'-804px';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 personnaliser, vous pouvez utiliser les codes ci-bas :

    Code normal de la chatbox :
    Code:
    <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; 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 IMAGE OUVRIR')?'block':'none';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMEE':'ADRESSE DE IMAGE OUVRIR';"/></td></tr></table>

    Code de la chatbox avec transition fluide :
    Code:
      <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
        <tr>
          <td style="background-color: #ffffff; padding: 2px;">
            <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" frameborder="0">
            </iframe>
          </td>
          <td style="vertical-align: bottom;">
            <img src="ADRESSE DE IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.left=(this.src=='ADRESSE DE IMAGE OUVRIR')?'0px':'-804px';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMER':'ADRESSE DE 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.

    Vous avez une question ou un problème pour installer ou personnaliser ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.


    Dernière édition par Denkou le Mer 16 Déc 2009 - 11:41, édité 1 fois
    Zayl
    Zayl
    FémininAge : 31Messages : 5313

    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
    Riku Asakura
    MasculinAge : 33Messages : 5736

    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.



    ChatBox latérale (avec ou sans transition) - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    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 !



    ChatBox latérale (avec ou sans transition) - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Redemption
    Redemption
    MasculinAge : 27Messages : 196

    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ô
    naruto-seikô
    MasculinAge : 25Messages : 178

    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



    ChatBox latérale (avec ou sans transition) - Page 2 184950Prince_persia

    Kit By Me
    Riku Asakura
    Riku Asakura
    MasculinAge : 33Messages : 5736

    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 :
    https://www.never-utopia.com/trucs-et-astuces-f38/html-css-jquery-chatbox-laterale-coulissante-t26228.htm



    ChatBox latérale (avec ou sans transition) - Page 2 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Ziktaon
    Ziktaon
    MasculinAge : 28Messages : 843

    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 ?



    ChatBox latérale (avec ou sans transition) - Page 2 719846zikisigna



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

    Yujoba
    Yujoba
    MasculinAge : 26Messages : 1576

    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



    ChatBox latérale (avec ou sans transition) - Page 2 Yujoba10

    Sign by Yosumi
    Ziktaon
    Ziktaon
    MasculinAge : 28Messages : 843

    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 ^^.



    ChatBox latérale (avec ou sans transition) - Page 2 719846zikisigna



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

    Pti' Biscuit
    Pti' Biscuit
    MasculinAge : 25Messages : 1691

    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 ^^'



    ChatBox latérale (avec ou sans transition) - Page 2 2k0uoy

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

    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
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    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.



    sign
    aymene256
    aymene256
    MasculinAge : 25Messages : 245

    Sam 1 Mai 2010 - 9:32

    Merci pour cette astuce,je la cherchais justement.



    ChatBox latérale (avec ou sans transition) - Page 2 Signesuke
    avatar
    glambabe
    FémininAge : 36Messages : 62

    Lun 31 Mai 2010 - 1:09

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

    Mar 31 Aoû 2010 - 2:38

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

    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.



    ChatBox latérale (avec ou sans transition) - Page 2 Signat15
    Kal57
    Kal57
    MasculinAge : 33Messages : 292

    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; }



    ChatBox latérale (avec ou sans transition) - Page 2 Signat15
    Nyla
    Nyla
    FémininAge : 29Messages : 84

    Sam 12 Mar 2011 - 7:03

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

    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
    Orange Pressée
    FémininAge : 33Messages : 4

    Dim 22 Mai 2011 - 23:31

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

    Mer 1 Juin 2011 - 23:18

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

    Mer 1 Juin 2011 - 23:18

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

    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
    Slyfoa
    FémininAge : 35Messages : 8

    Dim 19 Juin 2011 - 14:18

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

    Dim 19 Juin 2011 - 14:32

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



    ChatBox latérale (avec ou sans transition) - Page 2 Signess

    Spoiler:
    ChatBox latérale (avec ou sans transition) - Page 2 2188144363680_link_de_ganon

    ChatBox latérale (avec ou sans transition) - Page 2 Sign102bf05a3

    ChatBox latérale (avec ou sans transition) - Page 2 Sign9r

    ChatBox latérale (avec ou sans transition) - Page 2 Signature-itachi-2bbcd2a

    Contenu sponsorisé


      La date/heure actuelle est Jeu 4 Mar 2021 - 12:58