My Sticky Footer Solution for SharePoint 2013–Pure JavaScript Solution

Last year I posted a blog article which described the issue with SharePoint 2010 and having a footer. Well similarly SharePoint 2013 has some of the same obstacles when adding a footer. If you are interested in reading more detail into the issue w/ 2010 then go here: My SharePoint 2010 Sticky Footer Solution.

It basically boils down to these 2 issues:

  1. If you just add a footer to your master page it will be displayed directly under the page content. On a page that has little content then the footer may show half way up the page.
  2. Alternatively if you try a pure CSS sticky footer solution it may not work correctly either because SharePoint uses the page height to calculate where the scroll bars will go (mainly due to the header / ribbon always being at the top).

[Update 10/9/2013] – Added code from Robert, to handle MDS type pages.

[Update 9/1/2013] – I noticed that these scripts do not work on Team Sites, this is due to the Minimal Download Strategy Feature that is enabled. Turn that off and this work perfectly fine. I’m still researching how to make the scripts how with that feature enabled.

I’ve also updated the code to use it’s own function to detect height. Padding (top/bottom) can sometimes throw off the size computations.

Link the script file

As you can see below I’ve hosted my file in the Style Library

<!-- Custom JS -->
<SharePoint:ScriptLink runat="server"
 Name="~SiteCollection/Style Library/js/stickyFooter.js" 
 Localizable="False"  LoadAfterUI="True"/>

The Footer Control

Simply add this div after s4-bodyContainer in the master page file.

<div class="s4-notdlg noindex" id="Footer">
&copy; My Footer Solution 2013
</div>

As you can see below an export of the DOM from the IE Dev Toolbar.

footer

Here below you can see where in the Master Page (based on seattle.master) I look for the id=”DeltaPlaceHolderUtilityContent” and you’ll see 3 </div> above it. I put it right between the 2nd & 3rd </div>

mp_footer

The Script File

Download stickyFooter2013.js Here

This script is a pure JavaScript solution which will work with a default master page. If you customize it then you’ll need to account for any differences. It basically adds the suite bar + ribbon + body + footer, and if that’s smaller than the viewport aka viewable area. It will expand the body by the difference so that they are equal.

This also operates in it’s own namespace so there won’t be any collisions

I also bind to the window resize event so if the size of the screen changes the ribbon should stay on the bottom.

sf

Enjoy!

Advertisements

17 thoughts on “My Sticky Footer Solution for SharePoint 2013–Pure JavaScript Solution

  1. To get it working with MDS, replace
    _spBodyOnLoadFunctionNames.push(“StickyFooter.OnPageLoad”); with
    asyncDeltaManager.add_endRequest(StickyFooter.OnPageLoad);

  2. Actually this is what I ended up doing. Adding an iframe webpart made the page leave the MDS mode.

    if (typeof asyncDeltaManager != “undefined”)
    asyncDeltaManager.add_endRequest(StickyFooter.OnPageLoad);
    else
    _spBodyOnLoadFunctionNames.push(“StickyFooter.OnPageLoad”);

    • Thats great – Thanks for this! I will try this out. I’ve noticed that the footer sometimes won’t work on certain pages where partial page loads come into play. For example a datagrid page where the content takes time to come through. The footer will be in the middle. The asyncDeltaManager might fix that.

  3. […] After installing some updates – including the SP1 for SharePoint 2013 – the code above made the MDS functionality to stop working. Instead, it redirected to the default.aspx page – probably because it noted the HTML had been changed. I changed the example code above with some script that I found in the following blogpost: https://tommdaly.wordpress.com/2013/07/16/my-sticky-footer-solution-for-sharepoint-2013pure-javascrip&#8230; […]

  4. Impressive. However, your solution does not account for fullscreen display (F11) causing the function to apply additional spacing that can only be reset once the user refreshes the page.

    Also not sure if this is due to padding/margin issue you specified, but it appears the bottom border of an IE window retains its height area; causing a small white line to appear under the footer when maximizing the window.

  5. Hey Thomas…This solution helped me last month with the SharePoint footer problem that I was working on and I made certain subtle changes in my script while maintaining the actual logic… A big thanks to you (although a little late)…

    Would you mind if I wrote a blog about this solution? and of course, credits to you and reference to this blog too 🙂

    There are a lot of blogs about Custom SharePoint footer but not many that are so precise as this one….

Comments are closed.