jQuery Pop Up Footer Version 2

/ Javascript, jQuery / by Paul Robinson / 290 Comments
This post was published back on April 8, 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.

These footers are very, very common around the web, but that doesn’t make them any less useful. They are actually fairly easy to make despite looking quite difficult.

First let’s take a look at what we are going to be making.

This version is based on a request I received via email, the person wanted a slide up footer that would leave a little tab so that you could show the footer again at a later time. That’s opposed to the type of sliding footer where once it’s closed the user is unable to see it again until the page is reloaded. So first let’s start with the HTML to make it.

We have a container, to hold the entire footer. A button, this will be the part that is always visible, and a content container to hold the content to slide. We also have an optional element inside that to help contain the text content. This is mainly so we have something to apply the padding to without effecting how the jQuery code animates the height of the footer. The most important part is actually the CSS & not the jQuery. Here it is:

The container must be 100% if you want the footer to stretch the width of the page. Position must be fixed and the bottom set to 0 so that it sticks to the bottom of the browser. This is the important part that makes your footer follow the browser.

The button can be styled in any way you wish. The styling here uses an image I’ve created. The top positioning is worked out simply by minusing the height of the button and adding a little extra to add some distance between the image and the opened footer.

The last part is the style for the content. The animation is applied to #footerSlideContent so this has one of the important CSS rules included. Setting the height to 0px is extremely important if you want the footer to start closed. If you want to center your content instead of having it full width I’d advise applying the centering styles (and also any padding) to the #footerSlideText.

Finally here is the jQuery:

Those of you who visited this tutorial a little while ago may have noticed this code has changed. Well I’ve refined it since I first posted this tutorial & decided it was finally time to update it. It does exactly the same job, just with a few tweaks. First we have the standard DOM ready. I’ve also added the WP no conflict version in a comment for those who need it.

We set a variable we will use to tell if our footer is open or closed. We set it to false as it starts closed. Now we bind out click event. If our variable is set to false (in type and value) we animate our footer to it’s max height. This height is unfortunately just guess work based on the content inside your footer. I haven’t figured out how to dynamically produce the height yet. If anyone knows how, please get in touch via the comments.

That image I made for the button was a CSS sprite. It has an open & close image on the same image. So I use the CSS method of jQuery to change my images position to show the close button. We then set open to true, since the footer is now open.

If the button is clicked and open is set to true, it will trigger the else. This just does the same thing just reversing everything. Changing the height to 0. Moving the background postition back and setting open back to false. It really is that simple.

I hope this updated version of the tutorial is more enlightning than the old version. I also hope you liked the new demo page. As always, any questions or comment drop the in below.

290 Comments

Author’s gravatar

Thanks for a great tutorial! If you wanted to keep the footer down for people who have already clicked it to go down (so it doesnt popup on every pageload once they close it), how could you modify the code to do that?

Reply
Author’s gravatar author

Hmmm!

That would probably require you to track the user in some way. You could use cookies, but doing that through jQuery is kinda awkward, so my best advice is to use PHP instead.

In your themes functions.php file set a cookie like this:

This will check for a cookie called ‘showFooter’ and if it isn’t present create it. It will also set a variable to TRUE if the footer needs to be shown & FALSE if it doesn’t.

Then in your page with the sliding footer on do this:

That will only make the footer slide up if the cookie isn’t present.

In the cookie code you will need to change time()+3600 to how ever long you wish the cookie to last before it’s destroyed. As an example 30 days would be time()+60*60*24*30 or you can write a value as a Unix timestamp.

That’s not exactly waiting until they’ve closed it, it really checks to see if they have visited your site more than once.

The only way I can think of doing it exactly the way you asked is setting a cookie via jQuery & that would require the cookie plugin. Let me know if you want to try that way & I’ll see if I can get that working. 😉

By the way thank you for the donation. 🙂

Author’s gravatar

Hiya, just trying to use the above, all is grand except i cant get it to stick to the bottom of the browser window? Any suggestions? Jon

