chatbox coulissante par la droite
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
chatbox coulissante par la droite
Bonjour à tous,
je souhaite installé une chatbox coulissante, j'ai trouvé comment faire a partir de ce topic https://forum.forumactif.com/t369339-ouverture-de-la-chatbox-de-maniere-coulissante-slide#3124301 mais moi, je voudrais qu'elle soit placé a droite
si une ame charitable...
je souhaite installé une chatbox coulissante, j'ai trouvé comment faire a partir de ce topic https://forum.forumactif.com/t369339-ouverture-de-la-chatbox-de-maniere-coulissante-slide#3124301 mais moi, je voudrais qu'elle soit placé a droite
si une ame charitable...
Dernière édition par lolo591 le Jeu 17 Juil 2014 - 22:38, édité 3 fois
lolo591- ****
-
Messages : 249
Inscrit(e) le : 02/06/2014
Re: chatbox coulissante par la droite
Bonjour,
le tutoriel se trouve ici ^^ :
https://forum.forumactif.com/t309533-creer-un-panneau-lateral-coulissant#2703434
vous trouverez à la fin le code pour la cb à droite
le tutoriel se trouve ici ^^ :
https://forum.forumactif.com/t309533-creer-un-panneau-lateral-coulissant#2703434
vous trouverez à la fin le code pour la cb à droite
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: chatbox coulissante par la droite
super un grand
lolo591- ****
-
Messages : 249
Inscrit(e) le : 02/06/2014
Re: chatbox coulissante par la droite
euh, en fait, le code fonctionne, elle se trouve bien a droite, mais elle ne coulisse pas, elle apparait au clic
lolo591- ****
-
Messages : 249
Inscrit(e) le : 02/06/2014
lolo591- ****
-
Messages : 249
Inscrit(e) le : 02/06/2014
Re: chatbox coulissante par la droite
Bonjour ^^
Je vous invite à repartir du code du sujet que vous avez cité dans votre première page.
En y regardant de plus près, on voit que la chatbox est insérée dans une table de deux colonnes (<td>). La première est la chatbox en elle même sous forme d'iframe, la seconde, les boutons Ouvrir/Fermer.
Il convient donc d'inverser les deux cellules <td> pour que les boutons apparaissent à gauche du tchat.
Une ligne du script comporte aussi ceci
Ce qui nous donne au final ceci
Je me suis inspiré du code de base. Les images aussi sont adaptées à une position à droite de la chatbox, vous pouvez remplacer les deux images dans le script.
Je vous invite à repartir du code du sujet que vous avez cité dans votre première page.
En y regardant de plus près, on voit que la chatbox est insérée dans une table de deux colonnes (<td>). La première est la chatbox en elle même sous forme d'iframe, la seconde, les boutons Ouvrir/Fermer.
Il convient donc d'inverser les deux cellules <td> pour que les boutons apparaissent à gauche du tchat.
Une ligne du script comporte aussi ceci
- Code:
$("#fp848").animate({"left":$(this).is(".fpclose")?-700:0},1500);
Ce qui nous donne au final ceci
- Code:
$(function(){
$("body").append('<div id="fp848" class="fpanel"><table class="fptable"><tr><td class="fpbuttons"><span class="fpopen"><img src="http://i55.servimg.com/u/f55/18/83/38/44/chatbo11.png" /></span><span class="fpclose"><img src="http://i55.servimg.com/u/f55/18/83/38/44/chatbo12.png" /></span></td><td class="fpcontent"><iframe src="/chatbox/index.forum" style="width: 700px; height: 300px; border: 0" frameborder="0"></iframe></td></tr><table></div>');
$("#fp848 .fpbuttons > span").click(function(){
$(this).add($(this).siblings()).toggle();
$("#fp848").animate({"right":$(this).is(".fpclose")?-700:0},1500);
});
});
Là encore votre CSS se réfère à la gauche. Il convient de remplacer également left par right et c'est fini./* Chatbox coulissante */
.fpanel { position: fixed; z-index: 2; }
.fpclose,.fpopen { cursor: pointer; z-index: 2;}
.fpclose { display: none;z-index: 2; }
#fp848 { bottom: 10px; left: -705px;}
#fp848 .fpcontent { width: 700px; font-size:20px}
Je me suis inspiré du code de base. Les images aussi sont adaptées à une position à droite de la chatbox, vous pouvez remplacer les deux images dans le script.
Re: chatbox coulissante par la droite
merci, ça avance, mais j'ai encore 2 problèmes,
- le 1er, j'ai changé les
- le 2e, le fond de la chatbox est transparente et je n'arrive pas a y apporter ma couleur
- le 1er, j'ai changé les
- Code:
width: 700px
- Code:
#fp848 { bottom: 10px; right: -705px;}
- le 2e, le fond de la chatbox est transparente et je n'arrive pas a y apporter ma couleur
lolo591- ****
-
Messages : 249
Inscrit(e) le : 02/06/2014
Re: chatbox coulissante par la droite
L'iframe de la chatbox comportait ceci
Avez vous pensé à modifier la taille dans le javascript ?
<iframe src="/chatbox/index.forum" style="width: 700px; height: 300px; border: 0" frameborder="0"></iframe>
Avez vous pensé à modifier la taille dans le javascript ?
Re: chatbox coulissante par la droite
oui, j'ai changé dans le java et dans le css, mais elle ne se referme pas en totalité
lolo591- ****
-
Messages : 249
Inscrit(e) le : 02/06/2014
lolo591- ****
-
Messages : 249
Inscrit(e) le : 02/06/2014
Re: chatbox coulissante par la droite
re,
désolée, je n'avais pas fait attention au détail du coulissement ><"
Pour votre souci, il faut modifier aussi le 700 de cette ligne :
désolée, je n'avais pas fait attention au détail du coulissement ><"
Pour votre souci, il faut modifier aussi le 700 de cette ligne :
- Code:
$("#fp848").animate({"right":$(this).is(".fpclose")?-700:0},1500);
- Code:
$(function() {
$("body").append('<div id="fp848" class="fpanel"><table class="fptable"><tr><td class="fpbuttons"><span class="fpopen"><img src="http://i55.servimg.com/u/f55/18/83/38/44/chatbo11.png" /></span><span class="fpclose"><img src="http://i55.servimg.com/u/f55/18/83/38/44/chatbo12.png" /></span></td><td class="fpcontent"><iframe src="/chatbox/index.forum" style="width: 900px; height: 300px; border: 0" frameborder="0"></iframe></td></tr><table></div>');
$("#fp848 .fpbuttons > span").click(function() {
$(this).add($(this).siblings()).toggle();
$("#fp848").animate({"right":$(this).is(".fpclose") ? -905 : 0}, 1500);
});
});
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: chatbox coulissante par la droite
ouiiiiiiiiii youpiiii, ça marche,merci
par contre, elle est toujours transparente
par contre, elle est toujours transparente
lolo591- ****
-
Messages : 249
Inscrit(e) le : 02/06/2014
Re: chatbox coulissante par la droite
je la vois en bleu sur le forum de votre profil (mais je ne suis pas connectée)
essayez peut être d'ajouter votre couleur de fond à cet endroit dans le css ?
(j'ai mis noir au pif ^^)
essayez peut être d'ajouter votre couleur de fond à cet endroit dans le css ?
/* Chatbox coulissante */
.fpanel { position: fixed; z-index: 2; }
.fpclose,.fpopen { cursor: pointer; z-index: 2;}
.fpclose { display: none;z-index: 2; }
#fp848 { bottom: 10px; right: -905px;}
#fp848 .fpcontent { width: 700px; font-size:20px; background:black;}
(j'ai mis noir au pif ^^)
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: chatbox coulissante par la droite
j'ai trouvé, merci a tous
lolo591- ****
-
Messages : 249
Inscrit(e) le : 02/06/2014
Sujets similaires
» Faire une ChatBox latérale coulissante à droite.
» Chatbox latérale coulissante
» Bouton chatbox coulissante
» Chatbox beuguée à cause d'un "body" placé pour une PA à droite du forum
» Description coulissante
» Chatbox latérale coulissante
» Bouton chatbox coulissante
» Chatbox beuguée à cause d'un "body" placé pour une PA à droite du forum
» Description coulissante
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum