Create a dynamic content animated footer ad for your site in just 9 jQuery lines

March 3, 2010 by Emanuele Feronato
Filed under Javascript | 12 Comments

Have you ever seen those ads sliding up from the bottom of your page when you are visiting a website? We are going to create a simple one in just 9 jQuery lines.

Moreover, with this script you will need to add just one line to your site to display the ad.

Just to make it easier to understand, I am showing you for free the principles some “companies” sell at more than $40. According to such sites, ads like the one we are about to make should increase your conversions, have more readers sign up to your newsletter, and make you live in harmony. All in one-

Unfortunately, I am only showing you how to create such ad in a bunch of jQuery lines.

This is what we are going to make: Watch the example.

Ready for the recipe? Here we go:

A web page

Obviously, you need a webpage. Any webpage will fit, as long as you include

<div id="triqui_ad"></div>

just before the </body> tag.

jQuery

Then it’s time to add the power of jQuery to the page: insert this script between <head> and </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$.ajaxSetup({cache:false});
	$('#triqui_ad').wrap('<div id="triqui_container"></div>');
	$('#triqui_ad').load('ajax.php',function(){
		$('#triqui_ad').css('display','block');
		$('#triqui_container').hide().slideDown('slow');
		$('#triqui_ad').append(' &bull; <a id="triqui_ad_close">Close</a> ');
		$('#triqui_ad_close').click(function(){ 
   			$('#triqui_container').slideUp('slow'); 
  		}); 
	}); 
});
</script>

Line 1: loading the latest jQuery version. I am loading it directly from Google to get the latest stable version with no stress for my server.

Line 3: Function to be executed when the document DOM is fully loaded.

Line 4: Disabling the cache when using Ajax calls. That’s why when you reload the page in the example, you always get the current timestamp

Line 5: I had to add this line because I wanted the final user to type in as less code as possible, so at the moment you just have to add

<div id="triqui_ad"></div>

while the “real” code should be

<div id = "triqui_container"><div id="triqui_ad"></div></div>

Using wrap you will (guess what?) wrap an HTML structure around the selected element.

Line 6: This is the most important line. I am loading the result of the Ajax call made on the ajax.php file. This means I am printing inside the div everything ajax.php will echo. In my case, it will print the current date since this is the code:

<?php
 
echo "Hello, I am a dynamic content created on ".date('l jS \of F Y h:i:s A');
 
?>

As you can imagine, load loads data from the server and place the returned HTML into the matched element. The only issue is it caches the result, that’s why I disabled it at line 4

Line 7: Here I am showing the content of the div containing the ad. When you’ll look at the css, you’ll find there was a display:none to keep it hidden until the script is ready to work.

Line 8: Time to slide in the ad

Line 9: Appending a link to close the ad

Line 10: Triggering the link used to close the ad

Line 11: Sliding away the ad when the user clicks on the link

CSS

And finally it’s time to stylize the ad.

#triqui_container {
	width: 100%;
	position: fixed;
	bottom: 0;
}
 
#triqui_ad{
	background-color:#e5e5e5;
	border-top:1px solid black;
	height: 100px;
	text-align:center;
	display:none;
}
 
#triqui_ad_close {
	cursor: pointer;
	text-decoration: underline;
}