Solved

offsetLeft problem

Posted on 2004-04-18
6
918 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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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'…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now