jQuery Pop Up Footer Version 2

April 8, 2010 / 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.

View Demo

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.

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

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

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:

#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;
}

#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:

// 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;
		}
	});		
});

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

Footer jQuery Pop Up Footer Slide

Paul Robinson

WordPress plugin & theme developer, user of Laravel and learner of React.js. Can usually be found listening to Japanese, and Korean Pop or Vocaloid music while developing.

290 Comments

Looking great mate. Thank you so much, this is the first footer slider I found and stopped looking. It does what I need.

Keep up the good work.

Box 😉

author

Hi Lucas,

Thank you. Glad it was helpful & you liked it. 🙂

thx 4 the code. its really nice 🙂

Thanks for the great tutorial.

Would it be possible to let it open automatic when the user has scrolled down for example 50% or 90% of the webpage (or perhaps in pixel height instead of %) and let it close automatic again if the user is scrolling up again?

author

Hi Michael,

Thank you.

You could try mixing this tutorial with my scroll activated header tutorial to make a footer that is activated by scrolling.

Thanks for the reply!

That link do also look very interesting but I’m no jQuery expert and the popup from the footer look more code intensive (complicated) so I’m sure what or how I should mix with the automatic code part to get the effect after a user has scrolled down half or even 90% of the webpage.

So any advice or pointers you could give would be very helpful 🙂

author

It’s difficult to explain without writing a full tutorial, but you would use the HTML of this tutorial, with the CSS from the scroll activated header tutorial (just swap the ‘top: -50px;’ for ‘bottom: -50px;’ where ’50px’ is the height of your footer.

Then you would use the jQuery code from the header tutorial, but you’d swap the ID of the bar in the header tutorial to the ID of your footer. You may need to play around a little, but most of it is styling as the jQuery is pretty much always the same. You would however need to change ‘top’ in the jQuery code to ‘bottom’ so that it raises the footer up from the bottom of the browser.

I understand, and a big thank you for these helpful pointers and tutorials!!!

author

No problem. Feel free to ask if you need any further help. 😉

Is it possible to use the same slider from left /right side of the page. I have tried it is working on Firefox but on chrome is not working:
My code is below.

/* left menu slider */
#leftSlideContainer {
	position: fixed;
	right:0;
	text-align: left;
	height: 100%;
	z-index:101;
}
#leftSlideButton {
	background: url(/img/sliderButton.png) top right no-repeat transparent;
	position: absolute;
	left:-45px;
	top: 150px;
	right:100%;
	width:50px;
	height:50px;
	border: none;
	cursor: pointer;
	cursor: hand;
	z-index:101;
}
#leftSlideContent {
	width: 0px;
	height: 100%;
	background: #000000;
	filter: alpha(opacity=85);
	opacity: .85;
	color: #CCCCCC;
	font-size: 0.8em;
	border: none;
	font-family: DejaVuSansBook, Sans-Serif;
}
#leftSlideText {
	padding: 15px 10px 25px 25px;
}
/* end left menue slider */

/* left menu slider */

#leftSlideContainer {

position: fixed;

right:0;

text-align: left;

height: 100%;

z-index:101;

}

#leftSlideButton {

background: url(/img/sliderButton.png) top right no-repeat transparent;

position: absolute;

left:-45px;

top: 150px;

right:100%;

width:50px;

height:50px;

border: none;

cursor: pointer;

cursor: hand;

z-index:101;

}

#leftSlideContent {

width: 0px;

height: 100%;

background: #000000;

filter: alpha(opacity=85);

opacity: .85;

color: #CCCCCC;

font-size: 0.8em;

border: none;

font-family: DejaVuSansBook, Sans-Serif;

}

#leftSlideText {

padding: 15px 10px 25px 25px;

}

/* end left menue slider */

Html code is

[ed-: The HTML ended up getting stripped by WordPress so I removed it.]

jquery is

