Interstitial Content Box's Help

Over 2000+ free Javascript
at Website
Sampled by

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:

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?

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: ajaxbustcache: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.

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".