Reply
Author’s gravatar author

Hmmm. I’m not really sure. The only bit of code that actually sticks it to the bottom of your browser windows is the #footerSlideContainerCSS rule. I can only think that maybe the CSS isn’t being applied for some reason.

If you have Firebug try using that to make sure the CSS is applying bottom: 0; to the element. You could also try changing it to bottom: 0px; but as far as I’m aware you do not need px if you are defining a zero value.

Author’s gravatar

After googling all eveing and playing around with the #footerSlideContainer code i cracked it there now! I change the absolute value to fixed. It seems to have worked – have to test it on a few differnt browsers – but hey!!! =0)

Author’s gravatar author

Wow. Pretty freaky, but yeah fixed would work.

Does the example link in the post work okay for you? Just wondering as it’s using the same code as in the post? I’m using Firefox/Chrome & it seems to work well. I’m just wondering if you are using another browser I didn’t test in?

Author’s gravatar

So to speak – the example works – i cant really tell as theres no content to scroll – so i dont know if it sticks to the browser bottom. Im using Safari. =0) But i checked it on Firefox too and it was the same.

Author’s gravatar author

Thanks Jon, you’ve just made me realize I’d made a huge c**k up in the code & that the position should be fixed.

I’ve know idea what I was thinking when I wrote that. *headdesk*

I’ve fixed both the example & the code in the post. I’ve also made it so the example will scroll so you can tell it’s working.

Again I’m very sorry. 🙁

Author’s gravatar

No problem!! Took me a while to find a site with a workable solution for me – so thank you too!!

Just implementing over the next few days! =0)

Reply
Author’s gravatar

Hi, great tutorial love how simple it is – just wondering, what would I need to do to the javascript function to add a delay on the popup? Just 4 seconds or something would be spot on.

Cheers

pete.

Reply
Author’s gravatar author

Setting delays in Javascript is notoriously awkward, but you can do it.

Unfortunately the easier way of using jQuery’s new delay() method doesn’t work since it is used for delaying FX queues & doesn’t seem to work for other methods such as triggers.

I’ve tested that code & it’s seems to work, just change the 4000 to the amount of time you want the delay to last in milliseconds (1000th of a second).

Hope that helps. 😉

Author’s gravatar

Hi: Thanks for the great tutorial. For the life of me I cannot get the cotainer div to center. I wanted to have a 900px wide or so popup. I can position it with px and % but for some reason {margin: 0px auto 0px auto;} won’t center it. I tried margin-left:auto; margin-right:auto; and every other combination I could think of. My brain is bleeding, have you any ideas, or am I just missing something. Thanks in advance!!

Reply
Author’s gravatar author

If an element is positioned absolute you can’t center it using auto margin.

You’d have to create a 100% wide absolutely positioned container & put a element inside that 900px wide with margin: 0 auto; in it.

If you’ve done that & I’ve completely misunderstood let me know.

Author’s gravatar

I got it, so sorry. I changed the width of the containing div (not good) when I put it back to 100% and positioned the content div, it worked perfectly. Please excuse my stupidity.

Author’s gravatar author

No worries. I do stuff like that all the time.

Author’s gravatar

I meant to say I can’t say thanks enough, sorry

Author’s gravatar author

Don’t worry about it. I’m just glad the tutorial helped you out. 😉

Author’s gravatar

Hiya again, I was wondering, is it possible to put the jquery code in an external .js file?

This would just make it easier to change numerous pages at once. I was trying, but cant get it to work.

Thanks

Jon

Reply
Author’s gravatar author

I can’t see any reason why you couldn’t put it in an external JS file.

I’m not sure why it’s not working, there isn’t really much can go wrong. I know it’s stupid but I’d just say double check your spelling etc. I’ll try it myself though and see if an external js works for me.

Author’s gravatar author

I’ve tried the code out in an external JS file & it works okay for me.

Are there any errors shown in the browsers console or in Firebug if you use it?

Author’s gravatar

….no errors…..

