0

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.

  • 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) – Arsalan Adam Khatri Nov 6 '14 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 '14 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 '14 at 14:56
0

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 '14 at 15:21
  • Can you show me your code please ? – Chris23 Nov 7 '14 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 '14 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 '14 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 '14 at 15:28
0

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

_spBodyOnLoadFunctionNames.push('functionName');
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 '14 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. – Kevin Stone Nov 7 '14 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 '14 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? – Kevin Stone Nov 11 '14 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 '14 at 7:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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