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

Ven 25 Nov 2011 - 22:51

Marie

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

PA

Module

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,

PA

Général

Configuration

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! :)

Ven 25 Nov 2011 - 22:58

Taktiik

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

Ven 25 Nov 2011 - 23:33

Marie

Age : 35Messages : 2206

Ven 25 Nov 2011 - 23:33

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

Lun 19 Déc 2011 - 15:39

Potter's

Age : 26Messages : 71

Lun 19 Déc 2011 - 15:39

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

Lun 19 Déc 2011 - 16:17

titou9322

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

Lun 19 Déc 2011 - 16:17

titou9322

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

Lun 19 Déc 2011 - 16:42

DiAnOs

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

Lun 19 Déc 2011 - 16:43

Potter's

Age : 26Messages : 71

Lun 19 Déc 2011 - 16:43

Oui je ne sais pas comment faire :$

Lun 19 Déc 2011 - 17:07

DiAnOs

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

Lun 19 Déc 2011 - 17:46

Potter's

Age : 26Messages : 71

Lun 19 Déc 2011 - 17:46

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

Lun 19 Déc 2011 - 20:20

DiAnOs

Age : 24Messages : 390

Lun 19 Déc 2011 - 20:20

Mouais... :/

Lun 19 Déc 2011 - 20:32

Potter's

Age : 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 :/

Jeu 22 Déc 2011 - 15:02

Marwen

Age : 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 :)

Jeu 22 Déc 2011 - 16:37

DiAnOs

Age : 24Messages : 390

Jeu 22 Déc 2011 - 16:37

Merci !

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

Jeu 22 Déc 2011 - 16:38

Potter's

Age : 26Messages : 71

Jeu 22 Déc 2011 - 16:38

Merci c'est beaucoup mieux :)

Lun 2 Jan 2012 - 22:41

yaya-kun

Age : 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 ^^

Sam 7 Jan 2012 - 19:20

Romee

Age : 29Messages : 40

Sam 7 Jan 2012 - 19:20

Merci pour le tuto'

Jeu 26 Jan 2012 - 6:04

Amelia sullivan

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

Jeu 9 Fév 2012 - 11:40

ZasshuNeko

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

Sam 11 Fév 2012 - 8:43

CathyCréation

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

Sam 18 Fév 2012 - 0:27

Soushi

Age : 39Messages : 12

Sam 18 Fév 2012 - 0:27

Sympa cette astuce, ça me plait, merci bien =)

Sam 18 Fév 2012 - 12:32

phinolex

Age : 25Messages : 63

Sam 18 Fév 2012 - 12:32

Super

Dim 19 Fév 2012 - 1:29

Kal57

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

Lun 20 Fév 2012 - 1:57

Kal57

Age : 37Messages : 292

Lun 20 Fév 2012 - 1:57

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

Dim 6 Mai 2012 - 20:36

Amiyah

Age : 29Messages : 47

Dim 6 Mai 2012 - 20:36

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

Contenu sponsorisé

ChatBox latérale (avec ou sans transition)

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée