Creating A Slide Up Footer Using jQuery

/ Javascript, jQuery / by Paul Robinson / 89 Comments
This post was published back on March 25, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

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).

89 Comments

Author’s gravatar

A demo link would be extra helpful… Thanks!

Reply
Author’s gravatar author

An example is now up on the bottom of the post (underneath the video).

I’ve just noticed that a problem with this effect is that if the page isn’t large enough to fill the viewable area it reverts to looking as though the footer slides down. I’ve no idea how to get around that unfortunately. 🙁

Author’s gravatar

Great article! It would be also greater if the button for Demo was larger 🙂
Thanks!

Reply
Author’s gravatar author

I’m actually in the process of using some of the new CSS 3 features to make a demo button, I’ll come back through & alter some of the older posts once I’ve made it. 😉

Author’s gravatar

Paul, just tested it in Opera 10.54
when you click to expand and collapse button the footer jumps… Can you fix this?

Reply
Author’s gravatar author

Depends on what you mean by jumps. I have Opera so I’ll test it, but if it’s a bug with the height animation it might be a jQuery bug. I’ll check it out for you though. 😉

Author’s gravatar author

Fixed. It appears to be a bug related to Opera where it reads $('html, body') and scrolls twice, once on the html & once on body.

I’ve added the fix into the jQuery code with a comment explaining what it does. I’ve tested it & updated the example and it seems to work. Let me know how it goes. 😉

Author’s gravatar

Hi Again,
if #footer_lower have the same height as #footer_higher so it works fine in Opera now, if #footer_lower is smaller height then it jumps again.
Also now we have the same problem with IE 🙁

Author’s gravatar author

I’m unable to test it in anyother IE than 8 & it works okay for me. Is the problem in IE 7?

I’m not sure what you mean by that… I don’t set a height in the example it is set automatically by the content inside it.

Author’s gravatar

Demos are easy with jsbin!
http://jsbin.com/iqeye4

Super huge DEMO buttons are nice too. Especially if the page is themed and provides the user a better understanding of how said plugin / functionality can be used.

Reply
Author’s gravatar author

Indeed. Demo buttons that match your theme are awesome when your designer isn’t extremely busy.

I will eventually get a demo button on the pages.

Didn’t know about jsbin.com though. Thanks for that. 😉

Author’s gravatar

Thanks Paul, i was googling around and all i found was only a slidedown. This is exactly what i need, excellent workaround!

Reply
Author’s gravatar

Very useful. I’ve wrapped it in a function for those that need it.

Reply
Author’s gravatar

