jQuery get div#contentRow height

Question

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 () {
    console.log($("div#contentRow").height());
    // 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.

Answer 1

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.

Answer 2

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

_spBodyOnLoadFunctionNames.push('functionName');
function functionName(){...}