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.
Printable View
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.
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>
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 :).
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 :(.
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.
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.....
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.
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.
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
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:
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.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
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;
};
You're welcome.
:)