if(slide) {

should be

if(!slide) {

@Blog author: please fix the previous comment and delete this one.

edit: fixed for ya.

Author’s gravatar author

Fixed the code for you and thanks for the wrap. I’m sure it’ll be helpful to a lot of people. 🙂

Author’s gravatar

Haha,

Excellent. I love it. Such a simple use of the jQuery slideup and slidedown functionality to make such a cool footer effect. Thanks for this 🙂

BTW, I have also created a beginner tutorial on using the jquery slideup and slidedown functionality. This is targeted for absolute newbies and I feel would be a great resource on this article: http://www.tonylea.com/2010/jquery-slideup-and-slidedown/

Thanks again. Appreciate your help.

Reply
Author’s gravatar

I’ve wrapped your code in a plugin. Hope it’s useful.

Usage:
In your HTML, an element that you want to act as footer (ex. #footer), an element to act as trigger (ex. #trigger) are assumed.

apart from this html file, you’ll need to include my snippet somehow, and also bind it to your footer element.

—–

Argh! Blog formatting mangled the code.

You can find it in a more accessible form here.

Admin Edit: I’ve merged your two comments & removed the code that got mangled (sorry about that). 🙁

Reply
Author’s gravatar author

Thanks for doing that. I’m sure it will be very useful. 🙂

Sorry about the code getting mangled by WP. I’ve cleaned it up as best I can. Let me know if I can do anything else. 😉

Author’s gravatar

It was my fault for overlooking the [code][/code] tags 🙂

Glad to hear you like it.

Author’s gravatar author

No worries. It’s not the first time I’ve forgotten/overlooked the code tags. 😉

Once again thank you for taking the time & effort to make it. 🙂

Author’s gravatar

Is there a way to include a active class state on the footer button when the footer to indicate whether the footer is open or closed?

Reply
Author’s gravatar author

Hi Sam,

I would imagine you could. You could try adding in a addClass() into the jQuery code. You would need to add the class into the if slide false and use removeClass()in the else part. So it might look a little like:

Hope that helps you out. 🙂

Author’s gravatar

Sorry, that should have said…

Thanks for geting back to me so fast! I havent got it working just yet (im a bit of a jQuery noobie right now)…does the class need to be added to an “a tag”rather than a target div?

Could that be why it isnt working?

Cheers
Sam

By the way, this is a lovely tutorial.

Reply
Author’s gravatar author

It should work regardless of what you add it to. It all depends on what you want to change when it’s open or closed. If you want the content area to change, then you’d add the class to that. If you want the button to change you’d add it to the button (a tag).

Author’s gravatar

hi Paul,

how can i change the button when the footer is closed and when it’s open?

i have a different button for each state.

thanks in advance.

Reply
Author’s gravatar author

Hi Juliane,

It would depend on if the button is an image or text.

If it’s text you could target it and change the text using .innerHTML() or .text().

If it’s an image the quickest way would be to give the image a class that applies the buttons image as a background image. Then using .addClass() add a different class that overrides the background image.

As for where you’d put the code. The image for the button when the slide is open would go anywhere inside:

The button for when the slide is shut would go here:

The starting image would be set in the CSS and would be closed.

I hope that all makes sense. It’s quite complicated to explain, but I think that makes sense. Let me know if there is something you don’t understand & I’ll try to explain a bit better.

Author’s gravatar

Hey Paul,

I have a little prob with your footer. I can’t get it to stick to the bottom of the browser… it actually overlaps all the content instead of staying below the rest… … any idea how I could avoid that? thanks

Reply
Author’s gravatar author

Hi Yannick,

I’m not sure, it could be a few things. First thing that comes to mind is that there may be a float or positioning problem. Can you post your HTML/CSS via pastebin or something similar?

Author’s gravatar

Your source code makes me easy to understand. Thank you very much.

Reply
Author’s gravatar

wow…nice collections and easy for me to make it!

Reply
Author’s gravatar

Hi! Thanks, this is just what I was looking for, works perfectly! Just a quick question… is it possible to have it in “open” visible state on start? I’d like to use it to hide some extra information links but in some pages I’d like to make them visible without clicking the button. Is this possible??? How should I do it?

Thanks a lot Paul!

Cheers!

Reply
Author’s gravatar

Sorry Paul, just noticed Sam’s comment about this, I’ll have a look.

Cheers!

Author’s gravatar

Can you please give the sample files…. It will be helpful to do test.

Reply
Author’s gravatar author

Hi Vinoth,

There is only one file needed & that is the demo file in the link at the end of the tutorial. If you missed it you can find it here.

This tutorial was made a little while ago when I hadn’t refined my posts yet so the demo link isn’t very easy to see. I am slowly going through the posts to neaten them up, but I haven’t had much time recently.

Author’s gravatar

Hi there, that’s almost exactly what I was looking for. How do I make it so the footer slides up based on time rather than a click? Thank you!

Reply
Author’s gravatar author

Hi Darius,

Instead of a click event you would place it in a setTimeout. So for example:

You can change 1250 to what ever time you like, just remember it is in milliseconds. So 1000 millisecond = 1 second.

Hope that helps.

Author’s gravatar

Is their anyway to make this work properly on ie9. When you activate to show footer the screen scrolls fine but, when you click it again to close/hide the screen wont scroll when the footer hides. It just leaves a big empty area.

Reply
Author’s gravatar author

Hi Matt,

I’m not sure what you mean. I’ve just tested the demo (under the video) and it seems to work okay in my version of IE9.

Can you make a little video to show me the problem? You can use a free tool like Screenr to make a screencast.

Author’s gravatar

Hey Paul, I found the issue. Since I am using the twitter.js plugin for a twitter feed hidden in the footer, one of the twitter css styles (float:right) which was causing the issue. I removed it and its working perfect now. Thanks for the Slideup Footer Script.

Author’s gravatar

Thank you Paul for response! I also noticed that the rising footer lifts up the above content by the height of the footer.

Any way to do it so it slides up without moving the content. Otherwise if I time it for let’s say 5 seconds, the visitors is reading and suddenly the content rises up. A bit distracting.

Thank you so much for your time!

Reply
Author’s gravatar author

Not really. It all has to do with how an HTML page is built.

The content flows from top to bottom so any element that is within document flow cannot flow upward. There are alternatives such as my other jQuery footer, but that is positioned absolute and isn’t really a footer in the traditional sense.

Author’s gravatar

Paul, I don’t really care if it’s a footer in traditional sense. Basically I need this for an email optin form that would slide out form the bottom.

I already bought a few like: http://www.UltimateFooterAd.com

The problem is that those scripts are ioncube encoded and don’t give you the option to change the height of the bar and other things. So not very flexible.

Your solution seems very elegant, I can do HTML and CSS and I think I could copy paste jQuery code.

What is your other solution you mentioned?

Reply
Author’s gravatar author

I’ve just realized you probably want a footer like in my other pop-up footer.

That one is out of document flow and floats over the top of your main content. So when it opens it won’t push the content up, the only problem is that it is literally stuck to the bottom of the browser window so it will follow the visitor as they scroll up/down the site.

There is a demo on the link, if you want to see what I mean by ‘stuck’ to the bottom of the browser, just resize your browser window with the demo open.

You should be able to set up a timer using the same method I mentioned before.

Ioncube is evil, all code should be open source like WordPress & other apps of that nature.

Older Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more