Recipe 2.10 Example Design: Setting Up a Dynamic Splash Page

Best suited for entertainment-related and personal web sites, a splash page is a web page typically comprising only an eye-catching image that is designed to entice visitors to enter a web site. Sometimes, however, that additional HTML page actually acts as a barrier to the content of the site. This example design remedies that problem.

The splash page in this example uses HTML elements from the existing main page of the web site. No separate HTML file is involved, so it appears as though there are two pages when there is only one. And with cookie detection built into the script, after a visitor sees the splash page once he won't see it again for at least another month (unless he deletes the cookie or tells his browser not to accept cookies).

Another benefit of the code in this section is that if the visitor's user agent doesn't handle JavaScript or JavaScript has been turned off manually, the visitor sees the default page design instead. He won't get trapped viewing only the splash page design, thereby locking him out from seeing your premium content on the main page.

Main Page

The first step is to create the design for the main page of your web site. Figure 2-24 shows an example. The code for mainPage.css is shown in Example 2-1.

Example 2-1. mainPage.css

body {
 margin: 0;
 background-color: white;
 padding-left: 0;
 padding-top: 0;
}
#logo {
 padding: 5% 20% 0.5em 5%;
 position: static;
 margin: 0;
}
#header h1 {
 margin: 0;
 padding: 0 0 0 5%;
 border-bottom: 1px solid black;
 font-family: Arial, Verdana, Helvetica, sans-serif;
}
#header h2 {
 margin: 0;
 padding: 0.5em 5% 0.5em 5%;
 font-size: 1em;
 text-align: right;
 border-bottom: 1px solid black;
 background-color: #ccc;
 font-family: Arial, Verdana, Helvetica, sans-serif;
}
#header {
 display: block;
}
#content {
 margin: 0 5% 10% 5%;
 font-size: 1.1em;
 line-height: 1.6em;
 display: block;
}
#footer {
 border-top: 1px black solid;
 padding: 1em;
 text-align: center;
 display: block;
}

Figure 2-24. The main page design

Having the default style sheet in place tells you which elements need to be addressed in the splash screen style sheet. Because you will be switching between the splash page and the main page style sheets, any selectors and their respective properties that appear in both must have their own respective values. Otherwise, a padding-left value of 50% for the body element dictated by the splash screen style sheet will carry over to the main page style sheet, moving all the content of the main page into the right half of the viewport.

The Splash Screen

The next step is to create a splash screen based on the marked-up content of the main page. To simplify things, you can copy the main page and link a new, blank splashPage.css style sheet. Then design a splash page based on the existing contents of the real page. In the example shown in Figure 2-25, the logo was carried over from the main page to the splash page and the rest of the page's content was hidden. The splashPage.css code, as shown in Example 2-2, creates this effect.

Example 2-2. splashPage.css

body {
 padding-left: 50%;
 padding-top: 15%;
}
#logo {
 margin-left: -73px;
}
#header, #content, #footer {
 display: none;
}

Figure 2-25. The splash page

Next, link these two separate style sheets to the main page HTML file. Use the link element to associate the default style sheet, mainPage.css, and then the style sheet that defines the design of the splash page, splashPage.css:

<link rel="stylesheet" type="text/css"  media="all" 
href="mainPage.css" /> 
<link rel="alternate stylesheet" type="text/css"  media="all" 
href="splashPage.css" title="splash" />

Switcher JavaScript

Now, add the alternative style sheet switcher JavaScript to your web page through the src attribute:

<script type="text/javascript" language="JavaScript" 
src="switcher.js"></script>

Example 2-3 shows the actual style sheet switcher code used in the switcher.js, which comes from Paul Swoden's Alternative Style Sheet Switcher at http://www.alistapart.com/stories/alternate/. How it works is beyond the scope of this book, but for more information on JavaScript, see JavaScript: The Definitive Guide (O'Reilly).

Example 2-3. switcher.js

function setActiveStyleSheet(title) {
 var i, a, main;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
   a.disabled = true;
   if(a.getAttribute("title") == title) a.disabled = false;
  }
 }
}

function getActiveStyleSheet( ) {
 var i, a;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.
disabled) return a.getAttribute("title");
 }
 return null;
}

function getPreferredStyleSheet( ) {
 var i, a;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
  if(a.getAttribute("rel").indexOf("style") != -1
    && a.getAttribute("rel").indexOf("alt") == -1
    && a.getAttribute("title")
    ) return a.getAttribute("title");
 }
 return null;
}

function createCookie(name,value,days) {
 if (days) {
  var date = new Date( );
  date.setTime(date.getTime( )+(days*24*60*60*1000));
  var expires = "; expires="+date.toGMTString( );
 }
 else expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for(var i=0;i < ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==' ') c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
}

window.onload = function(e) {
 var cookie = readCookie("style");
 var title = cookie ? cookie : getPreferredStyleSheet( );
 setActiveStyleSheet(title);
}

window.onunload = function(e) {
 var title = getActiveStyleSheet( );
 createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet( );
setActiveStyleSheet(title);

Add an additional piece of JavaScript, as shown in Example 2-4, that loads the splash design over the default style.

Example 2-4. toggleSplash( )

<script type="text/javascript"  language="JavaScript">
 function toggleSplash( ) {
 if (readCookie("splashCookie") == null) { 
  setActiveStyleSheet('splash');
  createCookie("splashCookie", "noSplash", 31);
  timer=setTimeout("setActiveStyleSheet('default')",7000);    
  }
}
</script>

To initiate the splash page when the visitor loads the web page, place an event trigger in the body element:

<body onload="toggleSplash( );">

Compatibility

This splash screen works in Internet Explorer 5.5+ for Windows, Mozilla, Netscape 6+, and Internet Explorer 5 for Macintosh. The cookie detection method doesn't work in Safari, causing visitors to view the splash page each time the page is loaded.

Another way to approach splash page design is to include more elements from the main page. If you want to change the splash page design for your company web site—so that it shows a holiday message, for example—you can easily use heading elements that contain the name of the company and the tagline and then color them in orange and black text. Because the splash page design is in a separate style sheet, it's easy to modify and upload at any time.