Log in

View Full Version : 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/DOM:element.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>

<!--original location of script - no work-->

</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>

<!--Works when this script is moved OUTSIDE of table-->
<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/showpost.php?p=77018&postcount=4