Setting the height of the fold in SharePoint

admin February 16th, 2017

Setting the height of the fold in SharePoint

Thanks for dropping by! In this article, I will share some tips on what needs to be achieve when setting the height of the fold in SharePoint.

Particularly when developing websites, it’s becoming increasingly important to control what users see when they first load your site. Generally, this means that what’s above the fold is a very small amount of high-value content to deliver a key message.

Doing this in a barebones HTML environment is a piece of cake, right? All you need is a child div of the body tag with its height set to 100%. However, thanks to SharePoint not using the body for its scrolling content (but rather the s4-workspace div), this is much more complex.

SharePoint has a resize handler (CallWorkspaceResizedEventHandlers) attached to the s4-workspace div to set its size using inline styles based on the current window size. Depending on your master page, you may then have several elements sitting between the s4-workspace div and the content you want to have above the fold.

No need to stress out! How I’ve handled this situation in the past is to intercept SharePoint’s resize handler to call my own method after the original resize event, so that I can reliably size my div.

Let’s assume we have a div with the class “home-above-fold” to contain our content. The following JS will intercept the handler and call our custom function.

function ResizeFoldContent() {
    var workspaceHeight = jQuery('#s4-workspace').height();
    // adjust workspaceHeight for any static headers etc you might have
    jQuery('.home-above-fold').css('height', workspaceHeight);
}

function InitFoldResizeHandler() {
    if (typeof (CallWorkspaceResizedEventHandlers) === "function") {
        origResizeEvent = CallWorkspaceResizedEventHandlers;
    }
    CallWorkspaceResizedEventHandlers = function () {
       if (typeof (origResizeEvent) === "function") {
           origResizeEvent();
       }
       ResizeFoldContent();
    };
}

Simply call InitFoldResizeHandler to set the whole thing up and you are done, great job!

If, for any unknown reasons this JS doesn’t work or you still need more clarification, I will be very happy to help. Simply ask to speak with Kieran when you call our reception on 1800 66 44 56, or drop your message/feedback here https://fivep.com.au/contact-fivep/.

Thanks for reading.

K.


 

Kieran Cumming | Solution Architect | FiveP

About the author: Kieran’s IT knowledge surpasses that of many elders. He does anything from back-end code to the user interface, he can script or code his way out of any problem.


Comments (0)

Can you relate
to any of these
problems?