Creating A Slide Up Footer Using jQuery

As I said in the intro, you can’t really create a slide up footer due to the fact that normal document flow flows from top to bottom, however with a little bit of jQuery (and some math) we can simulate a upward sliding footer.

Disclaimer: I am in no way a jQuery expert, I have no idea if there is actually a normal way to get round the whole top to bottom thing, but this is what I came up with. Feel free to let me know if there is a better way to do it, or suggest some improvements.

First a little note. I wanted to keep my footer in document flow so that it would push the rest of the page upward, that is why I am not going to position my elements so that they float over everything like some of the sliding headers you may have seen. Also because I am not going to use positioning this trick relies on an optical illusion that cannot be maintained if the page length is shorter than the browsers viewable area. Unfortunately I haven’t found away around this without using positioning. Please let me know if you have any ideas on how to get around this while maintaining the effect.

Footer HTML

First let’s get some HTML. It’s really simple:

The first div is to set our width at 100% since I want a full page background for my footer. The second will hold the content boxes and will have a width of 980px and the boxes hold the content with floats, margin and padding etc. Here is the CSS:

The only thing worthy of note here is the display: none in the #footer_content CSS rule. This is to hide the footer when the page loads.

Sliding Up Footer jQuery Code

Onto the jQuery we go:

I am using this in WordPress so no conflict is enabled that is why I am handing the dollar sign ($) through the normal DOM load event.

Let’s go through the code. First we create a slide variable. This is to keep track of whether or not the slider is closed or not, we set it to false since it starts closed. Next we need the height of the element we plan to slide, so we grab it’s height using the height() method.

Next we target a button. I didn’t write out the HTML for the button as you can bind it to anything you like. We grab the document’s height (that’s the height of the entire HTML page), then the window’s height (that’s the height of the visible browser window). Then we take the doc height away from the window height and add on the height of the element we want to slide. This will give us the position (in pixels) down the page the top of the browser window needs to be at to show the entire page after the slide element has been expanded.

Next we run our animation to slide the element. I use toggle here since it is a very easy way to toggle the height from 0 to the elements original size. Now if slide is false it means we are opening the slider, so we animate the browser window using scrollTop (basically move the top of the browser’s inner window to the specified position on the page) to the top position we worked out before. One small note here is that the durations of both animations must be the same to keep the illusion of the element sliding up.

I hope that all makes sense. Let me know if I’ve missed something or you are having trouble getting something to work. If you have a better way of sliding a footer up (remember it must stay in document flow like mine) then please let me know, I have been working properly with jQuery for long and so I might have ended up doing some things the awkward way.

Here is a live example up. It’s on it’s own html page. You can see it here (opens in a new window).

FooterjQuerySlide