Centration div en utilisant jQuery

J'ai un div $("#organizer_listings_container") initialement centré en utilisant CSS margin: 0 auto; qui utilise jQuery pour augmenter sa largeur lorsque l'utilisateur clique sur un bouton. Après le redimensionnement, j'utilise le code suivant pour centrer ce div redimensionné $("#organizer_listings_container").Centration div en utilisant jQuery

Code Redimensionnement

// Center content when width changes 
if($("#organizer_listings_container").css("position") != 'absolute') { 
    $("#organizer_listings_container").css("position","absolute"); 
    var left = ($(window).width() - $("#organizer_listings_container").width())/2 + "px"; 
    $("#organizer_listings_container").css('left', left);  // set initial 'left' 
} 
left = ($(window).width() - (852))/2 + "px"; 
$("#organizer_listings_container").animate({'left': left}); // animate to final 'left'

Problème: Quand j'ajoute une nouvelle div (rendre visible en utilisant jQuery show()), il apparaît au-dessus #organizer_listings_container, #organizer_listings_container changements vers le bas ce qui est correct. Maintenant, quand je supprime ce div nouvellement ajouté, #organizer_listings_container ne remonte pas!

Je suppose que cela est dû au positionnement absolu requis par le code de centrage jQuery utilisé. Comment puis-je faire redimensionner le div redimensionné lorsque le div nouvellement ajouté est supprimé?

En utilisant jQuery pour calculer la hauteur de la div nouvellement ajouté décalant alors la place div redimensionnée en compensant la top par la hauteur calculée semble être MESSIER que je ne veux

Source

2012-01-17 Nyxynyx

Vous avez l'air de faire référence à deux divs mais vous ne mentionnez que 1? –

il y a un 2ème div qui est ajouté au-dessus du 1er div '## organizer_listings_container'. Permettez-moi de modifier le message pour le rendre plus clair – Nyxynyx

Que diriez-vous d'un exemple dans http://jsfiddle.net/? – PetersenDidIt

Vous pouvez éviter d'avoir à utiliser jquery et ajouter une classe à la nouvelle ajouté div et centrez avec un déplacement haut comme ceci:

<div class="container" style="background:blue; width:100%;"> 
<div class="box" style="background:green; width:50px; height:40px; margin: 0 auto; margin-top:20px;"></div> 
</div>

Notez que la classe contiendrait le style en ligne, ceci est juste un exemple. La seule chose dont vous pourriez avoir besoin serait de s'assurer que le conteneur était à 100% de la hauteur. Mais si vous ne voyez que la boîte et que vous n'utilisez que le conteneur pour le centrer, vous n'avez pas besoin de cette exigence.

Source

2012-01-17 02:45:06

Centration div en utilisant jQuery

Répondre

Questions connexes