….if it works for you then it must be my .js file – do you have the code your using?

Javascript/jquery aint my strong point! Thanks for spending the time looking at this!

J

Reply
Author’s gravatar

Just got it sorted!! Dont know what went wrong the first time – but its working now!

=0)

J

Author’s gravatar author

I’m glad you got it working, because I was officially stuck as to why it wasn’t. 😆

Author’s gravatar

This is exactly what I was looking for, thanks!
Is there a way to adapt the code so that the footer is closed when the page is loaded? (implemented here: http://beta.beautifullalaland.com/scrolltest4.html)

Reply
Author’s gravatar

Oops, I forgot to ask is there’s a way to get rid the empty space between the bottom of the hand image and the footer (see demo). I’ve been trying to tweak the css but can’t get it fixed. Thanks again.

Author’s gravatar author

To get it to be closed when the page is loaded just remove the trigger line that looks like:

I’m using Chrome and don’t see a space below the hand?

Author’s gravatar

Fixed the space just before you saw it, hehe.
Thanks for your help and keep up the good work.

Reply
Author’s gravatar

Hi, thanks for the tutorial.

Is there any way to achieve the following:
1. Get the pop-up on the screen only at some condition. Until then it remain hidden.

2. A close (X) button to completely close the pop-up. Right now it only minimizes.

3. Automatically fade out the Reminder button after a delay once minimized. And if step 1 is possible, then I can get it up again on some condition.

Basically I am planning to use this as a ‘reminder’ footer.

Regards,
Pawan

Reply
Author’s gravatar author

Well yes I guess you could, but the code would depend entirely upon your condition.

Really it does close the entire thing, it’s only because the button is positioned above the container that holds the content that it shows even when closed. If you didn’t move the button up you would not be able to see it after it was closed.

You could use a setTimeout to delay a function which fades out the footer container. Again though how you would do it is entirely dependant on what you want to do.

Hope that helps you a little. 😉

Author’s gravatar

Thanks for the fast reply..

I figured out the solution using simple JS techniques.

I added a X button next to ‘Press Here’ .. on click of it.. I called jquery hide() function on footerSlideContainer.

Similarly .. I called show() on footerSlideContainer for my conditions.

It is looking awesone.

Thanks for the tutorial again.

Regards,
Pawan

Author’s gravatar author

No worries. Glad the tutorial helped & you got what you wanted working. 😉

Author’s gravatar

I just can’t seem to center this out

position: fixed;
bottom: 0;
width: 100%;

a space always appear at the left side of the footer

Reply
Author’s gravatar author

From a quick check of your HTML & CSS it looks as though it’s because the footer is inside your content area which is centered. You will need to place it outside your content.

The best place might be outside your content div, but inside the wrapper.

Author’s gravatar

waw! thanks! I just solved it already. I placed the footer on the main template outside content, just like you said.

I’d mention you 😉

Author’s gravatar

Hi there Paul,

Nice slider, I have one problem with mine. When container shrinks the text in the button disappears ??
I´m using a BG image for button

here´s the CSS

#footerSlideContainer {
position: fixed;
bottom:0;
width: 100%;
}
#footerSlideButton {
background-image:url(images/bottom_border_shadow.png);
background-position:top;
background-repeat:repeat-x;
margin: 0 50% 0 auto;
height:42px;
line-height:50px;
font-size:.8em;
width:100%;
text-align:center;
border-bottom: 0px;
color:#FFF;
cursor: pointer;
}
#footerSlideContent {
width: 100%;
height: 200px;
background-color:#000;
color: white;
display:none;

}

Thanks Andy

Reply
Author’s gravatar

Sorry was meant to say I´m using a BG Image as well as normal text!

Author’s gravatar author

Very strange. I really don’t have any idea. Best guess though? Maybe you have another CSS rule already on the page that is stopping the text from following the footer down?

It’s a very bizarre thing if only the text vanishes… I just noticed I have a mistake in my CSS which I need to change, but you’ve already removed that so it isn’t the cause…

