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
    Marie
    FémininAge : 27Messages : 1911

    le 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 Par Sébastien. Merci beaucoup!
    Taktiik
    MasculinAge : 22Messages : 2291

    le 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
    FémininAge : 27Messages : 1911

    le Ven 25 Nov 2011 - 23:33

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




    Kit Par Sébastien. Merci beaucoup!
    Potter's
    FémininAge : 18Messages : 71

    le Lun 19 Déc 2011 - 15:39

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

    le 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
    MasculinAge : 20Messages : 158

    le 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
    DiAnOs
    MasculinAge : 16Messages : 390

    le 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



    Potter's
    FémininAge : 18Messages : 71

    le Lun 19 Déc 2011 - 16:43

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

    le 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. :/



    Potter's
    FémininAge : 18Messages : 71

    le Lun 19 Déc 2011 - 17:46

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

    le Lun 19 Déc 2011 - 20:20

    Mouais... :/



    Potter's
    FémininAge : 18Messages : 71

    le Lun 19 Déc 2011 - 20:32

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

    le 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 :)
    DiAnOs
    MasculinAge : 16Messages : 390

    le 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 ! ^^)



    Potter's
    FémininAge : 18Messages : 71

    le Jeu 22 Déc 2011 - 16:38

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

    le 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
    FémininAge : 21Messages : 40

    le Sam 7 Jan 2012 - 19:20

    Merci pour le tuto'



    Amelia sullivan
    FémininAge : 23Messages : 379

    le 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
    MasculinAge : 29Messages : 11

    le 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
    FémininAge : 37Messages : 206

    le 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
    MasculinAge : 31Messages : 12

    le Sam 18 Fév 2012 - 0:27

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

    le Sam 18 Fév 2012 - 12:32

    Super Wink
    Kal57
    MasculinAge : 29Messages : 292

    le 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 ?



    Kal57
    MasculinAge : 29Messages : 292

    le Lun 20 Fév 2012 - 1:57

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



    Amiyah
    FémininAge : 21Messages : 47

    le Dim 6 Mai 2012 - 20:36

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

    Aujourd'hui à 21:10


      La date/heure actuelle est Mer 7 Déc 2016 - 21:10