// left menu slider 
// Use 'jQuery(function($) {' for inside WordPress blogs (without quotes)
$(function() {
	var open = false;
	$('#leftSlideButton').click(function() {
		if(open === false) {
			$('#leftSlideContent').animate({ width: '350px' });
			$(this).css('backgroundPosition', 'right bottom');
			open = true;
		} else {
			$('#leftSlideContent').animate({ width: '0px' });
			$(this).css('backgroundPosition', 'right top');
			open = false;
		}
	});
});

// left menu slider

// Use 'jQuery(function($) {' for inside WordPress blogs (without quotes)

$(function() {

var open = false;

$('#leftSlideButton').click(function() {

if(open === false) {

$('#leftSlideContent').animate({ width: '350px' });

$(this).css('backgroundPosition', 'right bottom');

open = true;

} else {

$('#leftSlideContent').animate({ width: '0px' });

$(this).css('backgroundPosition', 'right top');

open = false;

}

});

author

Honestly, I don’t know. Document flow is top to bottom so doing things like a left/right side slider is difficult.

I gave it a go and couldn’t get it working in Chrome either, but I honestly can’t see any problems in the code. Sorry. 🙁

If you do manage to get it working I’d love it if you could come back & let us know how you solved the problem.

I solve the issue following the code whre i did changes, small change just intiize the width with 1px not with opx, sam echanges in jquery

// left menu slider 
$(function() {
	var open = false;
	$('#leftSlideButton').click(function() {
		if(open === false) {
			$('#leftSlideContent').animate({ width: '250px' });
			$(this).css('backgroundPosition', 'right bottom');
			open = true;
		} else {
			$('#leftSlideContent').animate({ width: '1px' });
			$(this).css('backgroundPosition', 'right top');
			open = false;
		}
	});
});

// left menu slider

$(function() {

var open = false;

$('#leftSlideButton').click(function() {

if(open === false) {

$('#leftSlideContent').animate({ width: '250px' });

$(this).css('backgroundPosition', 'right bottom');

open = true;

} else {

$('#leftSlideContent').animate({ width: '1px' });

$(this).css('backgroundPosition', 'right top');

open = false;

}

});

css

/* left menu slider */
#leftSlideContainer {
	position: fixed;
	right:0;
	text-align: left;
	height: 100%;
	z-index:101;
}
#leftSlideButton {
	background: url(/img/sliderButton.png) top right no-repeat transparent;
	position: absolute;
	left:-45px;
	top: 150px;
	right:100%;
	width:50px;
	height:50px;
	border: none;
	cursor: pointer;
	cursor: hand;
	z-index:101;
}
#leftSlideContent {
	width: 1px;
	height: 100%;
	margin-right: -1px;
	background: #000000;
	filter: alpha(opacity=85);
	opacity: .85;
	color: #CCCCCC;
	font-size: 0.8em;
	border: none;
	font-family: DejaVuSansBook, Sans-Serif;
}
#leftSlideText {
	padding: 15px 5px 25px 25px;
}

/* left menu slider */

#leftSlideContainer {

position: fixed;

right:0;

text-align: left;

height: 100%;

z-index:101;

}

#leftSlideButton {

background: url(/img/sliderButton.png) top right no-repeat transparent;

position: absolute;

left:-45px;

top: 150px;

right:100%;

width:50px;

height:50px;

border: none;

cursor: pointer;

cursor: hand;

z-index:101;

}

#leftSlideContent {

width: 1px;

height: 100%;

margin-right: -1px;

background: #000000;

filter: alpha(opacity=85);

opacity: .85;

color: #CCCCCC;

font-size: 0.8em;

border: none;

font-family: DejaVuSansBook, Sans-Serif;

}

#leftSlideText {

padding: 15px 5px 25px 25px;

}

author

Wow. Odd but effective fix. Thanks for coming back and sharing it. 🙂

Hi Asif
This works great for the left slide
I would love it to work on the rightslide for a site i am working on
I have tried to get it working but to no avail
I need help please!

when i try to float divs inside footerslidecontent it breaks the effect. any idea how to get side by side divs in the slide up footer? Any help will be greatly appreciated!

