Talking about Javascript.
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
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>
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
while the “real” code should be
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:
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?
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.