Solved

offsetLeft problem

Posted on 2004-04-18
6
920 Views
Last Modified: 2010-05-18
Hi,

I'm having a problem calculating the actual position of an element within the body:

<script>
function test(){
  document.getElementById("block").style.left = offsetLeft(document.getElementById("cell1"));
  document.getElementById("block").style.top = offsetTop(document.getElementById("cell1"));
  alert("Table offsetLeft = " + document.getElementById("table1").offsetLeft + "px");
}
function offsetLeft(o){var i=0;while(o.offsetParent!=null){i+=o.offsetLeft;o=o.offsetParent;}return i+o.offsetLeft;}
function offsetTop(o){var i=0;while(o.offsetParent!=null){i+=o.offsetTop;o=o.offsetParent;}return i+o.offsetTop;}
</script>
<body onload="test();">
<div style="position:relative">
  <table id=table1 cellspacing=0 cellpadding=0>
    <tr>
      <td id=cell1 style="border:1px solid black"><input></td>
    </tr>
  </table>
</div>
<div id=block style="background:black;position:absolute;height:200;width:2" />
</body>

The black line should line up with the left side of the cell.  It works fine in NN but not in IE.  For some reason, IE thinks the table is offset 10px from div.  I find it interesting that the same logic does work to determine the top position of the cell.

The problem does not occur if the div isn't relative, but this example is reduced from the original to illustrate the actual problem; the div must remain relative.

Can anyone figure out how to fix my offsetLeft function so that it returns the correct total offsetLeft value in IE?
0
Comment
Question by:brgivens
  • 5
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10853843
It is likely that you need to add style="margin:0px" to the div.  IE stick default margins on most elements.

Cd&
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10854216
You should give your body a margin:

<script>
function test(){
  //NOTE THAT I SUBTRACTED THE BODY MARGIN BELOW
  document.getElementById("block").style.left = offsetLeft(document.getElementById("cell1"))-parseInt(document.body.style.margin);
  document.getElementById("block").style.top = offsetTop(document.getElementById("cell1"));
  alert("Table offsetLeft = " + document.getElementById("table1").offsetLeft + "px");
}
function offsetLeft(o){var i=0;while(o.offsetParent!=null){i+=o.offsetLeft;o=o.offsetParent;}return i+o.offsetLeft;}
function offsetTop(o){var i=0;while(o.offsetParent!=null){i+=o.offsetTop;o=o.offsetParent;}return i+o.offsetTop;}
</script>
<body onload="test();" style="margin:10px;">
<div style="position:relative">
  <table id=table1 cellspacing=0 cellpadding=0>
    <tr>
      <td id=cell1 style="border:1px solid black"><input></td>
    </tr>
  </table>
</div>
<div id=block style="background:black;position:absolute;height:200;width:2" />
</body>
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10854220
But then it doesn't work in Netscape, better do this:

function test(){
  document.getElementById("block").style.left = offsetLeft(document.getElementById("cell1"))-(document.all?parseInt(document.body.style.margin):0);
  document.getElementById("block").style.top = offsetTop(document.getElementById("cell1"));
  alert("Table offsetLeft = " + document.getElementById("table1").offsetLeft + "px");
}
0
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 
LVL 12

Accepted Solution

by:
lil_puffball earned 500 total points
ID: 10854239
Or if you prefer to not specify the body margin:

<!--THIS SPAN IS ONLY USED TO FIND THE BODY MARGIN-->
<span id=getMargin>&nbsp;</span>

<script>
function test(){
  var obj=document.all?document.all("getMargin"):document.getElementById("getMargin");
  document.getElementById("block").style.left = offsetLeft(document.getElementById("cell1"))-(document.all?obj.offsetLeft:0);
  //NOW REMOVE THE SPAN
  obj.parentNode.removeChild(obj);
  document.getElementById("block").style.top = offsetTop(document.getElementById("cell1"));
  alert("Table offsetLeft = " + document.getElementById("table1").offsetLeft + "px");
}
function offsetLeft(o){var i=0;while(o.offsetParent!=null){i+=o.offsetLeft;o=o.offsetParent;}return i+o.offsetLeft;}
function offsetTop(o){var i=0;while(o.offsetParent!=null){i+=o.offsetTop;o=o.offsetParent;}return i+o.offsetTop;}
</script>
<body onload="test();">
<div style="position:relative">
  <table id=table1 cellspacing=0 cellpadding=0>
    <tr>
      <td id=cell1 style="border:1px solid black"><input></td>
    </tr>
  </table>
</div>
<div id=block style="background:black;position:absolute;height:200;width:2" />
</body>
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10968466
brgivens, thanks for the points, but is there a reason for the B?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10968471
If you were looking for an explanation, it is because in IE, with relatively positioned divs, the body margin is not taken into account. This is why I check how big the body margin is, and then add this amount to the other number.
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question