I’m sorry to say that if you haven’t got a CSS rule on your page already effecting it, I honestly have no idea. If you do find out please let me know.

Author’s gravatar

Hello, newbie learner here. I have only used the exact code you gave and changed color

background: #A9F5F2;

tried to add a pic link

but nothing shows

I am not well versed in CSS and wondered if

display:none;

is the reason?

Thanks for all you do, I hope to learn and your site is awesome.

Reply
Author’s gravatar

[code]
<div id="footerSlideContent">
<center><a
href="http://www.facebook.com/sharer.php?t=SiteSpacePro.com"><img
src="/images/facebook.png" /></a></center>
</div>
[/code]

Reply
Author’s gravatar author

Deleted that other comment for you. 😉

Yes display:none; does make something disappear in CSS, but it’s needed to work with the javascript. Did you copy over the button too? If you don’t have that, and you aren’t using the second piece of jQuery that auto opens it, you will not be able to see anything.

Other than that though your HTML looks okay.

Author’s gravatar

Between my post and the very few minutes before you answered (WOW!) I used iframe inside the footerSlideContent and it is fine. 2 apologies-

I could see the slide up fine, sorry for the lack of detail.

Sorry for being so unskilled at posting and thank you for deleting the unnecessary post.

The iframe shows the like button fine but the previous code doesn’t show it. It is the CSS display:none ?

Author’s gravatar author

If you remove the display:none the code will not work as it should as there will be nothing to tell the slider to hide on page load.

Do you mean if you use the iframe version of the facebook code it shows inside the footer okay? If so it sounds as though the path to your facebook image is incorrect.

Author’s gravatar

Ok, I changed
[code]
src="/images/facebook.png"
[/code]
to
[code]
src="images/facebook.png"
[/code]

and it works fine though I don’t fully understand the / problem

Thank you for helping !!!
The programmers have made an awesome site which I haven’t uploaded yet and I was hoping to get a handle on modifying. Thank goodness for your site.

Author’s gravatar author

No problem.

If it helps ‘/images/facebook.png’ means from root. So it would look for the file from the start of you domain name.

‘images/facebook.png’ means path relative to the current file.

Author’s gravatar

Thanks, will donate and give you a link too after I am all set up.

Author’s gravatar

Thanks, great footer pop up, but it does not seem to work in internet explorer 8 … any ideas on how to make it work … The whole thing sits at the bottom of the page and when clicked to close or open it moves the whole page up or down ..

Reply
Author’s gravatar author

It’s working okay for me in IE 8, FF 3, Chrome 5/6, and Safari on Windows 7 & also tested in IE 7 in Vista.

I’m not exactly sure what would cause that problem. All I can suggest is to check over the CSS & JS.

Author’s gravatar

Hi, thanks for the quick response, I’ve been pulling my hair out all day, everything was fine, until now when I saw that one of the php scripts was adding cookies before the DOCTYPE, all browsers worked fine, I mean “ALL”, apart from I.E. So with a few changes I’ve sorted out the problem – Many Thanks 🙂

Author’s gravatar author

Glad you managed to get it sorted. I knew placing stuff before the Doctype could cause some strange stuff, but I’ve never come across anything like that.

Trust IE to find something unusual to do. 😆

Author’s gravatar

Hey there, Nice tutorial. I was looking for something like this for a while. Two things. First, you said you did another tutorial where the footer is inside the wrapper. I would suggest in the future that you link all related tutorials because after following this one, I have decided that I am going to need it in the wrapper.

second, can you show how to change the text with jquery so that when it goes down, the text changes and changes again on the way up? I tried

