chatbox coulissante par la droite

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Résolu chatbox coulissante par la droite

Message par lolo591 le Dim 13 Juil 2014 - 17:03

Bonjour à tous,
je souhaite installé une chatbox coulissante, j'ai trouvé comment faire a partir de ce topic http://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...  Smile 


Dernière édition par lolo591 le Jeu 17 Juil 2014 - 22:38, édité 3 fois

lolo591
****

Masculin
Messages : 245
Inscrit(e) le : 02/06/2014

http://planeteqashqai.com
lolo591 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par MlleAlys le Dim 13 Juil 2014 - 20:21

Bonjour,
le tutoriel se trouve ici ^^ :
http://forum.forumactif.com/t309533-creer-un-panneau-lateral-coulissant#2703434
vous trouverez à la fin le code pour la cb à droite

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par lolo591 le Dim 13 Juil 2014 - 21:15

super un grand merci 

lolo591
****

Masculin
Messages : 245
Inscrit(e) le : 02/06/2014

http://planeteqashqai.com
lolo591 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par lolo591 le Dim 13 Juil 2014 - 22:04

euh, en fait, le code fonctionne, elle se trouve bien a droite, mais elle ne coulisse pas, elle apparait au clic  Rolling Eyes 

lolo591
****

Masculin
Messages : 245
Inscrit(e) le : 02/06/2014

http://planeteqashqai.com
lolo591 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par lolo591 le Mar 15 Juil 2014 - 19:12

up

lolo591
****

Masculin
Messages : 245
Inscrit(e) le : 02/06/2014

http://planeteqashqai.com
lolo591 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par Neptunia le Mar 15 Juil 2014 - 19:42

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
Code:
$("#fp848").animate({"left":$(this).is(".fpclose")?-700:0},1500);
Ce qui provoque sa fermeture en coulissant sur la gauche. Il convient donc de remplacer left par right.

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);
          });
     
        });
Un dernier réglage au niveau de votre css qui devrait comporter ceci
/* 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}
Là encore votre CSS se réfère à la gauche. Il convient de remplacer également left par right et c'est fini.




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.

Neptunia
+ Hyperactif +

Féminin
Messages : 10398
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par lolo591 le Mer 16 Juil 2014 - 1:36

merci, ça avance, mais j'ai encore 2 problèmes,
- le 1er, j'ai changé les
Code:
width: 700px
par 900 et le code css
Code:
#fp848 { bottom: 10px; right: -705px;}
par -905 pour quelle soit un peu plus grande et du coup, elle ne se replie pas jusqu'au bout Sad
- le 2e, le fond de la chatbox est transparente et je n'arrive pas a y apporter ma couleur

lolo591
****

Masculin
Messages : 245
Inscrit(e) le : 02/06/2014

http://planeteqashqai.com
lolo591 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par Neptunia le Mer 16 Juil 2014 - 4:05

L'iframe de la chatbox comportait ceci
<iframe src="/chatbox/index.forum" style="width: 700px; height: 300px; border: 0" frameborder="0"></iframe>

Avez vous pensé à modifier la taille dans le javascript ?

Neptunia
+ Hyperactif +

Féminin
Messages : 10398
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par lolo591 le Mer 16 Juil 2014 - 11:04

oui, j'ai changé dans le java et dans le css, mais elle ne se referme pas en totalité

lolo591
****

Masculin
Messages : 245
Inscrit(e) le : 02/06/2014

http://planeteqashqai.com
lolo591 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par lolo591 le Jeu 17 Juil 2014 - 19:10

ptit up Smile

lolo591
****

Masculin
Messages : 245
Inscrit(e) le : 02/06/2014

http://planeteqashqai.com
lolo591 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par MlleAlys le Jeu 17 Juil 2014 - 20:20

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 :
Code:
$("#fp848").animate({"right":$(this).is(".fpclose")?-700:0},1500);
en 905, ce qui donne pour le javascript :
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
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par lolo591 le Jeu 17 Juil 2014 - 21:06

ouiiiiiiiiii youpiiii, ça marche,merci  Yahoo 
par contre, elle est toujours transparente  Mais oui 

lolo591
****

Masculin
Messages : 245
Inscrit(e) le : 02/06/2014

http://planeteqashqai.com
lolo591 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par MlleAlys le Jeu 17 Juil 2014 - 21:12

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 ?
/* 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
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chatbox coulissante par la droite

Message par lolo591 le Jeu 17 Juil 2014 - 21:47

j'ai trouvé, merci a tous  Affirmatif Bizz 

lolo591
****

Masculin
Messages : 245
Inscrit(e) le : 02/06/2014

http://planeteqashqai.com
lolo591 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum