|
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:
- Randomly based on the desired probability (ie: 1/2, 1/10, 1/100 chance
etc), or
- Once per browser session. A session ends when the browser is closed and
reopened, or
- 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:
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,
//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:
-
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: 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.
-
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.
-
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!
|
Dynamic Content 
