CODEWITHSUNDEEP
javascriptjqueryhtml
user34537
user34537

Reputation:

Get div position (top) in javascript?

One div i set the height in css using top:-26px;. I have other divs other places where i'd like to align with that div. I notice in jquery writing .css('top') gets me my css and not the y coord of the div. How do i get the absolute x,y position using javascript?

Upvotes: 6

Views: 75902

Answers (7)

Heider Sati
Heider Sati

Reputation: 2614

var MyElement = document.getElementById("...Your_DIV_Control...");

var top = MyElement.getBoundingClientRect().top;

Upvotes: 0

Simon Steinberger
Simon Steinberger

Reputation: 6825

Cross browser safe down to IE 8, possibly even 7 or 6:

function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
var offsetEl = offset(document.getElementById('some_id'));
console.log(offsetEl.left, offsetEl.top);

Short and fast and no jQuery needed.

Upvotes: 3

Kalpesh Prajapati
Kalpesh Prajapati

Reputation: 1711

Use jQuery(element).offset()

Hope it helps.

For example

var elementPosition = jQuery(element).offset();
var elementTopPositon = elementPosition.top;

Upvotes: 0

Alexey Ogarkov
Alexey Ogarkov

Reputation: 2916

You can use jQuery(element).offset().top

Hope it helps.

Upvotes: 12

rlemon
rlemon

Reputation: 17666

I will give you the vanilla solution.. don't complain.. add a [0] to your element and it's fixed! :P hope this helps. 

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

Upvotes: 17

VisioN
VisioN

Reputation: 145398

Try this code:

function getElementPosition(id) {
    var offsetTrail = document.getElementById(id);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }

    return {
        left: offsetLeft,
        top: offsetTop
    };
}​

It will return an object with left and top variables.

If you use JQuery try offset() method:

var pos = $("#element").offset();
console.log(pos.left)
console.log(pos.top)

Upvotes: 3

Ashley Strout
Ashley Strout

Reputation: 6258

With standard JavaScript:

var elem=document.getElementById("elemID");
var top=elem.offsetTop;
var left=elem.offsetLeft;

With jQuery:

var top=$("#elemID").offset().top;
var left=$("#elemID").offset().left;

Upvotes: 0

Related Questions