|
Description: A splash page is an
interlude page that is shown temporarily before the intended target page, usually
for the purpose of airing an important announcement or catchy advertisement. Quite a few
popular sites such as PCWorld, News.com, Gamespot etc all use a
controlled Splash Page for the later purpose. Well, with this script,
you can painlessly add a Splash Page to proceed any page on your site,
just by calling an external JavaScript at the top of the target
page. The Splash Page is dynamically rendered using an IFRAME
element that covers the browser window and can contain any external
document. It supports a robust frequency control scheme where you can
limit the Splash Page to display once per browser session, or once
in x number of days, using cookies. An extremely unobtrusive, robust, and easy to set up Splash Page
script this is!
Demo: Should have just seen it (unless you're using an
old browser). Reload to see it again.
Directions
Step 1: Insert the following code into the HEAD
section of your page:
Note the
valid doctype declaration at the very top of the code. Remove if your
page already contains one; otherwise, move it to the very top of your page's
source.
Step 2: Download the below .js file and image, which
are also referenced by the code above, and upload to your site:
-
splashpage.js (Right click, and select
"Save As").
-
 (the two images
used by default for the Splash Page's Header bar)
That's it! Inside splashpage.js,
you'll want to configure a few variables, such as the URL to the page to show as
the splash page, frequency control etc.
Configuration Help
The main settings for this script are done inside
splashpage.js. Open the file using any text
editor, and configure the first few variables:
// Splash Page Script Activation
(1=enabled, 0=completely disabled!)
splashenabled: 1,
//1) URL to file on your server to display as the splashpage
splashpageurl: "http://images.google.com/",
//2) Enable frequency control? (1=yes, 0=no)
enablefrequency: 0,
//3) display freqency: "sessiononly" or "x days" (string value). Only applicable
if 3) above is enabled
displayfrequency: "2 days",
//4) HTML for the header bar portion of the Splash Page
// Make sure to create a link that calls "javascript:splashpage.closeit()")
// An IE bug means you should not right align any image within the bar, but
instead use "position:absolute" and the "right" attribute
defineheader: '<div style="padding: 5px; color: white; font: bold 16px Verdana;
background: black url(blockdefault.gif) center center repeat-x;"><a
style="position:absolute; top: 2px; right: 5px"
href="javascript:splashpage.closeit()" title="Skip to Content"><img
src="skip.gif" border="0" width="114px" height="23px" /></a>Bought to you by
Google Images...</div>',
//5) cookie setting: ["cookie_name", "cookie_path"]
cookiename: ["splashpagecookie", "path=/"],
//6) Auto hide Splash Page after x seconds (Integer value, 0=no)?
autohidetimer: 15,
Here's an explanation of each of these variables:
-
splashpageurl: Full URL to the page you wish to show
as the splash page. While this can either be a page on your server or the
web at large, note that in the later case, it may not always work reliably.
Some sites have scripts on their pages that will throw an error when the
page is contained in an IFRAME, or even break out of the frame
altogether. Also, if you want the links inside the splash page to open in a
new window, for example, you can't do so on external site pages.
-
enablefrequency: Set to 1 to enable frequency
control, 0 to disable it (so splash page shows each time page loads!).
-
displayfrequency: If proceeding variable set to 1,
specify the desired frequency. Valid values are either "sessiononly",
or "x days", such as "5 days".
-
defineheader: The HTML to use for the header bar,
displayed above the IFRAME actually holding the splash page. It should
contain link(s) that enable the visitor to dismiss the splash page, by using
the URL "javascript:splashpage.closeit()".
-
cookiename: Array containing the desired name to use
when setting the JavaScript cookie, plus the cookie path, respectively.
-
autohidetimer: Controls whether to automatically
close the Splash Page after x seconds. Enter 0 for no, or an integer in
seconds, such as 15.
Time to make a splash!
|
Special Document Effects
