Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

offsetLeft problem

Posted on 2004-04-18
6
Medium Priority
?
927 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 12

Accepted Solution

by:
lil_puffball earned 1500 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

What’s Wrong with Your Cloud Strategy ?

Even as many CIOs are embracing a cloud-first strategy, the reality is that moving to the cloud is a lengthy process and the end-state is likely to be a blend of multiple clouds—public and private. Learn why multicloud solutions matter in this webinar by Nimble Storage.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

636 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