Yahoo! UI Grids – footerStickAlt (w/ jQuery goodness)
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!
Enjoy!
Popularity: 18% [?]
June 30th, 2007 at 11:48 pm
I hope this gets cross posted in our work blog or wiki-fied.
July 16th, 2007 at 12:21 pm
On the page with long content, only the first line of the footer is visible on initial page load. Scrolling is necessary to see the second line. If this is intended, ok, but I think it would look nicer if the entire footer was visible (as it is in the short page content version).
December 13th, 2007 at 3:29 am
[...] few months ago, I wrote a blog about implementing footerStickAlt using jQuery & Yahoo! UI Grids. Fast forward to the present [...]
July 17th, 2008 at 9:05 pm
Great solution. Works just like I’d expect. If there’s alot of content on the screen then I’d want the footer at the bottom of that content (and not at bottom of screen where it covers up content). If there isn’t much content then I’d want it at the bottom of the screen.
One thing that would be useful is to execute the same javascript execute on a browser resize. Can that be done?
Please leave a reply »