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

March 3, 2010 • Javascript by Emanuele Feronato • 19 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

1
2
3
4
5

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

You can custom the stylesheet as you want as long as you set display:none to the ad and position:fixed and bottom:0 to the container.

Have fun… would you like more options?

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (14 votes, average: 4.36 out of 5)
Loading ... Loading ...
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 19 comments

  1. Me

    on March 4, 2010 at 8:51 pm

    Wow, and I was just wondering how to do something like that yesterday, awesome :)

  2. niraj

    on March 5, 2010 at 11:30 am

    where do i PM you !

  3. tiggsy

    on March 6, 2010 at 2:11 pm

    Fantastic! I knew it couldn’t be that hard…

    One thing. Is it possible to delay the scrollup for, say, 10 seconds?

  4. Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version : Emanuele Feronato - italian geek and PROgrammer

    on March 10, 2010 at 7:35 pm

    [...] Some days ago I showed you how to create a dynamic content animated footer ad for your site in just 9 jQuery lines. [...]

  5. WP Footer « WPautotools

    on March 11, 2010 at 2:45 am

    [...] Create a dynamic content animated footer ad for your site in just … [...]

  6. Erik

    on March 13, 2010 at 6:26 am

    BUENO!!! Love it.. Many thanks.

  7. The Ultimate Guide To JavaScript in Web Design | AddyOsmani.com | Where Web Businesses Grow

    on March 21, 2010 at 6:02 am

    [...] How to create a dynamic animated footer ad for your site [...]

  8. The Ultimate Guide To JavaScript in Web Design | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!

    on March 22, 2010 at 2:00 am

    [...] How to create a dynamic animated footer ad for your site [...]

  9. Matt

    on March 23, 2010 at 3:57 pm

    SO COOL! Is there functionality in there to set a delay? Like instead of popping up immediately, how would you make it load after about 3 seconds?

  10. Luigi

    on April 7, 2010 at 11:22 am

    Your example doesn’t work on IE6 ?

  11. coffee substitute

    on May 4, 2010 at 10:21 pm

    How would I code it so that it only shows once per visit per user? thanks!

  12. Brollo

    on July 21, 2010 at 7:13 am

    Thanks. Had been looking for this script for ages. Works perfectly.
    One Question, how can I replace the php echo with a image which with a hyperlink to a another webpage.

  13. marcin

    on August 16, 2010 at 5:41 pm

    hi

    works like a treat :-)

    how to remove that dot before close though???

  14. Nate

    on October 1, 2010 at 1:16 am

    Nothing works in IE6

  15. Brando

    on November 10, 2010 at 1:35 am

    Can i also put this on a html website? I Tried to implement the code but it opened one of my google ads.

    thanks

  16. Chris

    on March 20, 2011 at 8:55 am

    Couldn’t get it to work on my test page until I specified a doctype for my page –

    Just in case anyone else is having issues implementing…

  17. Chris

    on March 20, 2011 at 8:55 am

    “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”

  18. sylvaint

    on October 25, 2011 at 7:39 pm

    Would be nice to be able to have it above flash. Need to use iframes for that.

  19. narendra

    on December 2, 2011 at 1:52 pm

    wow, but this is not support to .swf file

< >