jQuery popup footer

by nathanbweb

HTML

<body>
<div id="lookHere">
<h1>Huh?!</h1>
<h2>This page isn't blank. Save some space. <span class="orange">Look</span> to the <span class="green">bottom right</span>.</h2>
</div>
<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>
</body>

CSS

@font-face {
    font-family: 'DejaVuSansBook';
    src: url('DejaVuSans-webfont.eot');
    src: url('DejaVuSans-webfont.eot?#iefix') format('eot'),
         url('DejaVuSans-webfont.woff') format('woff'),
         url('DejaVuSans-webfont.ttf') format('truetype'),
         url('DejaVuSans-webfont.svg#webfontS7fnJSPW') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
	margin:0;
	padding:0;
	background: #EFEFEF;
}
#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;
}
#footerSlideContent h3 {
	font-size: 36px;
	color: #9AC941;
	margin: 10px 0 10px 0;
}
#footerSlideContent ul {
	color: #EE8D40;
	list-style-type: none;
	line-height: 2em;
}
#footerSlideText {
	padding: 15px 10px 25px 25px;
}
#lookHere {
	font-family: DejaVuSansBook, Sans-Serif;
}
#lookHere h1, #lookHere h2 {
	font-size: 20em;
	padding: 0;
	margin: 0;
	color: #AAAAAA;
}
#lookHere h2 {
	font-size: 1.5em;
	margin: 0 0 0 30px;
}
#lookHere span.orange {
	color: #EE8D40;
}
#lookHere span.green {
	color: #9AC941;
}

JavaScript

// via http://return-true.com/2010/04/jquery-pop-up-footer-version-2/

jQuery(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;
			}
		});		
	});