Ryan Kanno: The diary of an Enginerd in Hawaii

A few months ago, I wrote a blog about implementing footerStickAlt using jQuery & Yahoo! UI Grids. Fast forward to the present and I have a small update to post. In my previous implementation, one of the required libraries was the jQuery Dimensions plugin because of its nifty window/document height() calculations. However, after reading the plugin’s changelog and seeing as how jQuery 1.2 core now supports the height function, this plugin is no longer required. So without further adieu, here’s the updated footerStickAlt implementation instructions.

It’s been tested in IE 5.5+ and Firefox 2.

*Note*: In this implementation, I don’t check for the margin on the ‘body’ element since we’ve set all our margins and padding on to 0. See the demos for details.

Requirements

• Yahoo! UI Grids [download]
• JQuery 1.2+ [uncompressed] [compressed]
• Place the Javascript below in a file of your choosing! Don’t forget to include it in your page!

$(document).ready(function() {
     if ($(window).height() > $(document).height()) {
          $('#bd').css({
               height: $('#bd').height() +
                         ($(window).height() -
                          $(document).height()) + 'px'
          });
     }
});

Check out the demos here: page with short content, page with long content!

(Notice the pages no longer depend upon jQuery Dimensions! Wheee!)

Enjoy!