author

Hi Evan,

You should just be able to float things as you normally would, however you will need to make sure you have cleared the floats inside the bottom of the footer container or things might go a little strange.

If that doesn’t help could you post your code on pastebin.com & maybe a screenshot of what happens on a image host?

I tried clearing and the problem remained. I’m only ok with html and css, and totally new to jquery, so its likely I’m just doing something wrong. Here’s the html, css and a photo of what’s going on:

Here’s the html (sans clears): pastebin.com/a4J625PW

css: pastebin.com/87C9ZY0Z

page loads to this: http://f.imgtmp.com/LOTim.jpg

on click: http://f.imgtmp.com/DJKn7.jpg

Thanks again for looking into this!

author

It’s a one of those strange problems it seems as all looks to be fine from your code. The only thing I can think of is to add overflow: hidden; to the CSS of the footer text container, as it looks as though it isn’t hiding the text behind the element when it closes and that is normally the culprit.

Great Scott it worked! Thank you very much Paul, you’ve been a huge help.

author

Ahhh, good news.

It was a long shot, but glad it worked. 🙂

Hi Paul, this is a great tutorial. Thanks very much for sharing.

author

Hi Sam,

Thanks for reading. Glad you like it. 🙂

Hi Paul,

Thank you for this great tutorial. This works great on computers, but I have recently discovered that it doesn’t on iPad. (not on my website at least)
If you have time to take a look, this will be highly appreciated !

Thanks

author

Hi David,

Unfortunately it is a bug with position: fixed in iOS and Android. As far as I’m aware it is fixed in iOS 5 & Android 4 (Ice Cream Sandwich), you can see support at CanIUse.

You could try something like iScroll, but I’ve heard mixed results from it. Others say detect a mobile browser with CSS media queries and hide your fixed position element, I guess it’s up to you.

Hope that helps.

Thanks for a wonderful script!

The “overflow: hidden” proved to solve my issues as well. 😉
I do have another question: I’m a bit puzzled by the sliderButton-image. It changes by shifting (55?) pixels, but I don’t really see where/when you actually shift it. Could you enlighten me?

I’m trying to create a half-visable footer, which pops out when you click it. Including a changing image like yours (arrows up/down). Should be do-able with your script, I guess…

Awesome!

Paul, thank youuu for this tutorial! It’s working great.

I just have one VERY silly question, maybe you can help me… How in the world do I get my button image to change once its been clicked just like in your example??

Hope you can help me w this! 🙂

author

Hi Mar,

No problem, glad it helped.

That is done by this line:

$(this).css('backgroundPosition', 'bottom left');

1	$(this).css('backgroundPosition', 'bottom left');

And this line:

$(this).css('backgroundPosition', 'top left');

1	$(this).css('backgroundPosition', 'top left');

You need to make a CSS sprite, which is an image with both the open & close images on. Then use the position to change the part of the image shown. So if you create an image double the height of one button but the same width and that has both images on the code here should work for you.

I hope that makes sense. I’ve always found it difficult to explain how that works, lol. Let me know if you have any further questions & I’ll see if I can explain it a little better for you.

Oooh! Think I got it!

Haha, it was perfectly explained

Thanksss 😀

author

Awesome.

No problem. Happy to help out. 🙂

Hi Paul, great footer, I love it. I have a problem though. The footer works great in all browsers apart from firefox and IE9. Not sure what the problem is or where to start. Here is the link – http://www.webfeetdesign.com/attica

Hope this can be solved as love it.

Cheers

Alex

author

Hi Alex,

Glad you like the footer, but sad it doesn’t seem to work in Firefox & IE9. Can you drop me an email via the contact form with some details on what the problems you are seeing in both browser & I’ll do whatever I can to help you out.

@Alex Johnson — I see that you got the footer to work on your website in IE9. I’m having a problem getting my footer to work, in that it seems to appear in the middle of the screen, rather than moving all the content off-screen. Did you make any tweaks?

Thank!

author

Hi Neal,

