CODEWITHSUNDEEP
javascriptjquerycssdomposition
zuba
zuba

Reputation: 1508

How to position a div at the top of another div

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 ?

Upvotes: 14

Views: 30703

Answers (5)

Cannicide
Cannicide

Reputation: 4520

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!

Upvotes: 5

Vignesh Subramanian
Vignesh Subramanian

Reputation: 7289

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});
});

Upvotes: 0

Prasath K
Prasath K

Reputation: 5018

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

Example:`

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

Upvotes: 7

bfavaretto
bfavaretto

Reputation: 71908

jQuery1 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.

Upvotes: 26

r1webs
r1webs

Reputation: 363

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.

Upvotes: 0

Related Questions