Setting the height of the fold in SharePoint

Expert Opinion

Setting the height of the fold in SharePoint

Kieran Cumming February 16, 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.

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

Thanks for reading.

Enjoyed this article? Stay up to date with our latest news...