Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Chatbox défilant doucement (JS)

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

Résolu Chatbox défilant doucement (JS)

Message par Farfanor le Mer 2 Mai 2012 - 19:03

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 Smile


Dernière édition par Farfanor le Ven 4 Mai 2012 - 16:54, édité 1 fois
avatar

Farfanor
***

Féminin
Messages : 116
Inscrit(e) le : 15/02/2010

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

Résolu Re: Chatbox défilant doucement (JS)

Message par Farfanor le Jeu 3 Mai 2012 - 19:04

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.
avatar

Farfanor
***

Féminin
Messages : 116
Inscrit(e) le : 15/02/2010

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

Résolu Re: Chatbox défilant doucement (JS)

Message par Ea le Jeu 3 Mai 2012 - 19:20

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.
avatar

Ea
Aidactif
Aidactif

Messages : 23491
Inscrit(e) le : 04/04/2008

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

Résolu Re: Chatbox défilant doucement (JS)

Message par Farfanor le Jeu 3 Mai 2012 - 19:47

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... Siffleur
avatar

Farfanor
***

Féminin
Messages : 116
Inscrit(e) le : 15/02/2010

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

Résolu Re: Chatbox défilant doucement (JS)

Message par Ea le Jeu 3 Mai 2012 - 20:41

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.
avatar

Ea
Aidactif
Aidactif

Messages : 23491
Inscrit(e) le : 04/04/2008

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

Résolu Re: Chatbox défilant doucement (JS)

Message par Farfanor le Ven 4 Mai 2012 - 16:53

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

Farfanor
***

Féminin
Messages : 116
Inscrit(e) le : 15/02/2010

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

Résolu Re: Chatbox défilant doucement (JS)

Message par Ea le Ven 4 Mai 2012 - 17:04

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.
avatar

Ea
Aidactif
Aidactif

Messages : 23491
Inscrit(e) le : 04/04/2008

Ea 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