Panneau à droite, coulissat 'progressivement' Bouton_activePanneau à droite, coulissat 'progressivement' Bouton_hoverPanneau à droite, coulissat 'progressivement' Fb-hoverPanneau à droite, coulissat 'progressivement' Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Panneau à droite, coulissat 'progressivement' EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Panneau à droite, coulissat 'progressivement' EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Panneau à droite, coulissat 'progressivement' EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Panneau à droite, coulissat 'progressivement' EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Panneau à droite, coulissat 'progressivement' EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Panneau à droite, coulissat 'progressivement' EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Panneau à droite, coulissat 'progressivement' EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Panneau à droite, coulissat 'progressivement' EmptyVen 03 Fév 2023, 17:22 par Krager

Le Deal du moment : -15%
(Adhérents Fnac) LEGO® Star Wars™ ...
Voir le deal
552.49 €

Partagez
 

Panneau à droite, coulissat 'progressivement'

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://just-live-ur-dream.forumactif.com/
Believe ♥
{ Membre }
{ Membre }

Féminin Messages : 28



Panneau à droite, coulissat 'progressivement' Empty
Bonjour, ou bonsoir ! Very Happy


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 ! Very Happy

Merci d'avance à vous ♥️
MessageSujet: Panneau à droite, coulissat 'progressivement'   Panneau à droite, coulissat 'progressivement' EmptyMar 16 Oct 2012, 16:31
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Panneau à droite, coulissat 'progressivement' Empty
Le plus simple pour toi est de reprendre le code de ta CB coulissante et de l'adapter. Smile

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.
MessageSujet: Re: Panneau à droite, coulissat 'progressivement'   Panneau à droite, coulissat 'progressivement' EmptyJeu 18 Oct 2012, 05:26
Revenir en haut Aller en bas
http://just-live-ur-dream.forumactif.com/
Believe ♥
{ Membre }
{ Membre }

Féminin Messages : 28



Panneau à droite, coulissat 'progressivement' Empty
Coucou ! Smile

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 :/
MessageSujet: Re: Panneau à droite, coulissat 'progressivement'   Panneau à droite, coulissat 'progressivement' EmptyJeu 18 Oct 2012, 13:05
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Panneau à droite, coulissat 'progressivement' Empty
Oui, c'est clair. Smile

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. Smile

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. Smile

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 ~)
MessageSujet: Re: Panneau à droite, coulissat 'progressivement'   Panneau à droite, coulissat 'progressivement' EmptyJeu 18 Oct 2012, 16:26
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Panneau à droite, coulissat 'progressivement' Empty
Hello !
Le problème est-il toujours d'actualité ?
Si nous n'avons pas de nouvelle d'ici 4 jours, il sera considéré comme résolu !
Merci de ta compréhension Panneau à droite, coulissat 'progressivement' 926145
MessageSujet: Re: Panneau à droite, coulissat 'progressivement'   Panneau à droite, coulissat 'progressivement' EmptyLun 22 Oct 2012, 15:04
Revenir en haut Aller en bas
Melone
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



Panneau à droite, coulissat 'progressivement' Empty
Bonsoir,
Cela fait 4 jours que nous n'avons pas de nouvelles, comme là demandé Psycho. J'en déduis donc que le problème est résolu ou abandonné. J'archive et je déplace.
Si jamais il s'avérait que tu n'avais pas obtenu de réponse satisfaisante, il te faudra ouvrir un nouveau sujet.

Merci de ta compréhension ! Panneau à droite, coulissat 'progressivement' 90719
Bonne soirée,
MessageSujet: Re: Panneau à droite, coulissat 'progressivement'   Panneau à droite, coulissat 'progressivement' EmptyVen 26 Oct 2012, 13:56
Revenir en haut Aller en bas
Contenu sponsorisé




Panneau à droite, coulissat 'progressivement' Empty
MessageSujet: Re: Panneau à droite, coulissat 'progressivement'   Panneau à droite, coulissat 'progressivement' Empty
Revenir en haut Aller en bas
 

Panneau à droite, coulissat 'progressivement'

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» panneau latéral qui se tourne !
» Infobulle qui apparaît progressivement
» Panneau d'utilisateur
» Lien "panneau d'admin" unitilisable
» Désolidariser le lien "panneau d'administration" du footer ? (forumactif)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit