Log in

View Full Version : Find X,Y position of an element on the page as a whole?


djr33
10-11-2012, 03:49 PM
Is it possible to find the X,Y coordinates for the position of an object on the page as a whole, if they are positioned locally within a sub-region such as a <div>?

I'm planning to work out some things for my PHP+HTML graphs, and although in theory I could do all of the math to add up the distances between the various divs and so forth, it would be a lot easier if there's some easy way to get the global X,Y coordinates for the objects instead.

If so... it would be through Javascript, right? Or is there some way to figure this out in just HTML/CSS?
coothead
10-11-2012, 05:17 PM
Hi there djr33,

here is a javascript example...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>where are you?</title>

<style type="text/css">
body {
margin:0;
background-color:#f0f0f0;
}
#mydiv{
width:160px;
padding:40px;
margin:50px auto;
background-color:#000;
}
#myimg {
display:block;
width:100px;
height:100px;
border:1px solid #fff;
margin:auto;
}
#myp{
width:162px;
height:100px;
margin:50px 0 0 20px;
background-color:#00f;
}
</style>

<script type="text/javascript">

function init() {

obj=document.body.getElementsByTagName('*');

for(c=0;c<obj.length;c++) {
alert(
'\n\n****************************************'+
'\n\nThe element type is '+obj[c].tagName.toLowerCase()+
'.\n\nThe element id is '+obj[c].id+
'.\n\nIt\'s position is..................'+
'\n\ntop="'+obj[c].offsetTop+'px", '+'left="'+obj[c].offsetLeft+'px".'+
'\n\n****************************************'
);
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

</script>

</head>
<body>

<div id="mydiv">
<img id="myimg" src="http://www.coothead.co.uk/images/anim2.gif" alt="">
</div>

<p id="myp"></p>

</body>
</html>

coothead
djr33
10-11-2012, 05:19 PM
Thanks! So offsetTop and offsetLeft are always relative to the page as a whole? That'll make things a lot easier for me if I end up doing it this way. I wasn't planning to use Javascript, but there's no reason I can't do that.

Note: I'm using relatively positioned objects within embedded divs on the page. In case anyone knows of any problems that could create, I'd like to know. But it looks like the solution above would work.
coothead
10-11-2012, 05:29 PM
Hi there djr33,

stone me mate , you're super human. :eek:

It only took you two minutes to read my post, try my example and type a two paragraph reply. ;)

It takes me that long just to find out if I'm still alive. :D

coothead
djr33
10-11-2012, 05:39 PM
That's weird. I didn't even notice the time-- I just came on the forum to check what was going on and happened up on that post, right when you posted it I think. :)


Also, I hadn't tried the code yet-- I trusted you on it. But I have tried it now, played with a bit, and it seems to work really well. (So maybe I'm not quite as superhuman as you think.)
coothead
10-11-2012, 05:46 PM
Don't say that. :(

We all need super heroes. :D

coothead
jscheuer1
10-11-2012, 06:36 PM
The offsetLeft and offsetTop are not always the offsets on the page in all browsers. Often they are. Using jQuery you can do:


var o = $('#selectorid').offset();

o will then be an object with top and left properties that are the offsets on the page:


alert('top = ' + o.top + ' left = ' + o.left);

But using that I've found that finding the position of things inside tables can be buggy though. It seems fine for everything else, and I've always found a way with tables. I think finding the td's offset.

If using ordinary javascript, Quirks Mode has a fairly good way:

http://www.quirksmode.org/js/findpos.html

that compensates for some browsers not always giving the offset relative to the page.
djr33
10-11-2012, 08:21 PM
Ok, thanks John. I'll work on implementing this soon, once I've fixed a couple other bugs in my project. Nearly done...