[RESOLVED] Dynamically-loaded content results in incorrect page length in IE and Firefox

[B]FINAL UPDATE: The problems described in this message were caused by two issues. I will describe them here so it may help others in the future.

==== Original post follows ====

Hello all,

First, thanks in advance for any advice offered!

I have a site I’m developing ([URL=http://www.tommyb.com/gsc/]http://www.tommyb.com/gsc/[/URL]) that uses a hidden iFrame to load page content. It is hidden via the following CSS style:

[CODE]#SiteBuffer
{
position: absolute;
visibility: hidden;
display: none;
left: 0;
top: 0;
}[/CODE]

The contents are copied to a “content” div on the main page via InnerHTML once they are loaded into the hidden iFrame. This div doesn’t have any special properties as far as absolute positioning or sizing. Its style is:

[CODE]body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #F3EC67;
background-color: #000080;
margin:5;
padding: 0;
}
#SiteContent
{
color: #000080;
background-color: #D6BF5B;
}[/CODE]

I have also encapsulated the site menu in an absolutely-positioned div. I reposition it as users scroll up and down the page so it will stay in view. Here’s the CSS style for it:

[CODE]#SiteMenu
{
position: absolute;
left: 6;
top: 100;
z-index: 100;
}[/CODE]

Here’s the div positioning Javascript code:

[CODE]function adjustMenus()
{
document.resetMenuPos = false;
var startY = findPosY(getElement(‘SiteContent’)); //set y offset of bar in pixels
var ns = (navigator.appName.indexOf(“Netscape”) != -1) || window.opera;

function ml(id)
{
var el = document.getElementById(id);
el.style.visibility = “visible”;
if (document.layers)
el.style = el;
el.sP=function(y) {this.style.top = y + “px”;};
el.y = startY;
return el;
}

window.stayTop = function()
{
ContentDiv = getElement(‘SiteContent’);
startY = findPosY(ContentDiv); //set y offset of bar in pixels
pY = (ns ? pageYOffset : getIEDocBody().scrollTop) + 5;
ContentBottom = startY + ContentDiv.offsetHeight;

ftlObj.y += ((pY > startY ? pY : startY) – ftlObj.y) / 5;
// Ensure new position is inside the top and bottom positions of our content div
if (ftlObj.y < startY || document.resetMenuPos == true)
ftlObj.y = startY;
else if (ftlObj.y + ftlObj.offsetHeight > ContentBottom)
ftlObj.y = ContentBottom – ftlObj.offsetHeight;
document.resetMenuPos = false;
ftlObj.sP(ftlObj.y);
setTimeout(“stayTop()”, 15);
}

ftlObj = ml(“SiteMenu”);
stayTop();
}[/CODE]

[B]Here’s the problem:[/B] The page length isn’t always correctly updated across page loads if you have scrolled down to the bottom of the page before clicking a menu link. It always works correctly if you are at the top of the page when you select a menu item.

It also works correctly from the bottom of the page if the new page content is greater than the previous content. The “content” div shows all the newly-loaded content and the scroll range is correct.

However, the page scrolling range will extend beyond the bottom of the page if the new page content is less than the previous content, but only if you selected the menu link while viewing the bottom of the page.

[B]TO TEST THE PROBLEM:[/B] Please alternate between clicking the “This Week at GSC” and “About GSC” links. The “This Week” link has approximately twice as much content as the “About” link. [I]The problem should be apparent after scrolling to the bottom of the default “This Week” page and selecting the “About” link.[/I]

Some additional info:

Again, thanks for any help on this. I’ve spent about 6 hours trying to figure out the problem and I’m stumped!

Tom Baggett

[B]UPDATE:[/B] I did notice one discrepancy between IE and Firefox behavior. In IE, the “content” div is resized when new content is loaded if you are at the top of the page when you click the link. Firefox does not resize the div, resulting in it looking like there is a lot of blank lines in the content div.

Also in #JavaScript _↴