New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE7+ Opr9+

Splash Page script

Author: Dynamic Drive

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 Developer's View

Step 1: Insert the following code into the HEAD section of your page:

Select All

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:

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

  2. enablefrequency: Set to 1 to enable frequency control, 0 to disable it (so splash page shows each time page loads!).

  3. displayfrequency: If proceeding variable set to 1, specify the desired frequency. Valid values are either "sessiononly", or "x days", such as "5 days".

  4. 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()".

  5. cookiename: Array containing the desired name to use when setting the JavaScript cookie, plus the cookie path, respectively.

  6. 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!