Comments on: [CSS/Javascript] How do I create full page overlay ad that covers the page when user first enter (similar to news.com)?

Question: [CSS/Javascript] How do I create full page overlay ad that covers the page when user first enter (similar to news.com)?

parttimeninja — Tue, 22 Jan 2008 09:08:55 -0800

How do I create full page overlay ad that covers the page when user first enter (similar to news.com)?

By: MarkLark

MarkLark — Tue, 22 Jan 2008 10:01:04 -0800

There are a few different options for you on this page. Quite a few 'full page overlays', I'm sure one will fit the bill.

By: MarkLark

MarkLark — Tue, 22 Jan 2008 10:01:48 -0800

BTW those are all ajax applications, but shouldn't be too difficult to implement.

By: ook

ook — Tue, 22 Jan 2008 11:11:36 -0800

If you don't want to get into digging through somebody else's ajax code to pull out only the parts you need, the simplest way to do this is the following. (I'm not worrying too much here about compatibility with old browsers, coping with users who have javascript disabled, etc; none of this is tested; this is just to give you a rough idea of the process.)

1) As the first thing in your HTML, include a hidden div which contains your ad positioned where you want it:

<div id="hugeAnnoyingAdvertisement" style="z-index:999; position:absolute; width:100%;height:100%; display:none">your ad here</div>

Everything in the style attribute will position the ad; adjust to taste. You use display:none so it won't appear by default for everyone.

2) In your body onLoad, call a javascript function which will make that div visible:

function showTheHugeAnnoyingAdvertisement() {
     var theAd = document.getElementById('hugeAnnoyingAdvertisement');
     theAd.style.display='block';
}

3) Make sure that somewhere inside that ad div is a link which allows the user to hide it again (by calling a function which is basically the same as the above, except that it it will set the display back to 'none'.)

At this point you have an ad which will appear every time the page loads. This will get old real fast; what you probably want is to only show it if it hasn't been seen before (or if it hasn't been seen within a set amount of time.) To track this, you'll want to set a cookie after displaying the ad -- and test for the presence of that cookie before displaying it: if there's a cookie, that means the user has already seen it, so don't display it. So change that function to something like

function showTheHugeAnnoyingAdvertisement() {
  if (document.cookie.indexOf('hasAlreadySeenTheAd') == -1) {
        var theAd = document.getElementById('hugeAnnoyingAdvertisement');
        theAd.style.display='block';
        document.cookie="hasAlreadySeenTheAd;path=/";
   }
}

To make the ad recur periodically add an expiration date when writing the cookie.

By: ook

ook — Tue, 22 Jan 2008 11:17:11 -0800

(I want to reiterate that I took many shortcuts in the above sample code; you probably don't want to just copy and paste this into a production site.

You may want to look into one of the code libraries such as Prototype.js, which simplifies a lot of tasks and makes it easier to write cross-compatible code -- I'm to the point now where I feel crippled when I'm not using it :)

By: parttimeninja

parttimeninja — Tue, 22 Jan 2008 11:33:05 -0800

Thank you ook! This will gives me a good start.

MarkLark, thanks for the link. That is a great site.