Splash Page script
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. 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://www.cssdrive.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!