jQuery Pop Up Footer Version 2
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="footerSlideContainer"> <div id="footerSlideButton"></div> <div id="footerSlideContent"> <div id="footerSlideText"> <h3>Hey! I'm a Sliding Footer</h3> <p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p> <p>What can you use me for? Well look at all this stuff:</p> <ul> <li>Sales information</li> <li>Important updates</li> <li>Unobtrusive about panel</li> <li>Or just a good ol' footer</li> </ul> <p>There are obviously many other uses, but these are the few useful ones I can think of.</p> </div> </div> </div> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
#footerSlideContainer { position: fixed; bottom:0; width: 100%; } #footerSlideButton { background: url(sliderButton.png) top left no-repeat transparent; position: absolute; top: -55px; right: 20px; width:50px; height:50px; border: none; cursor: pointer; } #footerSlideContent { width: 100%; height: 0px; background: #251b15; color: #CCCCCC; font-size: 0.8em; border: none; font-family: DejaVuSansBook, Sans-Serif; } #footerSlideText { padding: 15px 10px 25px 25px; } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Use 'jQuery(function($) {' for inside WordPress blogs (without quotes) $(function() { var open = false; $('#footerSlideButton').click(function() { if(open === false) { $('#footerSlideContent').animate({ height: '300px' }); $(this).css('backgroundPosition', 'bottom left'); open = true; } else { $('#footerSlideContent').animate({ height: '0px' }); $(this).css('backgroundPosition', 'top left'); open = false; } }); }); |
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
Makus @loimp
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?
Paul Robinson
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 betime()+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. 🙂
Jon
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
Paul Robinson
Hmmm. I’m not really sure. The only bit of code that actually sticks it to the bottom of your browser windows is the
#footerSlideContainer
CSS 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 tobottom: 0px;
but as far as I’m aware you do not need px if you are defining a zero value.Jon
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)
Paul Robinson
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?
Jon
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.
Paul Robinson
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. 🙁
Jon
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)
Pete C
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.
Paul Robinson
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. 😉
Dan
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!!
Paul Robinson
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.
Dan
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.
Paul Robinson
No worries. I do stuff like that all the time.
Dan
I can’t say thanks for making my life easier, thought you might like to see a implementation with a little tweak that’s kinda cool
http://www.projecthopeforhousing.org/indexevents.php I honestly wish I wasn’t so fricking poor.
Cheers:
Dan
Dan
I meant to say I can’t say thanks enough, sorry
Paul Robinson
Don’t worry about it. I’m just glad the tutorial helped you out. 😉
Jon
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
Paul Robinson
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.
Paul Robinson
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?
Jon
….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
Jon
Just got it sorted!! Dont know what went wrong the first time – but its working now!
=0)
J
Paul Robinson
I’m glad you got it working, because I was officially stuck as to why it wasn’t. 😆
Barbara
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)
Barbara
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.
Paul Robinson
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?
Barbara
Fixed the space just before you saw it, hehe.
Thanks for your help and keep up the good work.
Paul Robinson
Ahh okay. No problems & thank you. 😉
Pawan
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
Paul Robinson
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. 😉
Pawan
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
Paul Robinson
No worries. Glad the tutorial helped & you got what you wanted working. 😉
Marco Lee
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
Paul Robinson
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.
Marco Lee
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 😉
Paul Robinson
Glad you got it sorted. 😉
Andrew H
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
Andrew H
Sorry was meant to say I´m using a BG Image as well as normal text!
Paul Robinson
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.
Rick
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.
Rick
[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]
Paul Robinson
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.
Rick
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 ?
Paul Robinson
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.
Rick
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.
Paul Robinson
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.
Rick
Thanks, will donate and give you a link too after I am all set up.
Paul Robinson
Thank you. 🙂
Bill Stergio
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 ..
Paul Robinson
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.
Bill Stergio
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 🙂
Paul Robinson
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. 😆
jamie
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
Paul Robinson
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. 😉
jamie
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.
Paul Robinson
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. 😉
nob
Is there any easy way how to change button with picture? For example by image with icon?
Paul Robinson
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.
Darren Starr
Hello mate, how much would you charge to create a wordpress plugin that does this? Thanks very much, Darren Starr
Paul Robinson
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. 😉
Martin Chamorro
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:
Martin Chamorro
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 🙂
Paul Robinson
Nice job. Thanks for sharing & I’ve deleted those lines for you. 😉
Adrian
what would be the best approach to having three different buttons horizontally all toggling on the same “footerSlideContent” div?
Paul Robinson
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.
Adrian
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.
Paul Robinson
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?
Adrian
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/
Paul Robinson
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.
Adrian
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.
Paul Robinson
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.
Adrian
I appreciate your help Paul. Thanks again for your insight. Ill try the side by side with a scrollable combo me thinks.