Note: Updated to v1.1 on Nov 27th 06'. Added option to hide document scrollbars when interstitial box is shown, plus auto hide box after x seconds.

Description: An interstitial is a container that appears over an entire webpage intermittently to display content in an eye catching way. A common example is an interstitial ad, though advertising is certainly just one of many handy uses of an interstitial.

This is a Interstitial Box script that uses Ajax to fetch and display the contents of external pages on your server as an interstitial. As the content is being shown front and center on the page, a partially opaque "veil" appears behind it that covers the actual webpage, ensuring all eyes is on the interstitial. A robust frequency control system lets you control how often the interstitial box should appear so it doesn't become intrusive. Whether you're displaying an ad or an announcement, you can be sure people will notice it thanks to the Interstitial Box!

Frequency control is an important part of a good interstitial script. This script supports three ways to control how often it should appear to the visitor:

1. Randomly based on the desired probability (ie: 1/2, 1/10, 1/100 chance etc), or
2. Once per browser session. A session ends when the browser is closed and reopened, or
3. Once per x days using persistent cookies.

Stellar!

Demo:  You should have seen it when entering page. Reload page to see it again (picks randomly from two external pages).

---

Directions:

Simply insert the below code into the HEAD section of your page:

Select All
<link rel="stylesheet" type="text/css" href="interstitial.css" /> <script type="text/javascript" src="interstitial.js"> /*********************************************** * Interstitial Content Box- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script>

The code above references two external files plus two images, which you need to download below (right click/ select "Save As"):

1. interstitial.css (controls the dimensions and style/ colors of the interstitial box)
2. interstitial.js (controls the external files to load, frequency settings etc)
3. closeit.gif (default "close" image that appears in the header bar of the interstitial box)
4. blackdot.gif (optional image to give the "veil" that covers the entire page that silky, screen door look)

In order to test out this script immediately, the external file(s) to display in the script must be defined (or an Ajax error will occur). Download the below two sample external pages used in the demo for testing purposes:

• samplecontent.htm (right click, and select "Save As")
• samplecontent2.htm

By default, all of the above files should be uploaded to the same directory as where your webpage is in.

Well that's it for installation! Read on for instructions on configuration.

Configuration Help

The main settings for this script are done inside interstitial.js. Open the file using any text editor, and configure the first 5 variables:

var interstitialBox={
//1) list of files on server to randomly pick from and display
displayfiles: ['samplecontent.htm', 'samplecontent2.htm'],

 //2) display freqency: ["frequency_type", "frequency_value"]
displayfrequency: ["chance", "3"],

//3) HTML for the header bar portion of the interstitial box
defineheader: '<div class="headerbar"><a href="#" onClick="javascript:interstitialBox.closeit(); return false"><img src="closeit.gif" style="border: 0" title="Close Box"/></a></div>',

//4) cookie setting: ["cookie_name", "cookie_path"]
cookiesetting:["stitialcookie", "path=/"],

//5) bust caching of pages fetched via Ajax?
ajaxbustcache:true,

//6) Disable browser scrollbars while interstitial is shown (Only applicable in IE7/Firefox/Opera8+. IE6 will just auto scroll page to top)?
disablescrollbars: true,

//7) Auto hide Interstitial Box after x seconds (0 for no)?
autohidetimer: 0,

Here's an explanation of each of these variables:

1. Syntax: ["samplecontent"] OR ["samplecontent", "samplecontent2", "etc"] The file(s) on your server to fetch and display inside the interstitial box. If more than one is specified, the script will randomly pick one to display.

2. The display frequency of the interstitial box. Three types of frequency are supported- probability, once per browser session, and once every x days.

   1. Probability Syntax: ["chance", "3"] This setting causes the box to be shown randomly based on a probability of 1/x. The "3" in this case means there's a 1/3 chance the box is shown each time the page loads. "1" would mean 100% of the time. Change it to any desired integer.

   2. Once per browser session Syntax: ["cookie", "session"] This setting causes the box to pop up once per browser session. A new session begins when the visitor has closed his browser and relaunches it.

   3. Once every x days Syntax: ["cookie", "5"] This setting causes the box to pop up once every "x" days, where "5" in this case would mean once every 5 days.

3. The HTML that make up the title bar of the interstitial box interface. You can customize it as desired.

4. Syntax: ["stitialcookie", "path=/"] If the display frequency is set to "once per browser session" or "x days" above, both of which relies on cookies, you can fine tune the cookie settings here. The first value is the arbitrary cookie name to use, and the later, the path of the cookie.

5. Syntax: true/false Configures whether the script should stop potential caching of the fetched external page when it is displayed more than once to the same viewer. Setting it to "true" for example (bust cache) could be helpful if your external page contains an advertisement, and you wish each request on the ad to be unique instead of potentially cached.

6. Syntax: true/false Specifies whether the document's scrollbars should be disabled while the Interstitial is being shown. This ensures that the user's focus is automatically set on the interstitial (instead of in some cases having to scroll the document). Note that this feature is only functional in IE7+, Firefox 1.x+, and Opera 8+. In IE6 and below, a CSS bug means it is opted out of this feature.

7. Syntax: An integer (0 or above). Sets whether the Interstitial Box should automatically disappear after x seconds (0 disables it). Any integer value greater than 0 sets this feature in motion, so 4 for example would cause the box to auto close after 4 seconds.

Having configured these variables, you'll now want to move on to interstitial.css to fine tune the look/style of the interstitial box. Most notably, customize the width of the box so it can adequately contain the external page(s) to show.

External page limitations and the iframe tag

An inherent limitation of Ajax means that any external pages to be shown must be from the same domain as the script. You could, however, specify an iframe as the contents of an external page to display an external site that way. This is illustrated in "samplecontent2.htm".

Enjoy!