jQuery .append() dans Firefox: barre de défilement verticale apparaît?

Je veux ajouter dynamiquement un nombre de DIV à une cible DIV dans ma page avec .append(), puis définir leurs hauteurs et leurs positions de sorte qu'ils sont tous visibles dans la page sans défilement. Tout cela va bien, mais dans Firefox (3.6.16 sur Ubuntu) une barre de défilement verticale apparaît, comme si la hauteur de chaque nouvelle DIV était ajoutée à la hauteur totale du contenu de la page - même si chaque nouvelle DIV est en haut près de la partie supérieure de l'écran, et sa hauteur n'est pas proche de la longueur de l'écran. Ubuntu Chrome se comporte bien. Quand je demande jQuery pour la hauteur de la cible DIV après avoir ajouté les nouvelles DIV, cela n'a pas changé.jQuery .append() dans Firefox: barre de défilement verticale apparaît?

Voici la plupart du code d'une page de test que j'ai écrite pour isoler le problème - merci d'avance!

 <style type="text/css"> 
     #target { 
      width: 50px; 
      height: 50px; 
      background-color: #cfc; 
     } 
    </style> 
    <script> 
     $(document).ready(function() { 
      var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff'); 

      for(i = 0; i < 10; i++){ 
       $('#target').append('<div id="new_' + i + '">Hello</div>'); 
       $('#new_' + i) 
       .position({ 
        my: 'left top', 
        at: 'left top', 
        of: '#target', 
        offset: '' + (i * 20) + ' ' + (i * 10) 
       }) 
       .width(200) 
       .height(150) 
       .css('background-color', cols[i]); 
      } 
     }); 
    </script> 
</head> 
<body> 
    <div id="target"> 
    </div> 
</body>

Source

2011-04-29 user548958

Avez-vous essayé d'ajouter overflow ': hidden; 'à l'élément' # target'? – Seth

Vous ajoutez des éléments de 150 pixels de hauteur à un élément de 50 pixels de haut. Pourquoi ne ** pas ** attendre une barre de défilement? – Pointy

Salut Pointy - la barre de défilement apparaît pour la fenêtre du navigateur dans son ensemble, pas ma petite div 50px. – user548958

Si vous donnez les éléments ajoutés <div> "position: absolute", alors vous aurez pas les barres de défilement. L'utilitaire ".position()" de jQuery UI donnera aux éléments affectés (vos éléments <div> ajoutés) "position: relative" s'ils ne sont pas configurés avec une "position". Les éléments positionnés de cette manière consomment de l'espace sur la page comme s'ils étaient et non éloignés de leur position "naturelle". Ainsi, la page déborde lorsque vous ajoutez tous ces éléments même s'ils sont déplacés de telle sorte qu'ils s'adaptent tous. En leur donnant "position: absolute", vous les sortez du flux de mise en page ordinaire. Chrome n'est pas d'accord à ce sujet, pour des raisons que je ne comprends pas; Je pense que Firefox est en train de faire la bonne chose ici. (éditez — si vous ajoutez une ligne pour ajouter une dernière <div> à "target", et faites-en un simple-jane <div> avec un petit texte dedans mais pas de positionnement du tout, alors vous verrez que ça finit En effet, il semblerait que Chrome ne "revendique" pas l'espace fantôme, à moins que quelque chose ne se produise après.)

Here est un jsfiddle. Le code mis à jour (une ligne supplémentaire):

$(document).ready(function() { 
     var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff'); 

     for(i = 0; i < 10; i++){ 
      $('#target').append('<div id="new_' + i + '">Hello</div>'); 
      $('#new_' + i) 
      .position({ 
       my: 'left top', 
       at: 'left top', 
       of: '#target', 
       offset: '' + (i * 20) + ' ' + (i * 10) 
      }) 
      .css('position', 'absolute') 
      .width(200) 
      .height(150) 
      .css('background-color', cols[i]); 
     } 
    });

Source

2011-04-29 12:52:47 Pointy

Beau, merci - J'ai utilisé une définition de classe dans mon fichier CSS pour que toutes mes DIVs nouvellement créées aient une position absolue, et cela fonctionne parfaitement. Une très bonne réponse claire aussi. – user548958

Vous pouvez inclure tous ce genre de choses dans une fonction css() ...

Démo: http://jsfiddle.net/wdm954/xSYBr/

var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff'); 

for(var i = 0; i < 10; i++){ 
    $('#target').append('<div id="new_' + i + '">Hello</div>'); 
    $('#new_' + i).css({ 
     backgroundColor: cols[i], 
     position: 'absolute', 
     left: i * 20 + 'px', 
     top: i * 10 + 'px', 
     width: '200px', 
     height: '150px' 
    }); 
}

Source

2011-04-29 13:07:39 wdm

jQuery .append() dans Firefox: barre de défilement verticale apparaît?

Répondre

Questions connexes