this.text(($(‘#toggle’).text() == ‘Show more’) ? ‘Show less’ : ‘Show more’);

with no luck at all

Reply
Author’s gravatar author

I normally do link to the other post. I must have missed my coffee that day…

Nearly, but not quite:

I’ve tested that & it seems to work. Hope that helps. 😉

Author’s gravatar

Yes, thank you very much. It did work. I like it. the weird thing is that you have to have text in the footer in order for it to work. This line

Show Less!

if I take out the Show Less! thinking that the jquery will handle it, then the link disappears. But if I put it back in, all is good. Strange.
You have a nice site here. I have subscribed. Looking forward to more tuts.

Author’s gravatar author

If you mean you need to have something inside the clickable element then yes. It must match whatever you wrote in ($(this).text() == 'Show more').

There hasn’t been a new tutorial in a week or so, but there should be some coming soon. 😉

Reply
Author’s gravatar

Is there any easy way how to change button with picture? For example by image with icon?

Reply
Author’s gravatar author

Sorry I haven’t replied. I honestly missed your comment. Again apologies.

You really just put whatever you want where I’ve written ‘Press Here’. It could be a image element or something else entirely.

Author’s gravatar

Hello mate, how much would you charge to create a wordpress plugin that does this? Thanks very much, Darren Starr

Reply
Author’s gravatar author

Hi Darren, If you send me an email via the contact form explaining what you require I’m sure I can work something out for you. 😉

Author’s gravatar

Thanks for this. I needed to tweak this so that during a session the footer would remain open/closed throughout the site if a user clicked on the button. I also wanted to make sure that the footer only slid up the first time a visitor entered the site.

First, I got a nice clean script to do client-side cookie handling. I got the script from here: http://techpatterns.com/downloads/javascript_cookies.php

From there, I modified your script in the following way to achieve what I needed:

Reply
Author’s gravatar

Oops, I copied too much of my code. You can ignore lines 28-34. It would be nice if you could edit my post for me to delete those lines 🙂

Author’s gravatar author

Nice job. Thanks for sharing & I’ve deleted those lines for you. 😉

Author’s gravatar

what would be the best approach to having three different buttons horizontally all toggling on the same “footerSlideContent” div?

Reply
Author’s gravatar author

I haven’t tried it, but my best guess would be just to make your other buttons and then use the same click & slide toggle code but target the other buttons. Kinda like:

I think that should work. Let me know what happens & if it doesn’t I’ll see if I can knock something else up.

Author’s gravatar

Thanks Paul, but what i think i forgot to mention is that the there is three different divs for the slidecontent i want to call. My issue is making the three different buttons call three different divs in one single slidecontent div.

Reply
Author’s gravatar author

Ahh. Well in that case I think the code would be pretty much the same except you would change the target for the slide toggle part. Is that what you meant?

Author’s gravatar

I got the divs to correctly toggle in and out but they are stacking on top of each other. Would i need to use the ul class as the trigger instead of individual div or li ids to make only one “footerSlideContent” toggle. I tried using the z-index property but it does not do the trick. I have a version on jsfiddle if anyone want to take a gander.
http://jsfiddle.net/Hadrian/v8MVc/7/

Reply
Author’s gravatar author

Ahhh. I get what you mean now. Thanks for putting up on jsfiddle.

If you want them side by side you would need to float each footer using CSS. How you do that depends on what effect or look you are going for.

If you can explain or show (using a picture) how you want the footers to display I might be able to figure out some code to do it.

Author’s gravatar

I saw this version that seems to work in place but the div is not positioned using the bottom property and when i tried the modification it went south pretty quick. What i am intending to do is for the buttons to slide the “footerslidecontent” from the bottom up like your bottom effect and give the appearance of using one container similar to the jsfiddle here….except reversed i supppose.

Author’s gravatar author

I’m not sure you can do that with just this code. It’s really just to make a pop up footer using a single div. If you used multiple divs and floated them you would end up with three divs side by side that all work independently.

I believe that example is done using jQuery tabs, but for some reason the code is packed & evaled. No idea why since jQuery tabs is widely available. You could try combining the two codes (my footer & jQuery tabs) but I’m not sure if it would work or not.

Author’s gravatar

I appreciate your help Paul. Thanks again for your insight. Ill try the side by side with a scrollable combo me thinks.

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