« Go Back

jQuery: Stick your div to the bottom of a short page, v2.0

Jun.
3
2012

This is an update to the previous entry, 'Making sure your footer always sticks to the bottom of the page' - refer to that post for greater detail and explanations of what exactly goes on here.

So, as I mentioned previously, this function comes in really handy when you want to stick a footer to the bottom of a short page; i.e. to ensure that something that's meant to be at the bottom of the viewport actually sticks there rather than floating in the middle of the ether if you've got a short page of content.

However, when working on a new project last night, I noticed this faithful piece of code wasn't working properly in IE. At the same time, I was getting frustrated at some ridiculously slow page load speeds - this is a site on my local machine, so there shouldn't be any delay! I finally narrowed it down to, of all things, the Google Fonts API running incredibly slowly and even failing to load some files at all. This loading delay caused jQuery to miscalculate the length of the viewport, and so subsequently not stick my footer in the right place. Which was frustrating.

The solution came in the form of bind("load"), which I have since learned fires after practically all major elements of a page have been loaded, including the page, CSS, images, and, crucially, font-faces.

So the new, updated, fresh-faced and doe-eyed function now looks like this:

<script type="text/javascript">
   <!-- 
   
   $(window).bind("load", function() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;
    
    if (footerTop < docHeight) {
     $('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
    }
   });
   
   // -->
  </script>

It's worth noting that, for this particular project I am using two different Google Web Fonts for both the h1-h5 tags and the regular body text, which is something I haven't done before. Also worth noting that this issue doesn't present in Firefox, so if you couldn't give a shit about IE (and I know a lot of you don't), then please go back in time and ignore this post.

Comments (3)
Tags: ,
Categories: CSS, jQuery
  • Gwen

    Thanks mate!
    Helped me a lot.
    Gwen

  • http://twitter.com/scottgumbleton Scott Gumbleton

    This is really great. One question though. If I have my Browser window quite small, especially in height, the footer sticks great to the base of the Browser window. But if I then expand the Browser window, the footer doesn’t stick to the base (like CSS Sticky footer).

    Is there a way for this to stick to the footer if the Browser window is increased in height?

    • http://blog.gaijindesign.com/ Lawrie Malen

      You just need to add a listener for a resize event. I would add all of the code inside the $(window).bind(“load”… event into a function outside of the “load” scope, then call the function on load and whenever there’s a resize event. Something like:

        <script type="text/javascript">
         $(window).bind("load", function() {
          stickMyFooter();
         });
         
         $(window).resize(function() {
          stickMyFooter();
         });
         
         function stickMyFooter() {
          var docHeight = $(window).height();
          var footerHeight = $('#footer').height();
          var footerTop = $('#footer').position().top + footerHeight;
         
          if (footerTop < docHeight) {
           $('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
          }
         }
        </script>