I try to show and hide a custom footer on a SharePoint 2013, depending if we reach the bottom of the page or not. To do this, I need to calculate the total height of the div with the id contentRow.

I referenced jQuery and my custom javascript file into the master page. It load well.

If the contentRow height is lesser than the height of the viewport of the web browser (it means no or a little vertical scrollbar) + the scrolling index, I show by default the footer.

Issue : For some pages it succeed to find the height property, but most of the pages have their div height found to 0px at page load/refresh. So the effect is the footer shown even if the page can be scrolled down, even if it shouldn't.

I do this with this piece of code :

$(window).load(function () {
    // if the content Row height is lesser or equal to the viewport height + the scrolled position
    if ($("div#contentRow").height() <= $(window).height() + $("div#s4-workspace").scrollTop()) 
        $('#footermsg').slideDown('slow');  //show footer

I suspect the div#contentRow height to haven't been calculated before the script verify this condition, because the $("div#contentRow").height() is showing 0 in the console log. I also tried into the $(document).ready(... function, with a delay, into the $("div#...).load(... function, etc ... no result.

I tested it on Firefox and Chrome browsers.

  • Try to delay your script the SharePoint way i.e. use SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);. Have a look at example in SP.ClientContext object (sp.js) Nov 6, 2014 at 13:44
  • I tried to do so, I see that the function sharePointReady works, but my height after this is still 0px for my div. But when I scroll, I see the height is not to 0 (I've put a console.log of the height in a on("scroll") event)
    – Alex
    Nov 6, 2014 at 14:33
  • Moreover it not seems to be a viable solution as sometimes, at page refresh, the function is not called for some reason ... seems random, depending on the loading charge.
    – Alex
    Nov 6, 2014 at 14:56

2 Answers 2


One dirty way would be to use a setTimeout (with a short delay) and then apply your functions. I used it to hide a few elements and it works, but there must be another way.

  • I tried a timeOut, but it won't works, even if I put a 5 seconds timer before executing my test. I'm near of the depression lol
    – Alex
    Nov 6, 2014 at 15:21
  • Can you show me your code please ?
    – Chris23
    Nov 7, 2014 at 15:58
  • $(document).ready(function() { console.log("Document is ready"); //_spBodyOnLoadFunctionNames.push('defaultVisibility'); setTimeout(defaultVisibility, 2000); function defaultVisibility() { if (isInIframe == false) { if ($("div#contentRow").height() + $("div#s4-titlerow").height() <= $(window).height() + $("div#s4-workspace").scrollTop() - $("div.ms-cui-ribbonTopBars").height()*2) { $('#footermsg').slideDown('slow'); } } }
    – Alex
    Nov 13, 2014 at 7:59
  • For better readability, I'd say that you should use variables :) however, I don't see anything wrong in the code. Have you also tried console.log outside your conditions to see if the function is actually launched ? FYI, I also tried the _spBodyOnLoadFunctionNames and never succeeded, unfortunately ...
    – Chris23
    Nov 13, 2014 at 15:05
  • Yeah, and I followed the instructions on a site where the author actually claims that he succeeded. wierd ... yeh sorry for the visibility, I was in mode "code monkey"
    – Alex
    Nov 13, 2014 at 15:28

You can also try adding the function to _spBodyOnLoadFunctionNames object as such:

function functionName(){...}
  • I visited the following blog stephanrocks.com/2011/10/05/… and it appears to be a good practice to load in SP body the function to use jQuery methods. However, I can't make it work. Here is what I've tested in my custom js file : $.getScript("/sites/archimen/_layouts/15/sp.js"); _spBodyOnLoadFunctionNames.push('defaultVisibility'); function defaultVisibility() { console.log("test"); } Nothing appears in the console at sharepoint load page ... Am I doing something wrong ?
    – Alex
    Nov 7, 2014 at 10:27
  • I'm not sure why that wouldn't work unless the custom script you have somehow isn't present on the page. Are you using a content editor web part? Also, you shouldn't have to load sp.js for the _spBodyOnLoadFunctionNames array to be present. Nov 7, 2014 at 15:06
  • Ok thanks, I'm referencing my custom script into the master page. It's loaded because for the others functionalities it does what I want.
    – Alex
    Nov 10, 2014 at 11:01
  • What happens when you add a content editor web part to a page and add <script type="text/javascript">console.log(JSON.stringify(_spBodyOnLoadFunctionNames));</script> Does anything appear in the console when you do this? Nov 11, 2014 at 18:27
  • It appears that I got a syntax error when inserting this code into a web page. So it freeze the page and I cannot modify it anymore.
    – Alex
    Nov 13, 2014 at 7:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.