JavaScripts
Splash Window
Grizzly WebMaster home
 Grizzly WebMaster (HOME) >> JavaScripts >> Splash Window
Some sites want to have a splash screen/window that operates similar to splash screen in normal native applications.  These scripts show a very simple method of implementing such.

Default Page

The "default" page is the page that most users see first when they enter the site.  The default page has a small script that creates the second window that is used for the splash-window.

See this script in action.


<html>

<head>
<title>Splash Window - main document example</title>
<script language="JavaScript">
<!--

function createSplashWindow()
{
    var w, h;
    var x, y;
    var s;

    //  First calculate the size and position for the window
    w = 200;
    h = 150;
    
    //  We need to test if the screen object exists because
    //  older browsers don't support it.
    if ( window.screen )
    {
        x = (screen.width-w)/2;
        y = (screen.height-h)/3;
    }
    else
    {
        x = 100;
        y = 100;
    }
    s = "width=" + w + ",height=" + h + ",left=" + x + ",top=" + y;
    
    //  create the window with just a title bar
    window.open( "splashwindow.htm",
                    "SplashWindow",
                    s + ",resizable=no,scrollbars=no,status=no" );
}

function fetchCookie( sName )
{
    var sValue = "";
    var index = 0;

    //  The "cookie" property on the document is actually a
    //  single string of the form "name=value; name2=value2; ..."
    //  As a result we must search through the cookie string
    //  to find the name=value pair that we are looking for.
    //
    if( document.cookie )
        index = document.cookie.indexOf( sName + "=" );
    else
        index = -1;

    if ( index < 0 )
    {
        sValue = "";
    }
    else
    {
        var nBegin = document.cookie.indexOf( "=", index ) + 1;
        if ( 0 < nBegin )
        {
            var nEnd = document.cookie.indexOf( ";", nBegin );
            if ( nEnd < 0 )
                nEnd = document.cookie.length;
            sValue = document.cookie.substring( nBegin, nEnd );
        }
        else
        {
            sValue = "";
        }
    }
    return sValue;
}

function doSplashWindow()
{   
    //  we use a cookie so the window is only displayed
    //  once per session.  If the visitor closes all of
    //  their open browser windows and then returns to the
    //  site the splash window will show again.
    if ( "" == fetchCookie( "Splash" ) )
        setTimeout( "createSplashWindow()", 0.5*1000 );

    document.cookie = "Splash=yes;";
}

//  Notice that we don't use the 'onload' event to start
//  the splash window.  This is because some documents
//  load lots of images.  We want our splash window to
//  to display 'while' this document is loading.
doSplashWindow();

//-->
</script>
</head>

<body onload="doSplashWindow()">

<p>This is the main document</p>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   </body>

</html>

Splash Page

The splash window page should load fairly quickly with a minimum of complex images.  This is because we want your site visitors to have time to read your splash page while the other page is loading.  Obviously our example is extremely simple.


<html>

<head>
<!--
    You should create the title of this splash window document
    with something that is meaningful for the top of the
    splash window.
-->
<title>Splash Window - example</title>
<script language="JavaScript">
<!--

var bLoaded = false;

function doLoad()
{
    //  first make absolutely sure that our splash window
    //  has focus (is on top).
    window.focus();
    
    //  set a simple time-out that will close the window
    //  automatically.
    //
    //  You could also have code in the default document
    //  'onload' event to close 'this' window.
    setTimeout( "window.close()", 7*1000 );
    
    //  Identify that we have loaded the page.
    bLoaded = true;
}

//
//  We use the 'onblur' event to close the splash window if
//  the splash window is no longer on top.  We could have
//  forced the splash window to remain on top by calling
//  window.focus() in the 'onblur' event.
//
function doBlur()
{
    if ( bLoaded )
        window.close();
}

//-->
</script>
</head>

<!--
    We use the 'onload' event to start the time-out.  This
    is because we want to make sure that the window is fully
    loaded and visible before we begin our time-out sequence.
    
    We call a blur event handling function.  See above.
-->
<body onload="doLoad()" onblur="doBlur()">

<p align="center"><b>This is the splash window</b></p>
<p align="center">It will go away in about<br>seven seconds</p>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          </body>

</html>
Service Provided by Bear Consulting Group Last modified: 25 May 2009
Copyright 2001 Bear Consulting Group