Chatbox défilant doucement (JS)

[Farfanor]

Bonjour, j'ai tenté à maintes reprises de trouver réponse à ma question sur ce forum mais je n'ai vu aucun sujet correspondant à mon problème.

En effet, j'ai essayé d'installer une chatbox latérale sur mon forum (en javascript), ce qui a fonctionné, mais j'aimerais que, lorsqu'on l'ouvre, elle défile doucement, pour un soucis d'esthétique. Voici le code que j'utilise :

Code:

jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 150px; left: 0px;background-color: none;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 600px; height: 300px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 600px; height: 300px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i49.servimg.com/u/f49/15/49/30/85/chatbo17.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i49.servimg.com/u/f49/15/49/30/85/chatbo17.png\')?\'block\':\'none\';this.src=(this.src==\'http://i49.servimg.com/u/f49/15/49/30/85/chatbo17.png\')?\'http://i49.servimg.com/u/f49/15/49/30/85/fermer15.png\':\'http://i49.servimg.com/u/f49/15/49/30/85/chatbo17.png\';"/></td></tr></table>'); } );

Merci à vous et mes sincères excuses si un sujet a déjà été ouvert pour cette situation.

EDIT : Bon, et puis il me faudrait un code complet siouplaît, parce qu'apparemment le code ci-dessus ne fonctionne plus sur mon forum. J'ai dû faire trop de manipulations... Merci de m'éclairer

[Farfanor]

Petit UP !

Et petite question au passage : j'ai créé une nouvelle page Javascript avec le code ci-dessus, en activant le Javascript et la Chatbox sans l'afficher. Qu'aurais-je donc oublié ?

Pour information, j'ai malencontreusement touché aux templates overall_header et index_body, est-ce cela qui a provoqué la disparition de ma chatbox ?

D'avance merci.

[Ea]

Bonjour,


Pour avoir les scripts en partant d'un template overall_header_new modifié, il faut faire le changement de template demandé là :
https://forum.forumactif.com/t308422-nouveaute-forumactif-gestion-des-codes-javascript#edit-temp

Cordialement.

[Farfanor]

Superbe ! Ça marche, mille merci !

Bon, maintenant, ne me reste qu'à trouver une bonne âme voulant bien m'aiguiller sur le défilement fluide de la chatbox...

[Ea]

En utilisant ceci ( qui est dans le tutoriel sur les panneaux coulissants ), cela m'a donné ce code javascript :

Code:

$(function(){

   $("body").append('<div id="fp848" class="fpanel"><table class="fptable"><tr><td class="fpcontent"><iframe src="/chatbox/index.forum" style="width: 600px; height: 300px; border: 0" frameborder="0"></iframe></td><td class="fpbuttons"><span class="fpopen"><img src="http://i49.servimg.com/u/f49/15/49/30/85/chatbo17.png" /></span><span class="fpclose"><img src="http://i49.servimg.com/u/f49/15/49/30/85/fermer15.png" /></span></td></tr><table></div>');
   $("#fp848 .fpbuttons > span").click(function(){
      $(this).add($(this).siblings()).toggle();
      $("#fp848").animate({"left":$(this).is(".fpclose")?-600:0},1000);
   });

});

Et ce code css ( à ajouter dans PA > Affichage > Couleurs > Feuille de style ) :

Code:

.fpanel { position: fixed; }
.fpclose,.fpopen { cursor: pointer; }
.fpclose { display: none; }

#fp848 { bottom: 150px; left: -600px; }
#fp848 .fpcontent { width: 600px; }

Là l'apparition est à 1 seconde, pour changer ce temps il suffit de changer le 1000 dans le code javascript ( en fait c'est le nombre de milliseconde donc 1000 correspond à 1 seconde, 500 à 0,5 seconde et 3000 à 3 secondes par exemple ).

Cordialement.

[Farfanor]

Youhou ! Tout fonctionne. Un grand merci à vous, je mets l'icône résolu de suite.

[Ea]

Pour retirer l'espacement entre le bouton et la chatbox, on pourrait probablement ajouter ceci au css :

Code:

.fptable { border-collapse: collapse; }
.fptable td{ padding: 0; }

Cordialement.