AccueilDernières imagesRechercherS'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.

Le Deal du moment :
Coffret dresseur d’élite ETB ...
Voir le deal
56.90 €
Le Deal du moment :
Fnac : 2 Funko Pop achetées : le 3ème ...
Voir le deal

    ChatBox latérale (avec ou sans transition)

    Denkou
    Denkou
    MasculinAge : 28Messages : 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:

    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
    Marie
    Marie
    FémininAge : 34Messages : 2206

    Ven 25 Nov 2011 - 22:51

    Coucou!

    Qui ne rêve pas de tchatter tout en écrivant leur message? Very Happy Bah c'est possible d'avoir une tchatbox à tout les pages même si vous êtes en train de poster!

    Premièrement,

    Direction: Arrow PA Arrow Module Arrow Gestion des pages HTML

    Crée une page HTML. Cochez non et non aux deux questions puis n'oubliez pas de donner un titre!

    Collez ce code dans la page:

    Code:
    jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><iframe src="        /chatbox/index.forum?page=front?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==\'IMAGE POUR OUVRIR')?\'block\':\'none\';this.src=(this.src==\'IMAGE POUR OUVRIR')?\'IMAGE POUR FERMER\':\'IMAGE POUR OUVRIR\';"/></td></tr></table>'); } );


    Bien attendu Vous devez remplacer les images pour mieux l'harmoniser à votre thème. Sinon, vous avez celui de base:

    Code:
    jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><iframe src="        /chatbox/index.forum?page=front?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>'); } );

    Ensuite direction,

    Arrow PA Arrow Général Arrow Configuration Arrow Général

    Vous mettez ça:

    Code:
    <script type=text/javascript src=/-h2.htm></script>

    Dans la description du site. Si vous avez mis une phrase, ça ne dérange en rien. Le chiffre 2 est le numéro de la page que vous avez crée donc regarder bien le numéro de la page HTLM. Puis valider. Vérifier si vous l'avez sur toute les pages. :) Si vous avez un soucis n'hésitez pas à me le demander!

    Tuto: ICI

    Enjoy! :)



    /

    Kit fait par Arpège. Merci! :love:
    Taktiik
    Taktiik
    MasculinAge : 29Messages : 2292

    Ven 25 Nov 2011 - 22:58

    Sinon, on peut le mettre dans le gestionnaire de codes Javascript et cocher le bouton sur toutes les pages =)

    Cordialement~~
    Taktiik.

    Marie
    Marie
    FémininAge : 34Messages : 2206

    Ven 25 Nov 2011 - 23:33

    Oula! Pas mal! ^^ Je ne savais pas ça du tout. :)



    /

    Kit fait par Arpège. Merci! :love:
    Potter's
    Potter's
    FémininAge : 26Messages : 71

    Lun 19 Déc 2011 - 15:39

    Avec la CB latéral je n'arrive pas à me connecter :/
    titou9322
    titou9322
    MasculinAge : 28Messages : 158

    Lun 19 Déc 2011 - 16:17

    Bonjour alors voila moi j'ai un petit pb pour se code j'ai la tchat box mais le liens de connexion ou de deconnexion ne marche pas
    titou9322
    titou9322
    MasculinAge : 28Messages : 158

    Lun 19 Déc 2011 - 16:17

    Avec la CB latéral je n'arrive pas à me connecter :/

    a bah j'ai le meme pb que toi
    avatar
    DiAnOs
    MasculinAge : 24Messages : 390

    Lun 19 Déc 2011 - 16:42

    Merci du tuto ! Je cherchais comment faire ça partout... en vain. ^^"
    Sinon j'ai un petit problème : Le bouton Connexion/Déconnexion de la chatbox ne fonctionne plus. C'est normal ? Shocked



    ChatBox latérale (avec ou sans transition) - Page 4 Comman27
    Potter's
    Potter's
    FémininAge : 26Messages : 71

    Lun 19 Déc 2011 - 16:43

    Oui je ne sais pas comment faire :$
    avatar
    DiAnOs
    MasculinAge : 24Messages : 390

    Lun 19 Déc 2011 - 17:07

    Moi je fais comme ça :

    1- Je me rend à Adresse de mon forum/chatbox/index.forum?
    2- Connexion.
    3- J'ouvre la chatbox latérale.
    4- Je clique sur Archives, puis je suis connecté.

    Mais c'est dérangeant de faire ça sans arrêt juste pour une connexion à la chatbox. :/



    ChatBox latérale (avec ou sans transition) - Page 4 Comman27
    Potter's
    Potter's
    FémininAge : 26Messages : 71

    Lun 19 Déc 2011 - 17:46

    Moi je suis obligé d'avoir deux CB, et au niveau esthétique ça craint :$
    avatar
    DiAnOs
    MasculinAge : 24Messages : 390

    Lun 19 Déc 2011 - 20:20

    Mouais... :/



    ChatBox latérale (avec ou sans transition) - Page 4 Comman27
    Potter's
    Potter's
    FémininAge : 26Messages : 71

    Lun 19 Déc 2011 - 20:32

    Quelqu'un pourrait nous aider?
    PS ; Moi aussi je suis obligé d'aller dans les archives :/
    Marwen
    Marwen
    FémininAge : 30Messages : 25

    Jeu 22 Déc 2011 - 15:02

    Pour ceux qui rencontre le problème de connexion, dans votre code, il faut remplacer :

    Code:
    <iframe src="/chatbox/chatbox.forum?page=front&"

    par :

    Code:
    <iframe src="/chatbox/index.forum?page=front&"

    Voilou :)
    avatar
    DiAnOs
    MasculinAge : 24Messages : 390

    Jeu 22 Déc 2011 - 16:37

    Merci ! Very Happy
    Ca faisait un moment que j'essayais de comprendre pourquoi ça ne marchait pas. (Même si je n'ai toujours pas compris, mais ça marche ! ^^)



    ChatBox latérale (avec ou sans transition) - Page 4 Comman27
    Potter's
    Potter's
    FémininAge : 26Messages : 71

    Jeu 22 Déc 2011 - 16:38

    Merci c'est beaucoup mieux :)
    yaya-kun
    yaya-kun
    MasculinAge : 35Messages : 125

    Lun 2 Jan 2012 - 22:41

    bonjour, j'ai regardé un peu toutes les réponses, mais je n'ai pas de solution.

    Je n'arrive pas non plus à me connecter. J'ai pourtant bien essayé de remplacer le code mais rien n'y fait <.<

    Voici mon template :











    onclick="document.getElementById('chatboxlaterale')
    .style.display=(this.src=='http://www.pixyup.com/uploads/022204454f021bed59b89.png')?'block':'none';
    this.src=(this.src=='http://www.pixyup.com/uploads/022204454f021bed59b89.png')
    ?'http://www.pixyup.com/uploads/022159354f021ab739fba.png':
    'http://www.pixyup.com/uploads/022204454f021bed59b89.png';"/>

    Merci d'avance :)


    edit : problème résolu ^^
    Romee
    Romee
    FémininAge : 28Messages : 40

    Sam 7 Jan 2012 - 19:20

    Merci pour le tuto'



    ChatBox latérale (avec ou sans transition) - Page 4 Tumblr_nno4a4w5gs1riczrxo4_500
    Amelia sullivan
    Amelia sullivan
    FémininAge : 30Messages : 380

    Jeu 26 Jan 2012 - 6:04

    Bonjour je vudrais savoir s'il y un code supplémentaire pour que la box glisse doucement au lieux d'apparaître brusquement. Merci
    ZasshuNeko
    ZasshuNeko
    MasculinAge : 37Messages : 11

    Jeu 9 Fév 2012 - 11:40

    Merci DENKOU
    J'aimerais te poser une question, ce code fonctionne t'il si je désire mettre du code javascript ?
    Par exemple utiliser l'effet coulissant de ton code, mais que ce dernier ne contienne pas la chat box mais par exemple un formulaire codé en Javascript.

    Merci !
    CathyCréation
    CathyCréation
    FémininAge : 44Messages : 207

    Sam 11 Fév 2012 - 8:43

    Bonjour
    super j'adore
    mais voila je l'ai mise et je sais pas me connectée dessus
    alors que d'habitude je suis connectée automatiquement
    cmt doi je faire?
    Soushi
    Soushi
    MasculinAge : 38Messages : 12

    Sam 18 Fév 2012 - 0:27

    Sympa cette astuce, ça me plait, merci bien =)
    phinolex
    phinolex
    MasculinAge : 24Messages : 63

    Sam 18 Fév 2012 - 12:32

    Super Wink
    Kal57
    Kal57
    MasculinAge : 36Messages : 292

    Dim 19 Fév 2012 - 1:29

    Riku Asakura a écrit: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 !

    Bonjour, comment faire pour placer la chatbox à droite et non à gauche ?



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

    Lun 20 Fév 2012 - 1:57

    C'est bon problème résolu :)



    ChatBox latérale (avec ou sans transition) - Page 4 Signat15
    Amiyah
    Amiyah
    FémininAge : 28Messages : 47

    Dim 6 Mai 2012 - 20:36

    Je n'arrivais pas à en retrouver une, maintenant c'est fait merci !
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 7:49