ok normally this would be easy but for visual reasons I force my iframe to be the same height as the content it contains. What this does is gives me only one scroll bar, the scroll bar on the parent window. The iframe document never scrolls. The problem comes when i try to center a div within the iframe. When the page is scrolled a couple of pages down I cannot get an accurate scrolltop value. $(window).scrollTop() is always zero. If I use parent.document.documentElement.scrollTop instead of $(window).scrollTop() I get a value but it is completely out to lunch. For example if iframe's height is 2011 and I scroll to the bottom of the iframe and I query parent.document.documentElement.scrollTop I get a value 567 returned. My screen size is 1200
Same results in all browsers. Tested latest IE, FF, Opera, Chrome.
To simulate
in outerdoc.htm I have
<iframe id="myFrame" src="doc1.htm"></iframe>
doc1.htm:
<html>
<head>
<title>my title</title>
</head>
<body>
<p> 10 pages of content near the bottom <div onclick="CenterDiv($('#myDiv'))">show div</div></P>
<div id="myDiv"></div>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#myFrame', top.document).height($(document).height()); //sets height of frame to document within
});
function CenterDiv(item)
{
var mtop = ($(window).height() / 2 - item.height() / 2) + $(top.window).scrollTop());
item.css('top', mtop < 0 ? 0 : mtop );
}
</script>
</body>
</html>