Update: footerStickAlt w/ jQuery & Yahoo! UI Grids
December 13th, 2007
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!
Popularity: 19% [?]
I haven’t washed mine in a while, but the last time I did, I put it...
March 22nd, 2008 at 6:27 am
This code does not work with Safari.
November 6th, 2008 at 4:15 pm
I like the idea, but doesn’t work with the latest jQuery (using 1.2.6), both elements $(window) and $(document) report the same height when the page is shorter than the full window. Looking into ways to report proper page height.
December 1st, 2008 at 3:29 pm
I modified, just a little bit, your script and it seems to work with jquery 1.2.6:
$(document).ready(function() {
if ($(window).height() > $(document.body).height())
$(‘#bd’).css({ height: $(‘#bd’).height() + ($(window).height() – $(document.body).height()) + ‘px’ });
});
December 9th, 2008 at 8:11 pm
@Luca Thanks! I haven’t looked at the latest jQuery in a bit. Appreciate the fix!
Please leave a reply »