Créer un panneau latéral coulissant

par Alex Fowl Dim 17 Juil 2011 - 14:08

Créer un panneau latéral coulissant

Cette astuce va vous expliquer comment créer un panneau latéral coulissant, pour y mettre du texte, des images ou même la ChatBox de votre forum.

Création du script

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Panneau latéral coulissant" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Panneau à gauche du forum

Code:: jQuery(document).ready(function () { jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"> Contenu </div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); });

Panneau à droite du forum

Code:: jQuery(document).ready(function () { jQuery('body').append('<table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"> Contenu </div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); });

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder vos modifications.

Paramétrage du script

Dans le code ci-dessus, remplacez "Contenu" par le contenu que vous souhaitez voir dans le panneau latéral.

Vous pouvez également modifier la taille du panneau en modifiant les données suivantes (sachant que width signifie largeur, et height, hauteur) :

Code:: width: 800px; height: 400px;

Vous pouvez remplacer les images "Ouvrir" et "Fermer" en changeant ces liens :

Exemple d'utilisation : insertion de la ChatBox

Ce code vous permet d'afficher la ChatBox dans le panneau latéral coulissant (à gauche du forum).

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Panneau latéral coulissant - CB" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Code:: jQuery(document).ready(function () { jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); });

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder vos modifications.

Voir illustration :

Utiliser le générateur de contenu

Afin de faciliter l'utilisation de cette astuce, nous vous proposons d'utiliser le générateur ci-dessous :

Créer un panneau latéral coulissant 15-07-10