Installation de 2 panneaux coulissants

2 participants

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

Résolu Installation de 2 panneaux coulissants

Message par Spec Lun 14 Avr 2014 - 15:42

Bonjour

J'ai cherché avant de créer ce nouveau sujet et je n'ai trouvé aucune réponse à mes questions.
Veuillez tout d'abord m'excuser de vous ennuyer avec mes questions de débutant.
Puis ensuite voilà mes coordonnées:  www.100pour100parisiens.org

Voilà,
Je viens de créer un panneau coulissant pour ma chatbox et cela à l'air de fonctionner correctement. Ce panneau est positionné sur la gauche du forum.
J'ai créé un deuxième panneau coulissant sur la droite du forum dans lequel je souhaiterais voir un panorama de photos.
J'ai créé, à cet effet, ce gif animé que je modifierais chaque semaine après chaque rencontre:
http://www.hostingpics.net/viewer.php?id=534609GIFCOULISSANTLYONPSG.gif

Seulement voilà... rien n'apparaît.
Est que quelqu'un peut me dire si d'abord il est possible d'installer:
1°) deux panneaux coulissants.
2°) si on peut inclure un gif animé en lieu et place de "Texte"

Merci pour vos bons conseils

Cordialement
SPEC


Dernière édition par Spec le Lun 14 Avr 2014 - 18:30, édité 1 fois
Spec

Spec
**

Masculin
Messages : 53
Inscrit(e) le : 04/04/2012

http://100pour100parisien.forumgratuit.org
Spec a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Installation de 2 panneaux coulissants

Message par Automne Lun 14 Avr 2014 - 16:04

Bonjour,

Quel est le code que tu as mis  pour le deuxième panneau? Merci
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Installation de 2 panneaux coulissants

Message par Spec Lun 14 Avr 2014 - 16:12

J'ai pris celui qui ne correspond pas à la chatbox mais celui pour le positionnement à droite.
En fait, j'ai pris le 2ème sur le tuto


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="https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'https://i.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'https://i.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>');
});

Merci pour ta réactivité.
Amicalement
SPEC
Spec

Spec
**

Masculin
Messages : 53
Inscrit(e) le : 04/04/2012

http://100pour100parisien.forumgratuit.org
Spec a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Installation de 2 panneaux coulissants

Message par Automne Lun 14 Avr 2014 - 16:32

Coucou

Voici le générateur du panel http://aska.123.st/h10-generateur-de-pannel

L'image ce place de cette façon (contenu en haut a droite)
Code:
<img src="http://img15.hostingpics.net/pics/534609GIFCOULISSANTLYONPSG.gif" />

Vous devez rajouter le css correspondant (pa << affichage << images et couleurs << couleurs << feuille de style << copier/coller) afin que l'image s'affiche

Code:
.fpanel { position: fixed; }
.fpclose,.fpopen { cursor: pointer; }
.fpclose { display: none; }

#fp771 { top: 20%; right: -500px; }
#fp771 .fpcontent { width: 500px; }

modifier le width et top right pour mettre l'image bouton ou vous voulez sur la page.

Le code a placer sur toutes les pages

Code:
$(function(){

   $("body").append('<div id="fp771" class="fpanel"><table class="fptable"><tr><td class="fpbuttons"><span class="fpopen"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" /></span><span class="fpclose"><img src="http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png" /></span></td><td class="fpcontent"><img src="http://img15.hostingpics.net/pics/534609GIFCOULISSANTLYONPSG.gif" /></td></tr><table></div>');
   $("#fp771 .fpbuttons > span").click(function(){
      $(this).add($(this).siblings()).toggle();
      $("#fp771").animate({"right":$(this).is(".fpclose")?-500:0},1000);
   });

});
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Installation de 2 panneaux coulissants

Message par Spec Lun 14 Avr 2014 - 18:34

Merci beaucoup, vous êtes SUPER !

Dernier petit service, s'il vous plait...
J'aurais aimé remonter l'onglet de la chatbox qui est à gauche...
à la même hauteur de l'onglet Photos qui est à droite.

Est ce possible ?

Amicalement
SPEC
Spec

Spec
**

Masculin
Messages : 53
Inscrit(e) le : 04/04/2012

http://100pour100parisien.forumgratuit.org
Spec a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Installation de 2 panneaux coulissants

Message par Automne Lun 14 Avr 2014 - 19:53

coucou,

Dans le code de ta chatbox, tu as
<table style="position: fixed; bottom: 50px;

Mets a la place
<table style="position: fixed; bottom: 290px;
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum