offsetheight question

**Peter Johnson** · 02-25-2007, 01:15 AM

I have a script that scrolls the page to a div when you click the appropriate link. I works in both FF and IE 6 & 7, but only if the page isn't contained within a table.

When it's inside a table, it only works in FF, not in IE6 or IE7. And I really need it to work inside a table. Any ideas? (Also, I'm using javascript instead of anchor tags because the page is in an iframe and anchor tags cause the entire parent page to jump, but I only want the iframe page to jump - but that's for another forum!)

Thanks in advance for any help!

Below is a simplified version of the code (including the table tags that make it not work - again, take away the table tags and it works in everyone)

<html>
<body>
<table><tr><td>
<div id="links">
<a href="javascript:void()" onclick="window.scrollTo(0,linka); return false">A</a>
<br />
<div id="linka" class="backtotop">linkA</div>
<script>
var linka = document.getElementById('linka').offsetTop;
</script>
</div>
</td></tr></table>
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
</body>
</html>

**jscheuer1** · 02-25-2007, 01:48 AM

IE can confuse the element itself as part of the implied document.all collection with the variable:

<div id="linka" class="backtotop">linkA</div>

var linka = document.getElementById('linka').offsetTop;

Try using a unique name for the variable. You also might want to look into the element.scrollIntoView method.

http://developer.mozilla.org/en/docs...scrollIntoView

**Peter Johnson** · 02-25-2007, 02:09 AM

Thanks for the fast reply.
I just tried changing the variable - still doesn't work in IE. I'll look into scrollintoview next - I hadn't considered that.
Thanks

**jscheuer1** · 02-25-2007, 02:56 AM

The problem in IE with offsetTop is that it often only goes so far as to the top of the parent element. I hadn't noticed that the first time. There are scripts to deal with that. Here's one:

http://www.quirksmode.org/js/findpos.html

**Peter Johnson** · 02-27-2007, 02:46 PM

I just tried moving the javascript OUTSIDE of the table, and suddenly it works in IE. This is a good thing - but I don't understand why that would make a difference. Any ideas?

<html>
<body>
<table><tr><td>
<div id="links">
<a href="javascript:void()" onclick="window.scrollTo(0,linkaposition); return false">A</a>
<br />
<div id="linka" class="backtotop">linkA</div>



</div>
</td></tr></table>
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>lorum ipsum
<p>lorum ipsum<p>lorum ipsum<p>


<script>
var linkaposition = document.getElementById('linka').offsetTop;
</script>

</body>
</html>

**jscheuer1** · 02-27-2007, 03:45 PM

When it is inside the table, it is parsing the position of a division inside of a table that doesn't yet fully exist.

The fact that the table is the first element on the page helps too, if it were farther down the page, it still might not work in IE.

**Peter Johnson** · 02-27-2007, 04:10 PM

You're right, of course.
If you add tables or nest them, it stops working. Why would moving the table further down affect this?

**jscheuer1** · 02-27-2007, 04:32 PM

http://www.dynamicdrive.com/forums/s...18&postcount=4

Thread: offsetheight question

Thread Tools

Search Thread

offsetheight question

re:offsetheight

Bookmarks

Bookmarks

Posting Permissions