Blog

Search | Archive | Categories
The other day, I was trying to figure out how to find the absolute position of an element on a HTML page. And surprisingly, it was not immediately obvious. Also, I wanted it to work in IE and Mozilla.

Well, I found this page on How can I find location of an object in page? which gave me the critical hint.

I've created a page to show an example of how to get and set an element's absolute position - Javascript Absolute Positioning Demo.

Here's the code:


<html>
<head>
<title>Javascript Absolute Positioning Demo</title>
</head>
<script>
function moveIt() {
var follow = document.getElementById('follow');
getPos(follow);

var me = document.getElementById('me');
getPos(me);

me.x = follow.x;
me.y = follow.y;

setPos(me);

follow.x = Math.random() * 200 + 50;
follow.y = Math.random() * 200 + 50;

setPos(follow);
}

function getPos(el) {
if (document.getBoxObjectFor) {
var bo = document.getBoxObjectFor(el);
el.x = bo.x;
el.y = bo.y;
}
else {
var rect = el.getBoundingClientRect();
el.x = rect.left;
el.y = rect.top;
}
}

function setPos(el) {
if (document.getBoxObjectFor) {
el.style.left = el.x;
el.style.top = el.y;
}
else {
el.style.pixelLeft = el.x + document.documentElement.scrollTop;
el.style.pixelTop = el.y + document.documentElement.scrollLeft ;
}
}
</script>

</HEAD>
<BODY>
<div id="follow" style="position: absolute; left:10; top:50;">
<p>Follow</p>
</div>
<div id="me" style="position: absolute; left:80; top:50;">
<p>Me</p>
</div>

<form>
<input type="button" onClick="moveIt()" value="Move It" />
</form>

</BODY>
</HTML>


Posted: 2004-11-05 16:50:39


<< Busy getting ready for the babySanta Poem (or Do Christians believe in Santa?) >>

RSS/XML