Discussion :

[hardShield]

Bonjour,
je débute avec Jquery. J'ai acheté un mag qui proposait des exercices «webdesign masterclass vol.6» pour être précis. Puis j'ai décidé de me mettre à la réalisation d'un menu déroulant pour mon site. Il s'agit plus exactement d'une barre utilisateur qui en mode initial est ouverte et affiche des liens utiles (profil, déconnexion etc…) et l'avatar. Une petite flèche suivie d'un «-» permet de réduire la box et de faire 25px ou s'affiche seulement son pseudo et une autre flèche pour l'ouvrir. J'utilise un slideDown et slideUp pour réaliser un effet de glissement à l'ouverture et à la fermeture.
Je finis mon prototype sur Chrome, puis je teste sur différents nav.
Ça fonctionne partout mais Firefox me fait un slideDown dégueulasse à l'ouverture. Je vais essayé de décrire ça, en fait, la box descend puis au lieu de s'arrêter elle continue sur environs 150px puis elle revient de manière brutale pour se mettre dans la bonne position.
J'ai vérifié mon code css pour voir si je n'avais pas défini de hauteur qui fait que, mais non.
J'aimerai comprendre pourquoi la box réagit comme cela uniquement sur firefox et comment régler le problème. A quoi est ce du.. Si c'est récurrent ou si il faut effectuer une manip...
Voici le code de mon menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript">
      var menuTopEtat="close";
      $("#hideButton")
        .click(function (){
         if (menuTopEtat=="close"){
         menuTopEtat="open";
 
      $("#hideButton").html("<span class='foundicon-down-arrow'>+</span>");
 
      $(".left, .pseudo, .toolsLink").fadeOut("slow", function(){
 
          pseudo = $(".pseudo").html();
 
            $("#userbox").slideUp("slow", function(){
             $(".smallPseudo").html(pseudo);
             $(".smallPseudo").fadeIn('slow');
          })
 
      });
         return;
    }
 
    else {
      menuTopEtat="close";
      $("#hideButton").html("<span class='foundicon-up-arrow'>-</span>");
 
 
      $(".smallPseudo").fadeOut('fast', function(){
 
         $('.smallPseudo').html('');
 
         $(".left, .pseudo, .toolsLink").fadeIn("fast", function(){
          $("#userbox").slideDown("slow", function(){ 
         })
       })
      });
      return;
    }  
  });
 
  </script>

Note :*aucunes erreurs sur firebug

Je me répète, je suis débutant en Jquery. Je suis prêt à apprendre et appliquer tout conseil que vous me donnerez.

Merci à vous.

[Lorenzo77]

salut,

ton probleme doit venir des CSS, faudrait visu le bigniou

sinon ya moyen de faire + simple : http://jsfiddle.net/LorenzoFR/YZuLy/

[hardShield]

Le lien que tu m'as donné est vraiment très intéressant ! Simple et efficace, je pense convertir mon menu comme ça, ça donne un effet propre et rangé. Par contre j'aimerai quand même garder ma petite barre utilisateur et comprendre le pourquoi du comment. Voici le code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class='w30 userbox'>
  <div class='line w100'>
      <div id='userbox'>
        <div class='left'><img class='avatar' src='http://www.gravatar.com/avatar/b5fede2c586bcabeb574bca156f89fa2' alt='avatar' width='80'/></div>
        <div class='mod pseudo'><strong> <!--<?php echo getUserItem('Pseudo'); ?> --> </strong></div>
        <div  class='mod toolsLink'>
          <ul>
            <li>
              <a href='#'>Mon profil</a>
            </li>
            <li>
              <a href="#">Mon calendrier</a>
            </li>
            <li>
              <!-- <?php echo anchor('membres/deconnexion', 'déconnexion', 'title="finir la session"'); ?> -->
            </li>
          </ul>
      </div>
 
        </div>
        <div class='left smallPseudo'></div><div id='hideButton' class='right'><span class='foundicon-up-arrow'>-</span></div>
</div>
</div>

Le lien vers l'avatar est externe juste pour le prototypage (flemmard que je suis). Voici le css spécifique à la portion de code ci-dessus :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.userbox
{
    position: absolute;
    background-image: url(images/userbar_bck.png);
    padding:5px;
    box-shadow: 0px 5px 10px #454545;
    border-bottom-right-radius: 5px;
    color:white;
    min-height: 30px;
}
 
img.avatar
{
    border-radius: 10px;
    margin-right: 10px;
    margin-left: 5px;
    margin-top: 5px;
}
 
.pseudo
{
    color:white;
    font-size: 1.4em;
 
}
 
.toolsLink ul li
{
    list-style-type: none;
}
 
.toolsLink a {color:white;text-decoration: none;}
.toolsLink a:hover {text-decoration: underline;}

Je pensais d'abord que c'était du au min-height mais il est définit à 30px et la box descend bien plus bas. J'utilise le reset/framework KNACSS peut-être que je devrai me plancher sur la feuille histoire de voir si ce n'est pas la dedans qu'une règle est définie faisant descendre la box.

[Lorenzo77]

tu devrais mettre en place un test (jsfiddle ou html) de ton probleme avec le mini de code mais avec l'HTML généré par le PHP ... ca pourrait aider pour chercher

[hardShield]

Voilà j'ai adapté le code css et html pour qu'il soit exploitable et qu'il ressemble à ce qu'il doit être :
http://jsfiddle.net/Stereo/uuChm/ .
J'ai testé sous firefox... Ça fonctionne. J'ai cru que c'était alors KNACSS, je l'ai enlevé et c'est toujours pareil. Je soupçonne le code html... Je vais plancher dessus... Une balise ouverte..