Create a sticky ad on your website

Let's get a bit technical today. I'll teach you how to add a sticky advert (or call for an action) on your website :

Step 1 : A bit of avascript

Test if the cookie is there :

function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}

If the cookie is there, do nothing. If it is not there, set the cookie :

function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}

and initialize the ad

Step 2 : Initialize the ad
We will not use a popup here. We just use a div (#sponsorAdDiv {position:absolute; height:1; width:1px; top:0; left:0;}).

function initAd(){

if(!ns && !ie && !w3) return;
if(ie) adDiv=eval('document.all.sponsorAdDiv.style');
else if(ns) adDiv=eval('document.layers["sponsorAdDiv"]');
else if(w3) adDiv=eval('document.getElementById("sponsorAdDiv").style');
randAd=Math.ceil(Math.random()*chanceAd);
if (ie||w3)
adDiv.visibility="visible";
else
adDiv.visibility ="show";
if(randAd==1) showAd();
}

the function showAd makes the frame sticky ..

Step 3 : Display the ad

function showAd(){
if(adCount<adTime*10){adCount+=1;
if (ie){documentWidth =truebody().offsetWidth/2+truebody().scrollLeft-20;
documentHeight =truebody().offsetHeight/2+truebody().scrollTop-20;}
else if (ns){documentWidth=window.innerWidth/2+window.pageXOffset-20;
documentHeight=window.innerHeight/2+window.pageYOffset-20;}
else if (w3){documentWidth=self.innerWidth/2+window.pageXOffset-20;
documentHeight=self.innerHeight/2+window.pageYOffset-20;}
adDiv.left=documentWidth-200+calunit;adDiv.top =documentHeight-200+calunit;
setTimeout("showAd()",100);}else closeAd();
}

..make sure to add the closeAd function to your js file too, otherwise people could get upset if they to wait till the timer times out!

function closeAd(){
if (ie||w3)
adDiv.display="none";
else
adDiv.visibility ="hide";
}

Step 4 : Add the code to your html page

<div id="sponsorAdDiv" style="visibility:hidden">
<table width="450px" height="350px" bgcolor="#000000"><tr><td>
<table width="445px" height="345px" bgcolor="#FFFFFF"><tr><td align="center" valign="middle">
<center>
<img src='http://www.mywebsite.com/images/img1.jpg' alt="Join our newsletter"><br/>
<form name=mailer id=mailer method=post action='mailto:my@website.com?subject=send_info' ENCTYPE='text/plain'><input type=hidden value=submit name=submit>
<input type='image' src='http://www.mywebsite.com/images/bton1.jpg' id=subscribe value='Subscribe'>
</form>
<input type="button" value="Close" onclick=closeAd();>
</center>
</td></tr></table></td></tr></table>
</div>

Thst's it! Don't hesitate to post comments if you have any questions ...

You can see a live example Here

Enjoy!