Did you ever want to do something like this? An ad showing from the bottom of the screen?
Well, today I’m going to show you how to do it, without the need to spend $47 
Yay!
We are going to do reproduce this by using mootools and some styling. Again, it’s an easy thing to make.
Let’s start by including mootools in our document and writing a little script that will basically do all the job that need to be done. This goes into the <head> of our html file.
<script src="inc/mootools-1.2.1-core.js" type="text/javascript"></script>
<script>
window.addEvent('domready', function() {
slideUp = new Fx.Tween('footerad', { property: 'height', duration: 1000 });
(function(){ slideUp.start(0, 90) }).delay('1000');
$('closead').addEvent('click', function() {
$('footerad').tween('height', 0);
});
});
</script>
Let’s analyse the script:
Now that’s it with the script. All we need to do now is create or DIV element (if you go check out the page at the top of this post you will see they use an IFRAME.. I’m not going to use it).
Now, I think that if you don’t understand how DIV’s work you won’t understand a shit here. Feel free to ask for further explanation in the comments. Oh and I will style the divs directly here, without a css file, so we see how it works.
<div id="footerad" style="display: block; position: fixed; bottom: 0; left: 0; width: 100%; height: 0;">
<div style="position: relative; left: 0; bottom: 0;" id="positioned_relatively">
<div style="background: #002949; border-top: solid 3px #3b8ccb; position: absolute; top: 15px; left: 0; width: 100%; height: 75px; color: white;" id="background_color">
<img src="http://server.zurka.us/images/RSS-Blue.png" style="position: absolute; left: 20px; top: -15px;" id="RSS_icon" />
<div style="margin: 10px 0 5px 105px;" id="text_div">
<div style="font-size: 15px; margin-bottom: 7px; font-family: 'trebuchet ms', arial, sans-serif;">This is a test, the form is not working!</div>
<div style="font-size: 12px;">Name: <input type="text" name="name" style="margin-right: 10px;" /> Email: <input type="text" name="email" style="margin-right: 10px;" /> <input type="submit" value="Subscribe!" /></div>
</div>
</div>
<div style="position: absolute; right: 5px; top: 0; font-size: 11px;" id="close_button">
<a href="#" id="closead">[close]</a>
</div>
</div>
</div>
Now, as I said, I maybe made a complete confusion writing this. If you don’t understand how this works ask and I will help you out. If you don’t care how this works just copy/paste the code and play a bit with the styling. It’s not hard to understand even if you don’t read my messy writing.
What’s different from this is, that they use a wider image on the left and everything seems more centered. You could do the same by positioning the icon further from the left and then giving your text div a bigger margin on the left.
Have a nice day and go drink some beer with the $47 you just saved!
As IE does NOT support the use of the CSS position: fixed; property, I found a workaround that works in all browsers but which I didn’t test with other content on the page. The demo is still using the old code, displaying well in all the browsers except IE. This code will work there as well.
<body style="margin: 0; padding: 0;">
<div style="position: relative; width: 100%; height: 100%;">
<div id="footerad" style="display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0;">
<div style="position: relative; left: 0; bottom: 0;">
<div style="position: absolute; background: #002949; border-top: solid 3px #3b8ccb; top: 15px; left: 0; width: 100%; height: 75px; color: white;">
<img src="http://server.zurka.us/images/RSS-Blue.png" style="position: absolute; left: 20px; top: -15px;" />
<div style="margin: 10px 0 5px 105px;">
<div style="font-size: 15px; margin-bottom: 7px; font-family: 'trebuchet ms', arial, sans-serif;">This is a test, the form is not working!</div>
<div style="font-size: 12px;">Name: <input type="text" name="name" style="margin-right: 10px;" /> Email: <input type="text" name="email" style="margin-right: 10px;" /> <input type="submit" value="Subscribe!" /></div>
</div>
</div>
<div style="position: absolute; right: 5px; top: 0; font-size: 11px;">
<a href="#" id="closead">[close]</a>
</div>
</div>
</div>
</div>
</body>
All that changes is that we create a dummy div with a 100% height and position the ad absolutely on it’s bottom. Should work well with all the content as well, but as I said, I didn’t test it.
However, I suggest you using this with caution and parse it only if the useragent shows up to be an IE. Create two different CSS files and use something like this:
<style type='text/css'>@import 'all.css';</style> <!--[if IE]> <link href='ie_win.css' type='text/css' media='screen'> <![endif]-->
Have swing!
