ChatBox latérale (avec ou sans transition)

Mer 16 Déc 2009 - 11:21

Denkou

Age : 28Messages : 46

Mer 16 Déc 2009 - 11:21

Rappel du premier message :

#html #chatbox #position_fixe #auteur_Denkou #phpBB2 #toutes_les_versions

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

Dim 28 Fév 2010 - 20:38

Zayl

Age : 34Messages : 5313

Dim 28 Fév 2010 - 20:38

Ah je connais ce code, il est très sympa, merci de l'avoir fait partager ^^

Sam 6 Mar 2010 - 20:13

Riku Asakura

Age : 37Messages : 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.

Sam 6 Mar 2010 - 20:40

Riku Asakura

Age : 37Messages : 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 !

Lun 8 Mar 2010 - 19:32

Redemption

Age : 31Messages : 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

Mer 17 Mar 2010 - 20:47

naruto-seikô

Age : 29Messages : 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

Jeu 25 Mar 2010 - 10:32

Riku Asakura

Age : 37Messages : 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

Dim 4 Avr 2010 - 18:17

Ziktaon

Age : 32Messages : 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 ?

Dim 4 Avr 2010 - 23:10

Yujoba

Age : 29Messages : 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

Lun 5 Avr 2010 - 6:19

Ziktaon

Age : 32Messages : 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 ^^.

Sam 17 Avr 2010 - 23:55

Pti' Biscuit

Age : 29Messages : 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 ^^'

Sam 1 Mai 2010 - 8:47

Lou'N@il

Age : 44Messages : 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

Sam 1 Mai 2010 - 9:29

Sparrow-style

Age : 39Messages : 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.

Sam 1 Mai 2010 - 9:32

aymene256

Age : 29Messages : 245

Sam 1 Mai 2010 - 9:32

Merci pour cette astuce,je la cherchais justement.

Lun 31 Mai 2010 - 1:09

glambabe

Age : 40Messages : 62

Lun 31 Mai 2010 - 1:09

super merci Denkou!! ca marche!

Mar 31 Aoû 2010 - 2:38

Sabrina

Age : 43Messages : 6

Mar 31 Aoû 2010 - 2:38

Ah... génial, simple et efficace ! Merci !

Dim 5 Déc 2010 - 16:09

Kal57

Age : 37Messages : 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.

Ven 10 Déc 2010 - 23:19

Kal57

Age : 37Messages : 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; }

Sam 12 Mar 2011 - 7:03

Nyla

Age : 33Messages : 84

Sam 12 Mar 2011 - 7:03

Genial ! Merci !

Mar 10 Mai 2011 - 21:07

alcantara

Age : 26Messages : 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