Bonjour, ou bonsoir !


Voilà, ça fait un p'tit moment que je cherche ce code, j'aimerais faire un panneau latéral coulissant progressivement sur la droite du forum, qui s'ouvrirait sans cliquer dessus, mais juste en passant devant avec la souris. "OnMouseover' si j'ai du mal à me faire comprendre. En gros, je voudrais comme la chatbox que j'ai mise à gauche sur mon forum en javascript : http://forumtestwynwood.forumotion.com/ mais sans la chatbox dedans mais avec des images pour le staff". J'espère avoir été plus ou moins claire :/

PS; J'ai essayé de modifier comme je pouvais le javascript, ça avait pas trop mal marché mais y'avait un gros bug, donc, je fais appel à vous !

Merci d'avance à vous

Le plus simple pour toi est de reprendre le code de ta CB coulissante et de l'adapter.

Si tu veux qu'on t'y aide, il faudrait que tu nous montres ton code actuel. On pourra t'expliquer qu'est-ce qui correspond à quoi, etc.

Coucou !

Merci d'avoir pris le temps de lire le sujet et d'y répondre.
Oui c'est aussi je comptais faire avant d'avoir le problème. En fait voici mon code:

Code:

jQuery(document).ready(function() { jQuery('body').append('<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; left: 0px; z-index:1000;"><iframe src="/chatbox/index.forum?page=front" id="chatboxpop" scrolling="yes" style="overflow: visible; width: 800px; height: 350px; display: none; float:left;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},1200); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="http://i36.servimg.com/u/f36/15/96/18/17/chatbo15.png" id="chatboxopen"/><img src="http://i36.servimg.com/u/f36/15/96/18/17/chatbo14.png" id="chatboxclose" style="cursor :pointer; display:none;"></div></div>'); } );

Je comprends tout sauf la partie la plus importante, en fait, le contenu en lui même :/ Faudrait adapté e code, qui ici à un bouton, moi je n'en voudrais pas en fait si c'est possible :/ Juste une fenêtre, qui, "dépassant" du bord droit, glisse vers la gauche. Je suis claire ? C'est un peu compliqué à expliquer :/

Oui, c'est clair.

Déjà, on va clarifier et expliquer un peu ce que tu as là :

Code:

// appel qui se lance lorsque le document aura fini de charger
jQuery(document).ready(function() {
  // fonction qui ajoute la portion de HTML donnée au début de body
  jQuery('body').append('
    <div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; left: 0px; z-index:1000;">
        <iframe src="/chatbox/index.forum?page=front" id="chatboxpop" scrolling="yes" style="overflow: visible; width: 800px; height: 350px; display: none; float:left;" marginwidth="0" marginheight="0" frameborder="0"></iframe>
        <div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},1200); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:left">
          <img src="http://i36.servimg.com/u/f36/15/96/18/17/chatbo15.png" id="chatboxopen"/>
          <img src="http://i36.servimg.com/u/f36/15/96/18/17/chatbo14.png" id="chatboxclose" style="cursor :pointer; display:none;">
        </div>
    </div>
  ');
});

Détails du HTML. A noter que tout le style se trouve directement dans le HTML, ce qui n'est pas conseillé. Tu pourras sans doute en profiter pour mettre des classes et passer tout le style dans ta feuille CSS.

Code:

<!-- div principale, qui comprend contenu et boutons -->
<div style="overflow: visible; position: fixed; bottom: 30px; height: 350px; left: 0px; z-index:1000;">
  <!-- iframe = chatbox ; elle est masquée par défaut -->
  <iframe src="/chatbox/index.forum?page=front" id="chatboxpop" scrolling="yes" style="overflow: visible; width: 800px; height: 350px; display: none; float:left;" marginwidth="0" marginheight="0" frameborder="0"></iframe>
  <!-- div "boutons", qui comprend les boutons ouvrir et fermer ; c'est sur cette div qu'on trouve la fonction d'ouverture/fermeture, sur l'évènement onclick -->
  <div onClick="jQuery(\'#chatboxpop\').animate({width:\'toggle\'},1200); jQuery(\'#chatboxopen,#chatboxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:left">
      <img src="http://i36.servimg.com/u/f36/15/96/18/17/chatbo15.png" id="chatboxopen"/>
      <img src="http://i36.servimg.com/u/f36/15/96/18/17/chatbo14.png" id="chatboxclose" style="cursor :pointer; display:none;">
  </div>
</div>

Dans la div "bouton", le code javascript qui régit l'évènement "onclick" :

Code:

<div onClick="
  <!-- anime l'iframe qui possède l'id  "chatboxpop" -->
  jQuery(\'#chatboxpop\').animate({width:\'toggle\'},1200);
  <!-- interchange les images boutons qui possèdent respectivement les id "chatboxopen" et "chatboxclose" -->
  jQuery(\'#chatboxopen,#chatboxclose\').toggle();
"></div>

A partir de là, tu devrais y voir un peu plus clair, je pense.

Avant tout chose, je te conseille de sortir tout le CSS du HTML. Tu y verras beaucoup plus clair (et ce sera beaucoup plus propre) quand tout le style sera sorti de l'HTML, remplacé par de très sages classes. Dans les propriétés CSS, à retenir :
- left: 0px; de la div principale, qui colle la fenêtre à gauche
- float:left; de l'iframe et de la div "bouton", qui les met l'une à côté de l'autre à partir de la gauche
C'est tout bête, mais si tu passes ces propriétés à droite, eh bien t'as déjà une partie du travail de fait. \o/

Bref. Du point de vue contenu, en gros tu peux remplacer l'iframe par une div, sans oublier de lui donner un identifiant qui sera appelé dans le javascript du "bouton" pour que la chose s'affiche et se masque.

Côté style, pour que ça fasse comme une unique fenêtre qui glisse, tu n'as qu'à styler la div principale.

Si tu ne veux pas des deux boutons, tu peux supprimer une des images ainsi que la partie du code javascript onclick qui leur correspond.

Enfin, pour passer à du survol pur, techniquement tu dois remplacer l'évènement onclick par deux autres : un onmouseover (quand la souris passe sur la zone active) et onmouseout (quand elle la quitte). Ceci dit, je ne te le conseille pas vraiment parce que ça a tendance à être un peu foireux. (Tu passes par souris sur la zone active, disons "bouton", et quand le panneau s'ouvre paf ta souris sort (ben oui, ça se décale), et ça repart... bref, on a vu mieux ~)