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!

My co-worker, Stephen, and I have implemented our layouts using the Yahoo! UI Grids library. One of the dilemmas we’ve been facing is the inability to use Cameron Adams’ footerStickAlt CSS solution @ The Man In Blue.

Basically, footerStickAlt is best described as

sites that require the Web page footer to be positioned either at the bottom of the browser window or at the bottom of the Web page – whichever is visually lowest.

Fast forward to the present, and using JQuery, JQuery Dimensions plugin, and a little nifty Javascript, we wrote up a solution at work for our Yahoo! layouts. One thing to remember is that this solution won’t work in browsers with Javascript disabled, i.e. it degrades to whatever Yahoo! grid layout you’re using.

It’s been tested in IE 5.5+ and Firefox 2. (I think =P).

*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

1. Yahoo! UI Grids [download]
2. JQuery 1.1.2+ [uncompressed] [compressed]
3. Dimensions plugin 1.0.0-b2 [zip]
4. 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!

Enjoy!