A container that appears over an entire webpage intermittently to display content.

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.

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

<link rel="stylesheet" type="text/css" href="interstitial.css" />

<script type="text/javascript" src="interstitial.js"> </script>

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:
How to use:
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.
3. 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.
4. 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.
5. 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.
6. The HTML that make up the title bar of the interstitial box interface. You can customize it as desired.
7. 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.
8. 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.
9. 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.
10. 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.

Demo: http://www.dynamicdrive.com/dynamicindex17/interstitial.htm Right after loading the page

Download: interstitial.css interstitial.js

Source: http://www.dynamicdrive.com/dynamicindex17/interstitial.htm

Related Listings:

1. Dynamic Cookie Crumbs This bit of JavaScript allows you to place a breadcrumb...
2. DatePicker v4 Ajax Script My 3rd and final attempt writing a datePicker (calendar) that...
3. Content with Style Possibility of breaking down stylesheets into components that could be...
4. Deferred content loading When rolled into the page life cycle of an ASP.NET...
5. Deferred Content Loading Script When rolled into the page life cycle of an ASP.NET...

Do you like this post?

Email: