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 :

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 :
https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png
https://i.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
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