Do you mean that your footer slides down but the content gets left on the screen? If so that’s usually caused by the overflow not being set to hidden on the main containing element.

If that’s now what you mean could you provide a link or a screenshot so I can take a peek so I can help you out further. Feel free to drop me an email if you’d rather not place a link here in the comments.

Just wanted to say thanks for posting this excellent tutorial, Paul.

It really saved me from pulling my hair out.

author

Hey Kevin,

Not a problem. I’m just glad it’s been helpful to you and so many others. 🙂

I just wanted to say thanks because this help me a ton. I used it as a “More info” at the bottom of each of my sliders.

Just in case anyone else would like to have multiple instances on the same page: change all the html ids to class.

Than change your js to refect these changes and also to handle the multiple instances of the class with “this” and “next”

$(document).ready(function(){

$(function() {
	var open = false;
	$('.aboutSlideButton').click(function() {
		if(open === false) {
			$(this).next().animate({ height: '175px' });
			$(this).css('backgroundPosition', 'bottom left');
			open = true;
		} else {
			$(this).next().animate({ height: '0px' });
			$(this).css('backgroundPosition', 'top left');
			open = false;
		}
	});
});

		 
});

$(document).ready(function(){

$(function() {

var open = false;

$('.aboutSlideButton').click(function() {

if(open === false) {

$(this).next().animate({ height: '175px' });

$(this).css('backgroundPosition', 'bottom left');

open = true;

} else {

$(this).next().animate({ height: '0px' });

$(this).css('backgroundPosition', 'top left');

open = false;

}

});

In the css change the container from fixed to absolute. Hope that was helpful- I just wanted to try to give back bc you help me a ton.

author

Thanks for adding you version of the code Thomas, nice to see the code inspired you. 🙂

Nice one Thomas. Thanks for making it possible to use on multiple elements.
I’ve tried it out… could you perhaps set up an example with a ul li like a ul li horizontal css menu? Can’t get it to work properly.
Otherwise VERY good and VERY simple script which makes sense. Thank you Paul 🙂

author

Hi Martin,

Hopefully Thomas can help you out. Either way thank you & glad it helped. 🙂

Paul:
Quick question. Is there a way to set the button so it’s a rollover instead of a click change state?

Example: I have the button in its normal state as a B&W. When clicked, it changes to its color state to indicate it’s active. The text also changes to say, “Click for more info…”.

I’d like the user to get feedback when they roll over the button. Then, when it’s in its raised state (footer up), the rollover event would change the button back to its B&W state and the text would change to “Click to close panel…”.

If it can’t be done it’s no big deal, but I thought it might add a little bit of extra prompting to the user.

In any case, thanks again for the fine work.

Kevin

author

Hi Kevin,

You probably could yes. I don’t think you’d even need anything as complicated as a hover event if you use some CSS tricks.

This would only work for images however, you’d have to use JS to change text. If you go for the image version you would just place an <a> tag inside the div I used and target that with CSS (instead of the div), you can then use the :hover pseudo selector to change the background image on hover.

Then to change it when opened just have the JS change the class in the <a> tag and have a CSS rule set up for it identical to the previous one, but that displays a different image & hover image.

Does that make sense?

Ummm, that’s a bit over my head, but that’s OK. It works fine as-is. I’m just happy to have this much functionality.

author

Hey Kevin,

I’ll see if I can add a little bit onto the tutorial for you, if you like. I might be able to explain it a little better and show you what I mean. 😉

pop up footer is very nice..
i am have having some problem ..the popup footer woks perfectly but the button is invisible …i cant see it can you tell me why i checked on different browser .their is any solution where i can put the images instead of that and what will be the code …

i hope you will reply some solution.

author

Hi Darpan,

Without seeing the code you have it’s pretty difficult to tell. The most common problem however is that you don’t have an image set in the CSS. If you just copy my code & don’t save the image or swap it for another then the button will be invisible.

Hope that helps. If not and you have a link to allow me to look at the problem but would rather not post it publicly, feel free to email me via the contact me page & I’ll take a peek.

Hi, I have this working fine. However I am trying to get to individual footers to expand when individually pressed. I have one working but the second isn’t working.

Here is the code:

				$(function() {
	var open = false;
	$('#footerSlideButton').click(function() {
		if(open === false) {
			$('#footerSlideContent').animate({ height: '550px' });
			open = true;
		} else {
			$('#footerSlideContent').animate({ height: '8px' });
			open = false;
		}
	});
});



				$(function() {
	var open = false;
$('#footerSlidebutton2').click(function() {
	if(open === false) {
				$('#footerSlideContent2').animate({ height: '550px' });
			open = true;
		} else {
			$('#footerSlideContent2').animate({ height: '8px' });
			open = false;
		}	
});
});

$(function() {

var open = false;

$('#footerSlideButton').click(function() {

if(open === false) {

$('#footerSlideContent').animate({ height: '550px' });

open = true;

} else {

$('#footerSlideContent').animate({ height: '8px' });

open = false;

}

});

$(function() {

var open = false;

$('#footerSlidebutton2').click(function() {

if(open === false) {

$('#footerSlideContent2').animate({ height: '550px' });

open = true;

} else {

$('#footerSlideContent2').animate({ height: '8px' });

open = false;

}

});

Here is the css :

#footerSlideContainer {
	position: fixed;
	bottom:0;
	width: 30%;
}
#footerSlideButton {
	background: url('../images/sliderButtoninvert.png') top left no-repeat transparent;
	position: absolute;
	top: -55px;
	left: 10px;
	width:250px;
	height:50px;
	border: none;
	cursor: pointer;
}
#footerSlideContent {
	width: 100%;
	height: 8px;
	background: #686868;
	color: #CCCCCC;
	font-size: 0.8em;
	border: none;
	font-family: DejaVuSansBook, Sans-Serif;
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
}

#footerSlideContainer2 {
	position: fixed;
	left:80%;
	bottom:0;
	width: 50%;
}
#footerSlideButton2 {
	background: url('../images/sliderButtoninvert.png')	no-repeat transparent;
	position: absolute;
	top: -55px;
	left: 10px;
	width:250px;
	height:50px;
	border: none;
	cursor: pointer;
}
#footerSlideContent2 {
	width: 100%;
	height: 8px;
	background: #686868;
	color: #CCCCCC;
	font-size: 0.8em;
	border: none;
	font-family: DejaVuSansBook, Sans-Serif;
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;

#footerSlideContainer {

position: fixed;

bottom:0;

width: 30%;

}

#footerSlideButton {

background: url('../images/sliderButtoninvert.png') top left no-repeat transparent;

position: absolute;

top: -55px;

left: 10px;

width:250px;

height:50px;

border: none;

cursor: pointer;

}

#footerSlideContent {

width: 100%;

height: 8px;

background: #686868;

color: #CCCCCC;

font-size: 0.8em;

border: none;

font-family: DejaVuSansBook, Sans-Serif;

-webkit-border-top-left-radius:10px;

-webkit-border-top-right-radius:10px;

}

