Finding the position of an Element -[RESOLVED]-

**Electroman** · Feb 16th, 2005, 08:04 AM

Is there anyway I can get the position of an element, like this.value=this.style.top apart from this returns a blank value because I've not set it using any style sheets.

**Psyrus** · Feb 17th, 2005, 07:22 AM

Yes, try this out:

<html>
<head>
<title>Getting top left height and width</title>

<script type = "text/javascript">

function getLeft(obj){
var elem = document.getElementById(obj);
alert(elem.id + " " + elem.offsetLeft);
}//end function getLeft

function getTop(obj){
var elem = document.getElementById(obj)
alert(elem.id + " " + elem.offsetTop);
}//end function getTop

function getWidth(obj) {
var elem = document.getElementById(obj);
alert(elem.id + " " + elem.offsetWidth);
}

function getHeight(obj) {
var elem = document.getElementById(obj);
alert(elem.id + " " + elem.offsetHeight);
}

</script>

</head>

<body>

<h1>Get Top, Left, Height and Width</h1>

<div id = "divOne">First Division</div>
<div id = "divTwo">Second Division</div>

<form id = "frmMain">
<input type = "button" Value = "Get Top" OnClick = "getTop('divTwo');">
<br>
<input Type = "button" value = "Get Left" OnClick = "getLeft('divTwo');">
<br>
<input Type = "button" value = "Get Width" OnClick = "getWidth('divTwo');">
<br>
<input Type = "button" value = "Get Height" OnClick = "getHeight('divTwo');">
</form>

</body>
</html>

**Electroman** · Feb 17th, 2005, 01:11 PM

Thanks, that kinda works. I had tried that before but on my page it doesn't really work. but Having it on a blank page and working showed me I was on the right track. Problem is the offset is from its parent. So I'll have to loop through all the parents to find it

....Thanx for your help though

.

**Electroman** · Mar 1st, 2005, 01:00 PM

BTW just an update on this, it works quite weird depending on what DocType you use. I have only got it to work with HTML DocTypes, on XHTML ones it is just zero for the value of those values

.

**Psyrus** · Mar 3rd, 2005, 10:10 AM

That's odd.

Edit the above code to reflect this:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

And it still works for me.

**Electroman** · Mar 3rd, 2005, 04:33 PM

Yea I've tried it with your sample and it does work. now thats strange. I'll see if I can figure out why it is going wrong on my proper pages.....

**Electroman** · Mar 3rd, 2005, 05:18 PM

Sorry problem seems to be with using tables. Check out the attached file, I've included a html file which had two pieces of Text with IDs. and two buttons. divOne gives a bad answer cos its in the table but divTwo works.

**Psyrus** · Mar 3rd, 2005, 07:54 PM

No, it does give the proper answer. It's returning it's relative position to the table since the table is it's parent element and not the document. One thing that might work is trying to get the container element's offsetLeft and add them together to get the position. It will not be the true position due to the box element, which may be a pixel wide. So if precision is a consideration, take that into account.

**Electroman** · Mar 3rd, 2005, 07:59 PM

I had thought the same thing when i first came across this. I spent ages making a function that looped through getting all the Parents Offsets. Problem is It was giving very strange results. I think i know what the problem is and it could be that when i got the aprent I didn't check its type. so things like TR tags i got the offset for and the table so that could be like adding it on twice. Is there an easy way to tell if a tag is a container or dust I build a list of all the tags it should work with.

EDIT: The thing I'd said about the DocType effecting it was actually a different thing, that was to do with .scrollTop

**Psyrus** · Mar 4th, 2005, 07:19 AM

One thing that might be causing some problems is the way that offSetParent is being treated. I believe that IE and Mozilla treat it differently. Well, that is Netscape and IE used to. I am not sure about the new crop of Mozilla browsers. To get the true left position of the nested <div> in your attached example code, you'd need this many offsetParent calls added to the original elements offsetLeft property:

elem.offsetLeft + elem.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft

One possible solution would be to pass in the id of the parent element and just use that:

HTML Code:

function getLeftWithID(obj, intID){
var elem = document.getElementById(obj);
var container = document.getElementById(intID);
//Long way
alert(elem.id + ": " + (elem.offsetLeft + elem.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft));
//Short way
alert(elem.id + ": " + (elem.offsetLeft + container.offsetLeft));
}//end function getLeftWithID

Unfortunately this isn't very flexible. A better solution may be to loop through the nodes and check the tagName and see if it's <table>, <div> etc. But even that isn't completely fool-proof since tables and div's can also be nested within each other. A third possible solution would be to assign a unique name to your outer containers something like attaching the term 'out' to the ID and check for that in your loop of the nodes. Then again if you go that route, you could just use the function that I listed above.

**Electroman** · Mar 4th, 2005, 09:33 AM

Thanx loads, I spotted the problem with my old code. When i was looping through I was using obj.parentNode When I chnaged this to obj.offsetParent it works fine

.

This is the code that does it

Code:

    XPos = Obj.offsetLeft + Obj.offsetWidth;
    YPos = Obj.offsetTop;
    
    while ( Obj.parentNode.parentNode.parentNode.parentNode != null )
    {
      Obj = Obj.offsetParent;
      XPos += Obj.offsetLeft;
      YPos += Obj.offsetTop;
    };

**Psyrus** · Mar 4th, 2005, 09:43 AM

You're welcome.

Thread: Finding the position of an Element -[RESOLVED]-

Thread Tools

Display

Finding the position of an Element -[RESOLVED]-

Re: Finding the position of an Element

Re: Finding the position of an Element

Re: Finding the position of an Element -[RESOLVED]-

Re: Finding the position of an Element -[RESOLVED]-

Re: Finding the position of an Element -[RESOLVED]-

Re: Finding the position of an Element -[RESOLVED]-

Re: Finding the position of an Element -[RESOLVED]-

Re: Finding the position of an Element -[RESOLVED]-

Re: Finding the position of an Element -[RESOLVED]-

Re: Finding the position of an Element -[RESOLVED]-

Re: Finding the position of an Element -[RESOLVED]-

Posting Permissions