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 :

Avec le 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>');
});
Avec le 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>');
});
Personnalisation :

Remplacez "Texte" par vos données : images, texte, code…

Vous pouvez modifier la taille du panneau avec :

Code:
width: 800px; height: 400px;
Width : Longueur
Height : Hauteur
Vous pouvez remplacer les images "Ouvrir" et "Fermer" en changeant ces liens :
http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png
http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png

Installer le code :

Panneau d'administration Modules Gestion des codes javascripts ajoutMettez un titre, cochez "Sur toutes les pages", collez y votre code et enregistrez ! Smile

Exemple de code :

Mettre la chatbox dans le panneau coulissant.

Avec le 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"><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>');
});
Avec le 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"><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>');
});
Résultat :

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-pannel )


Alex Fowl
+ Hyperactif +

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