#footerSlideContainer2 {

position: fixed;

left:80%;

bottom:0;

width: 50%;

}

#footerSlideButton2 {

background: url('../images/sliderButtoninvert.png') no-repeat transparent;

position: absolute;

top: -55px;

left: 10px;

width:250px;

height:50px;

border: none;

cursor: pointer;

}

#footerSlideContent2 {

width: 100%;

height: 8px;

background: #686868;

color: #CCCCCC;

font-size: 0.8em;

border: none;

font-family: DejaVuSansBook, Sans-Serif;

-webkit-border-top-left-radius:10px;

-webkit-border-top-right-radius:10px;

Any help would be great.

Thanks
Daniel

author

Hi,

I think that looks pretty much right. You just need to change the open variable on the second one. Maybe to something like open2.

Thanks for the quick reply!

However it is still not working. I can’t seem to think what is wrong.

Here is the link to the full site : http://liquidsynth.hostoi.com/

Thanks again for your help.

Daniel

author

Hi,

Thanks for the link. It looks like a small mistake in capitalization. You have the ID as footerSlideButton2 but the selector in the jQuery is set at footerSlidebutton2. If you capitalize the ‘b’ it should work fine. 😉

Thanks so much it worked! Feel so stupid now it was a little schoolboy error like that! haha 🙂

