• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Keeping "above the fold" ads visibile ...


Well-known member
... 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';
        if (isMSIE)
            setTimeout("document.getElementById('upperadblock').style.display = 'block';document.getElementById('upperadblock').scrollIntoView(true);",100);
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.