11
votes

Comment positionner une div dynamiquement en dessous d'une autre?

J'essaie d'utiliser jQuery pour détecter la position d'un div ( #oldiv ), afin que je puisse utiliser cette position pour placer un autre div ( #newdiv ) exactement en dessous de cela. Les bonnes frontières des 2 divs sont alignées (bordure droite).

J'essaie d'obtenir le #oldiviv bas et droit pour les utiliser comme étant le #NewDiv bordures supérieure et droite. J'ai utilisé ce code, mais ça ne marche pas. Avez-vous une idée de ce que je fais mal? xxx

aussi, je ne sais pas si position est ce dont j'ai besoin. Je pense que cela peut être fait avec position ou offset , mais je ne suis pas sûr: xxx

merci


0 commentaires

4 Réponses :


0
votes

ressemble à une typo, la fixation: xxx

aidez du tout?

Les divs doivent être positionnés absolument ou relativement pour que ce code fonctionne comme Eh bien.


0 commentaires

20
votes

J'ai utilisé des éléments offset () pour positionner des éléments de manière dynamique. Essayez ceci:

$('#olddiv').after($('#ID').html());


1 commentaires

Merci une bonne réponse. Il fallait être absolu parce que je prévois cela pour superposer d'autres divs. C'est pourquoi le régulier après n'a pas fonctionné. Votre meilleure solution a fonctionné cependant. Merci :)



3
votes

J'ai utilisé cela dans un site Web que j'ai fabriqué, pour afficher une DIV dans une certaine position, toujours relative à une autre div et toujours relative aux dimensions de la fenêtre du navigateur (même lorsque vous l'étiez manuellement).

Voici le code: P>

// function to place the div
var newdiv = function () {
   var o = $('#olddiv').offset();
   var h = $('#olddiv').height();
   var w = $('#olddiv').width();
   $('#newdiv').css({'top': o.top,
                     'left': o.left,
                     'width': w,
                     'height': h       
   }).show();
}

// listen the window changes and correct the newdiv position
$(window).resize(function(){ newdiv(); });

// display the newdiv after DOM is loaded, or whenever you want
newdiv();


0 commentaires

13
votes

Il y a un joli cool Plugin Se développer par l'équipe de l'interface utilisateur JQuery qui aide à position .

vous permet de faire quelque chose comme ceci: p>

$(".menu").position({ my: "left top", at: "left bottom", of: ".menubutton" });


2 commentaires

+1 Nice et simple. Pour conserver cela à jour, lors de l'utilisation du plugin et que vous souhaitez utiliser l'attribut Collision , il semble y avoir un problème dans la combinaison actuelle de JQuery 1.9.x avec JQueryui 1.9.x. Le paramètre Flip de l'attribut Collision Collision ne fonctionne pas comme prévu. Le dernier combo de travail semble être JQuery 1.7.2 avec JQueryui 1.8.20. Le traqueur de bugs JQueryui est: http://bugs.jqueri.com/ticket/8710


Merci beaucoup.