Keeping "above the fold" ads visibile ...

[MikeMpls]

... when the user links to a post "below the fold".

The newspaper concept of "above the fold" needs to be extended for web pages to take into account that there are two folds (or scrolling directions) in web pages. Ads "above the fold" can still be out of view if the user links to a post that is not the first on the page. The javascript below repositions a block of ads so that it is in view no matter what anchor the user links to.

Note that this is only done when the page is loaded. If you move around on the page (either by scrolling or by clicking anchors) after the page is loaded, the ads don't move.

The first step is to create your ads within an object that can be relocated. I do this in a DIV in the "ad_above_top_breadcrumb" template:

<div id="upperadblock"> ... ads ... </div>

At the bottom of the page in the "ad_below_content" template is some javacript to relocate the upper ad block to the top of the destination anchor:

function moveUpperAdBlock()
{
    if (document.location.hash.substring(1) != "")
    {
        var isMSIE = (navigator.appName == 'Microsoft Internet Explorer');
        sourceElement = document.getElementById("upperadblock");
        targetElement = document.getElementById(document.location.hash.substring(1));
        targetElement.insertBefore(sourceElement, targetElement.firstChild);
        if (isMSIE)
        {
            document.getElementById('upperadblock').style.display = 'none';
        }
        else
        {
            document.getElementById('upperadblock').scrollIntoView(true);
        }
 
        if (isMSIE)
        {
            setTimeout("document.getElementById('upperadblock').style.display = 'block';document.getElementById('upperadblock').scrollIntoView(true);",100);
        }       
    }
}
 
onload=moveUpperAdBlock

The funky stuff for IE is needed because it doesn't repaint reliably when DOM objects are moved around. FireFox & Opera worked as expected. Depending on your other javascript usage, you might need to invoke "moveUpperAdBlock" in some other manner.

You can see this in operation on Travel Underground & I Heart My Teacher.