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

Créer un panneau latéral coulissant

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

  • 0

Astuce Créer un panneau latéral coulissant

Message par Alex Fowl le 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 !

Le code à utiliser

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">
       
          Texte
       
      </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">
       
          Texte
       
      </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>');
});

Installation d'un panneau latéral

Personnalisation du code

Dans le code ci-dessus, remplacez "Texte" 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 :
- https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png
- https://i.servimg.com/u/f81/11/21/85/73/fermer10.png

Installation du code

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

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Panneau latéral" et pour placement "Toutes les pages".

Insérez-y le code suivant modifié conformément aux indications précédentes.


Exemple

Ce code vous permet d'afficher la chatbox dans le panneau
Mettre la chatbox dans le panneau coulissant à 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"><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>');
});

Le panneau fermé.


Le panneau ouvert avec la chatbox.


( un générateur pour simplifier la mise de contenu : http://aska.123.st/h10-generateur-de-panel )


Alex Fowl
Membre actif

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl 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