Bonjour, je poste ce sujet car je n'ai pas trouvé comment faire pour que la chatbox s'ouvre lentement et pas d'un coup. Mon forum --> Click <--. La chatbox s'ouvre avec le bouton "Alohomora" et ça apparaît d'un coup j'aimerais entre autre que ça "glisse"
Merci d'avance

Salut

T'as essayé avec un de ces tutos ?
http://www.css-actif.com/t3467-chatbox-laterale-coulissante-methode-1
http://www.css-actif.com/t10366-chatbox-laterale-coulissante-methode-2?highlight=chatbox+lat%C3%A9ral

Je viens d'essayer (j'avais pas trouvé ces tutos ^^') et ça ne fait que masquer la chatbox par un bouton, ce que j'avais déjà. Ce que je veux moi c'est ouvrir la chatbox "lentement", qu'elle vienne en glissant et pas d'un coup ^^'

Merci d'avoir répondu .Lou

Hey. Dans le premier tuto donné par .Lou, remplace l'image :

Code:

<img src="URL_IMG_OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='URL_IMG_OUVRIR')?'block':'none'; this.src=(this.src=='URL_IMG_OUVRIR')?'URL_IMG_FERMER':'URL_IMG_OUVRIR';" />

Par ceci :

Code:

<img src="URL_IMG_OUVRIR" onClick="jQuery('#chatboxpop').animate({width:'toggle',opacity:'toggle'},1000);this.src=(this.src=='URL_IMG_OUVRIR')?'URL_IMG_FERMER':'URL_IMG_OUVRIR';" />

Pour t'expliquer, le grand changement se situe dans l'évènement onClick, où on remplace ceci :

Code:

document.getElementById('chatboxpop').style.display=(this.src=='URL_IMG_OUVRIR')?'block':'none';

par ceci :

Code:

jQuery('#chatboxpop').animate({width:'toggle',opacity:'toggle'},1000);

On appelle la div "chatboxpop" et applique une animation dessus. Entre les accolades, on détermine les propriétés visées (largeur, opacité) et leur comportement (passe à 0 et vice versa). Le chiffre détermine la durée de l'animation, en millisecondes.

Ah c'est super ça marche, seulement dans le premier tuto la chatbox se met dans le footer, au dessous du QEEL est-ce normal ?

Je rectifie, tu trouveras exactement la même chose à remplacer dans le 2e tutoriel, à ceci près que c'est dans le code javascript et qu'on devra ajouter des \ pour ellipser les ' de l'évènement onClick :

Code:

<img src="URL_IMG_OUVRIR" onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\',opacity:\'toggle\'},1000);this.src=(this.src==\'URL_IMG_OUVRIR\')?\'URL_IMG_FERMER\':\'URL_IMG_OUVRIR\';" />

Autrement, oui c'est normal. La chatbox dans ce tuto-là est ensuite positionnée sur le côté en CSS.
Elle se situe dans ce template-là surtout pour limiter son affichage à la page d'accueil.

Ah ça y'est, j'ai l'effet que je veux ! Merci beaucoup Doare ^^
Et encore merci à .Lou d'avoir participé !

Yop'
Je vois que le problème est résolu, par conséquent je classe !
Merci de l'avoir signalé