Skip to content

Instantly share code, notes, and snippets.

@alirobe
Last active December 15, 2015 06:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alirobe/5218119 to your computer and use it in GitHub Desktop.
Save alirobe/5218119 to your computer and use it in GitHub Desktop.
A modification of Randy Drisgill's "Sticky footers in SharePoint" for SP2010. Works for me...
// Place the #custom-footer directly after the close of #s4-bodyContainer, and apply float:left to it.
// What needed changing:
// - consistent use of the jQueryFooter variable (rather than re-selecting the footer to apply the margin-top)
// - changed/simplified the math to calculate the difference, adding s4-mainarea (which floats:left and is not included in bodyContainer)
// - did not force footer to show in dialog boxes (use .ms-dialog #custom-footer {display:none} in CSS to hide)
// http://blog.drisgill.com/2013/01/sticky-footers-in-sharepoint.html
// jQuery.noConflict();
function calcFooter() {
var jQueryFooter = jQuery("#custom-footer");
var footerheight = jQueryFooter.outerHeight();
//hide footer allows for smoother window resizing
jQueryFooter.hide();
var bodyheight = jQuery("#s4-mainarea").outerHeight();
var bodyareaheight = jQuery("#s4-bodyContainer").outerHeight();
var jQueryRibbon = jQuery("#s4-ribbonrow");
var ribbonheight = jQueryRibbon.outerHeight();
var windowheight = jQuery(window).height();
//if ribbon is hidden, size is zero
if (jQueryRibbon.css("display") == "none") {
ribbonheight = 0;
}
//if content is less than the window size add margin
var difference = windowheight - bodyheight - bodyareaheight - ribbonheight - footerheight;
if (difference > 0) {
jQueryFooter.css("margin-top", difference);
}
//show footer after calculating
if(!jQuery("html").hasClass("ms-dialog")) {
jQueryFooter.show();
}
}
jQuery(document).ready(function () {
calcFooter();
//change footer with window resize
jQuery(window).resize(calcFooter);
});
@janla2112
Copy link

Thanks for this post. It was extremely helpful. I am finding one issue. When I go to edit a list, the sticky footer does not "push down" or stick to the bottom when there are just a few items or no items in a list. Do you know what needs to be updated in the javascript to address this issue? Once I refresh the page after editing, the footer sticks to the bottom.
Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment