Solved

offsetLeft problem

Posted on 2004-04-18
6
921 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Underline in nav for the page that you are currently on. 1 22
How to resize a div in html 3 39
Google Analytics setup 5 51
Json Schema 8 32
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

830 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