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

written by

WordPress wizard, coding ninja and all round cool guy. Loves Sci-Fi, geeky stuff, and of course Firefly. Currently a self confessed addict of Korean & Japanese Pop.

Advertisement

88 Comments

Author’s gravatar

Love the script its great! But I’m having one major problem with it….

If you set the content height to ‘auto’ and your content doesn’t fill the page then the footer is no longer at the bottom. Its half way up the page =/

Reply
Author’s gravatar

Hi James,

indeed. Like I said in the demo and at the start of the tutorial there is no way (currently) that I know of to fix that problem.

This footer works by sliding the footer down & moving the browsers viewport at the same time. If the page isn’t big enough to scroll, then unfortunately the effect no longer works.

Author’s gravatar

Hi,

Great tutorial! I need to add a toggle with two images up/down, on the footer_bottom. Can you help?

Best Regards

Reply
Author’s gravatar

You have a simple HTML/Css problem
1 – Put #footer_button inside #footer_higher like this:

Next use Css to correct the position of the sliding footer:

That’s all ;)

Reply
Author’s gravatar

Hi,

I’m not sure what you are correcting? By using fixed in the CSS you are negating the whole point of this tutorial. I already have a tutorial on how to create a fixed position sliding footer. This tutorial is an experiment showing how it could be possible to create a slide up footer that defies the normal top-to-bottom document flow. Does that make sense?

Author’s gravatar

hi, great code and love your site.

could you tell me how to have the footer expanded on load and the button closes the footer

thanks

Reply
Author’s gravatar

i add your css html script. but when i build it shows nothing on the web. i used vs 2010 for this.
please help me. i really like your tutorial and it also meet my requirement.
thanks

Reply
Author’s gravatar

I’m not sure what you mean by build? There is no need to ‘build’ HTML/CSS as it is an interpreted language like PHP, not a compiled language like C#/C++.

Author’s gravatar

following are the code which i used: please tell me where i am doing wrong.

Admin Edit: I had to remove the HTML/CSS as it was mangled by WordPress.

Reply
Author’s gravatar

Any way to prevent the wiggle happening on content beneath your sliding element when it opens & closes?

It’s happening on my implementation, and I see it happening on your demo as well. I’m viewing in Chrome and Firefox.

Reply
Author’s gravatar

Hi,

I need to add a toggle with two images up/down, on the footer_button. can u help me?

Reply
Author’s gravatar

Hi,

You would normally do that via a CSS hover, using background-position and a CSS sprite. A CSS sprite is just a single image with both image states on. You set your element to be block & only large enough to fit one state of the image, then shift the image on hover. If you can paste some of your code I can give you the exact code you’d need if you like.

Author’s gravatar

Hi Paul,

I can´t put jquery.carouFredSel-6.2.1 into the slide footer. The carousel doesn´t work. Could you help me? I used jquery noconflict :(

All the best!

Reply
Author’s gravatar

Hi,

Unfortunately the problem could be anything when you are using two different scripts together. Are you able to send a link or post any errors you see in the JS Console in Chrome/Firebug?

Author’s gravatar

Can you convert the click function to a rollover?

Reply
Author’s gravatar

Hi Deena,

There is, you should just be able to swap the word click for hover. Though I would advise against using this tutorial, unless you have a very specific use for it. Instead try our other pop up footer tutorial.

Author’s gravatar

I’ve tried implementation of your script on one of my sites and the functionality is great. The only thing that doesn’t work for me is that the content slides open and the browser scroll does not follow the content that appears, meaning that footer content goes below the fold and the page needs to be scrolled in order for the user to view it. Have you run into this problem at all?

Thank you for sharing your work!

Reply
Author’s gravatar

I should also note that the page does extend beyond the browser window, so the issue mentioned in the article is not the issue I’m currently dealing with.

Author’s gravatar

Hi,

It could be due to a ScrollTop bug so jQuery isn’t able to scroll the browser window down. To be very honest I still have trouble recommending this idea since it hits a lot of browser quirks/bugs. This implementation was done quite a while ago & I battled against a fair few then, I have no idea if the situation now is worse or better.

You could try a scroll plugin such as Smooth-Scroll.js to scroll the page down though as it might help get rid of compatibility problems with certain browsers when getting the page to scroll down.

Author’s gravatar

Hello
if you resize the window of your browser and then you scroll horizzontal right, the footer change background color
could you please verify it?
Thanks

Reply
Author’s gravatar

Hi Peter,

I can indeed confirm it. It is due to the container element being 100% and the inner element being set to 980px. This was created when media queries & responsive design were just starting to emerge so I wasn’t really concentrating on having it work for displays any smaller than 980px.

If you still wanted to use this, even on mobile, you would have to not use a fixed width on the inner element.

Author’s gravatar

Hi Paul,
Would you please help me, how to SHOW/DISPLAY the footer BY DEFAULT ONLY when users FIRST load my site, and then users can click to hide.

But when users load again for the second, third, and so on, (example, click other pages/posts), the footer is hidden (not shown), and users must click to show.

So, I mean, the footer ONLY shown for the FIRST loading.
Thank you.

Regards,
Andry

Reply
Author’s gravatar

Hi Andry,

It would be a case of using the jQuery Cookie plugin to store if the visitor has already been to the site. Set all the CSS so that the footer is open by default, then have a JS check for the value of the cookie & set the defaults to be closed if a specific value is found.

I can’t write out all the code as it would be too large for the comments area, but everything you need is already in the tutorial, you just need to add in the creation of the cookie & conditional check using jQuery Cookie.

Author’s gravatar

Thank you very much, Paul, for your answer.

Regards,

Reply
Author’s gravatar

I appreciate, It really help me out, but can we make it more smoother the transition effect?

Reply
Author’s gravatar

Hi,

This is a very old post & I would advise against using this code as it was very hacky & sort of an experiment at the time.

Author’s gravatar

Hi I am new to jquery..I incorporated this script in my project & it works great :)
I want the footer slide to be open by default and slide down after 30 seconds. How do i go about it.

Reply
Author’s gravatar

Hi Natasha,

It’s a pretty old script now, glad to see it still works. You would need to do a pretty large change to the code to do that. You could do something like this:

I haven’t had time to check if it works, but it should. You would also need to remove display: none from the footer CSS. That would make it visible on page load & the code should trigger after (around) 30 seconds. The only issue would be that if someone clicks the button before the 30s is up it will still trigger & push the footer into the opposite state (closed if open, open if closed).

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">