Does the Browser store the calculated coordinates of a div in accessible variables?

Question

Hi Guys,

If I have a flowing layout (position: static / relative), does the browser store the calculated coordinates (x,y) of a div in properties which can be accessed?

Further, it would suffice if the solution worked with Firefox only. JQuery is unfortunately, not an option.

Answer 1

It does indeed. Unfortunately it's pretty difficult to get that information out reliably due to browser inconsistencies and general ugliness of raw DOM access.

I suggest jQuery, where you might have code like:

$('#some_div').offset().top

Which will give you the y position of the div from the top left of the document.

Answer 2

No, however using mootools (and probably jquery) you can say $(element).getLeft() or $(element).getTop().

or you could use something like this:

function getLeft(obj) {
    return (obj.offsetParent==null ? obj.offsetLeft : obj.offsetLeft + getLeft(obj.offsetParent));
}

function getTop(obj) {
    return (obj.offsetParent==null ? obj.offsetTop : obj.offsetTop + getTop(obj.offsetParent));
}

Answer 3

In 'native' JavaScript you can do it like that:

document.getElementById('yourElement').offsetLeft
document.getElementById('yourElement').offsetTop

but you'd probably need to add up few offsets of parent elements depends what position is applied.