Ryan Kanno: The diary of an Enginerd in Hawaii» Javascript

Update: footerStickAlt w/ jQuery & Yahoo! UI Grids

ryankanno — Thu, 13 Dec 2007 10:29:11 +0000

Update : December 9, 2008

If you’re using jQuery 1.2.6, there is an updated version of the footerStickAlt javascript within the comments below. Thanks Luca!

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!

Yahoo! UI Grids – footerStickAlt (w/ jQuery goodness)

ryankanno — Sat, 30 Jun 2007 22:17:51 +0000

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

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