How might I use jQuery to position one div dynamically below another?

Question

I'm trying to use jQuery to detect the position of a div (#olddiv), so I can use that position to place another div (#newdiv) exactly below it. The right borders of the 2 divs are aligned (right border).

I'm trying to get the #olddiv bottom and right locations to use them as the #newdiv top and right borders. I've used this code, but it's not working. Any idea what I'm doing wrong?

var right = $('#olddiv').position().right;
var top = $('#olddiv').position().bottom;
$('#newdiv').css('top', right);
$('#newdiv').css('right', top);

Also, I'm not sure if position is what I need. I think this can be done with position or offset, but I'm not sure:

$('#ID').position().left
$('#ID').offset().left

Thanks

Answer 1

Looks like a typo, does fixing:

'top', right
'right', top

help at all?

The divs need to be positioned absolutely or relatively in order for this code to work as well.

Answer 2

I've used offset() to position elements dynamically. Try this:

var offset = $('#olddiv').offset();
var height = $('#olddiv').height();
var width = $('#olddiv').width();
var top = offset.top + height + "px";
var right = offset.left + width + "px";

$('#ID').css( {
    'position': 'absolute',
    'right': right,
    'top': top
});

also don't forget to bind this to the window.onresize event if you need it to scale when the user resizes the window.

UPDATE: another thought - does this have to be positioned absolutely? Why not just insert the div after the other in the DOM?

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

then just make sure they are the same width.

Answer 3

I've uses that in a website I made, to display a div in a certain position, always relative to another div and always relative to the dimensions of the browser window (even when you stretch it manually).

Here's the code :

// 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();

Note that you may need to add another vars to the css above, like margin, padding, etc, in order to get the right position, or even add manually values to top and left, in case the new div isn't exactly like the old one.

Answer 4

There is a pretty cool plugin getting developed by the jQuery UI team that helps with position.

Lets you do something like this:

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