Thanks again.

Daniel

author

No worries. I’ve made mistakes like that loads of times. Sometimes it just takes fresh eyes to spot it. 😉

Happy to help.

Nice an easy solution! Thank you for this tutorial!

author

No problem. Glad it was helpful. 🙂

Paul:
After putting together the wireframe for the site using your great jQuery pop-up footer, my client asked if there was a way to bypass the slide-up panel and just click on the button to go to a separate link.

I argued that it defeated the whole purpose of the footer in the first place but that’s what they want, so…

…I sat here all afternoon trying as many combinations as I could think of, but I can’t figure out how to use the basic part of your script without the slide-up effect. I need the footer button (in your example, the “?” question mark) to act as a simple http://www.somewebsite.com link.

I’d still like the footer to cover over the main page content when the user reduces the browser height.

Again, I thank you for your great work. I just wish I could leave it the way you designed it, as it is perfect just the way it is. I really appreciate your help.

Kevin

author

Hi Kevin,

Yep, it makes me sad but I’ve had this problem with some clients myself. 🙁

I’m not sure I understand though. Does the client want the entire footer to be always visible? As if it had slid up already? or do they just want the button you’d click to be there, and no footer?

If it’s the latter, you’d just remove the HTML that you don’t need, and remove the javascript event. Then place a <a> inside the #footerSlideButton element then add some CSS like this:

#footerSlideButton a {
	width:50px;
	height:50px;
	display: block;
}

#footerSlideButton a {

width:50px;

height:50px;

display: block;

}

That should give you a clickable link on the button. The only drawback would be if it is a circle, like in my example, the clickable area will probably be square.

If you want the footer to always be visible then all you need to do is remove the Javascript click event and set the #footerSlideContent elements height to the height it would be set at when opened.

I hope that covers what you were looking for. 😉

Yep, that’s the ticket, Paul. They just want the button to click like a plain old fashioned link. No footer panel. In fact, I would have just used a simple <a> if it weren’t for the fact that the “footer over main content” functionality was so critical.

I’m getting too old for this game. I fought the good fight but realized I wasn’t getting anywhere. Client wants/client gets.

Once it’s done I’ll send you the link so you can check it out (if you’re interested).

Again, my sincere thanks.

author

Good good, glad I was able to help out.

Sure drop me it via the contact form or admin[at]return-true[dot]com if you like. 😉

Hi Paul!

Great Tutorial. I put divs in the slide up footer and had a problem. I found a reply where you replied with a solution and then it worked.

I do have one small problem. I want to center the divs in the browser window. You can view the end result of your sweet tutorial on my site http://twozeronine.net/

I put the divs in a wrapper and tried CSS margin: auto 0; but that did no good. Can you suggest a fix when you have spare time to take a look at it?

Thank you for sharing this amazing tutorial!

Anthony

author

Hi Anthony,

I apologise for not getting back to you sooner.

Normally that would work, did you make sure the wrapper was set to be a block level element & that it had a set width? Without those two it won’t center the element using margin auto.

Thank you Paul. No worries about time frame. Great things come to those who wait. 😉

Your advice pointed me in the right direction. I added the CSS below for the Wrapper and it work out great!

#footer-div-wrapper {
width: 988px;
display: block;
margin: auto;
}

#footer-div-wrapper {

width: 988px;

display: block;

margin: auto;

}

Thank you again for the great tutorial and the extra help on my HTML.

Anthony

author

No worries Anthony. 🙂

Awesome, happy you managed to get things working.

Happy to help. 😉

Older Comments

Newer Comments

Follow Me

Categories

Recent Posts

Recent Comments

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