The code above references two external files plus two
images, which you need to download below (right click/ select "Save
As"):
- interstitial.css
(controls the dimensions and style/ colors of the interstitial box)
- interstitial.js
(controls the external files to load, frequency settings etc)
- closeit.gif
(default "close" image that appears in the header bar of the
interstitial box)
- 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?
ajaxbustcache:true,
Here's an explanation of each of these variables:
-
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.
-
The display frequency of the interstitial box. Three types
of frequency are supported- probability, once per browser session, and
once every x days.
-
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.
-
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.
-
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.
-
The HTML that make up the title bar of the interstitial
box interface. You can customize it as desired.
-
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.
-
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".