How to position a div at the top of another div with javascript?

Question

The first div is the '#icon-selection-menu' bar, it's idle position is absolute with top:0px and left:0px . So it appears at he top left corner inside the content div.

Deep in the content div children I got other divs which are actually kind of '.emoticon-button'. Their position is relative inside their parent. On such button click I'd like to position the first div just above the button, adjusting it's bottom border to the button's top border.

How can I get top and left values to set $('#icon-selection-menu').top and $('#icon-selection-menu').left ?

Answer 1

jQuery ¹ provides .offset() to get the position of any element relative to the document. Since #icon-selection-menu is already positioned relative to the document, you can use this:

var destination = $('.emoticon-button').offset();
$('#icon-selection-menu').css({top: destination.top, left: destination.left});

$('#icon-selection-menu') will be placed at the top-left corner of $('.emoticon-button') .

_{(1) jQuery assumed due to the use of $ in the question.}

Answer 2

You can get the top and left position of a div using offsetTop and offsetLeft

Example:`

$('#div-id').offset().top;
$('#div-id').offset().left;

Answer 3

Javascript has a built-in version of what @bfavaretto mentioned. It is a bit longer than the Jquery version, but people like me who don't use Jquery might need it.

var iconselect = document.getElementById("icon-selection-menu");
var emoticonbtn = document.getElementById("emoticon-button");
var oTop = emoticonbtn.offsetTop;
var oLeft = emoticonbtn.offsetLeft;
iconselect.style.top = oTop;
iconselect.style.left = oLeft;
iconselect.style.position = "absolute";

You can, of course, add units to this system such as px or other things. Just note that what I did above was just an example and is for two seperate elements with IDs, not classes. The first two lines of the code will vary according to your code. The element iconselect is what I am trying to align, and the element emoticonbtn is the button you press to make iconselect appear. The most important parts of the code summarized:

elementtomove.offsetTop; //distance from top of screen
elementtomove.offsetLeft; //distance from left of screen

Hope this helps the people who are unwilling to use JQUERY!

Answer 4

you can get the position of the element by using the below jquery

var position=$('#icon-selection-menu').position();
var left=position.left;
var right=position.right

and on click of that button you can position it above by using

$("#ID").live("click",function(){
    $('.emoticon-button').animate({left:left,right:right});
});

Answer 5

Get '.emoticon-button' position(left,top). Then apply the same to '#icon-selection-menu'. There would some adjustment on top and left to align with emoticon.