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

January 22, 2008 9:08 AM

How do I create full page overlay ad that covers the page when user first enter (similar to news.com)?
posted by parttimeninja to Computers & Internet (5 answers total)

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.
posted by MarkLark at 10:01 AM on January 22, 2008

BTW those are all ajax applications, but shouldn't be too difficult to implement.
posted by MarkLark at 10:01 AM on January 22, 2008

Best answer: 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.
posted by ook at 11:11 AM on January 22, 2008 [1 favorite]

Best answer: (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 :)
posted by ook at 11:17 AM on January 22, 2008

Response by poster: Thank you ook! This will gives me a good start.

MarkLark, thanks for the link. That is a great site.
posted by parttimeninja at 11:33 AM on January 22, 2008