|
Need a top-notch web developer? Hire ME!
|
a Splash Screen for Websites
(now updated for Netscape 6 and 7!)
Maybe you have a page with delicate scripting and you don't want users to touch anything until it
finishes loading, or perhaps your form is processing and you need to make sure they don't panic and run before it finishes.
Either way, a splash screen with an "In Progress" indicator would help to calm the frightened users and make life easier for
your tech support staff.
Here, then, we have a succinct little bundle of code that will do just that. To begin, you'll need to add
a line to the top of the page in question. The line is this (ASP VBScript):
Response.Buffer = True
This instructs the server not to send anything back to the client until (a) the page is finished
processing or (b) you use Response.Flush to send it everything so far. Incidentally, this will usually help your
page speed as well, since the server doesn't have to switch back and forth between executing the page and sending pieces
of it to the browser.
Here -- preferably between the <HEAD> and </HEAD> tags -- we build the JavaScript that
decides which of the two major browsers is calling the page, and henceforth which Document Object Model (DOM) to use.
Since the script is performing client-side operations, I have chosen to use client-side detection. See my previous article,
Is It Human? for more information on server-side
browser detection.
<SCRIPT LANGUAGE="JavaScript">
// This script is intended for use with a minimum of Netscape 4 or IE 4.
// First we detect the browser type
if(document.getElementById) { // IE 5 and up, NS 6 and up
var upLevel = true;
}
else if(document.layers) { // Netscape 4
var ns4 = true;
}
else if(document.all) { // IE 4
var ie4 = true;
}
function showObject(obj) {
if (ns4) {
obj.visibility = "show";
}
else if (ie4 || upLevel) {
obj.style.visibility = "visible";
}
}
function hideObject(obj) {
if (ns4) {
obj.visibility = "hide";
}
if (ie4 || upLevel) {
obj.style.visibility = "hidden";
}
}
</SCRIPT>
Next, we have to build the DHTML that will become our splash screen, just like the ones desktop programmers
get to use. For convenience, we'll assign the style attributes inline, but you could of course do this with a style sheet
within the HTML <HEAD> element.
<DIV ID="splashScreen" STYLE="position:absolute;z-index:5;top:30%;left:35%;">
<TABLE BGCOLOR="#000000" BORDER=1 BORDERCOLOR="#000000"
CELLPADDING=0 CELLSPACING=0 HEIGHT=200 WIDTH=300>
<TR>
<TD WIDTH="100%" HEIGHT="100%" BGCOLOR="#CCCCCC" ALIGN="CENTER" VALIGN="MIDDLE">
<BR><BR>
<FONT FACE="Helvetica,Verdana,Arial" SIZE=3 COLOR="#000066">
<B>Page Loading. Please wait...</B></FONT> <BR>
<IMG SRC="wait.gif" BORDER=1 WIDTH=75 HEIGHT=15><BR><BR>
</TD>
</TR>
</TABLE>
</DIV>
Style it any way you want; just make sure that the ID attribute is the same name that our client-side
JavaScript uses to address the element later on. Just for the record, our splash screen looks like this:
Page Loading. Please wait...
|
At this point you'll want to send the splash screen to the client while the rest of the page is processed.
For this reason it is advisable to put the splashScreen DIV as close to the beginning of the <BODY>
as possible, in order to send it out quickly without waiting for the rest of the page. To do this, we send the following ASP
command:
Response.Flush
Now comes all the processing and grinding that keeps the user waiting.
When we come to the end of the page -- just before the closing </BODY> tag --
we send all the code out with another
Response.Flush
...and then add the final JavaScript that turns off the splash screen. You could trigger the hideObject function
with an onLoad() event handler in the <BODY> tag instead, but you would still need to build the object references
after the splashScreen DIV appears in the code, or the browser would complain that your DIV doesn't exist yet.
<SCRIPT LANGUAGE="JavaScript">
if(upLevel) {
var splash = document.getElementById("splashScreen");
}
else if(ns4) {
var splash = document.splashScreen;
}
else if(ie4) {
var splash = document.all.splashScreen;
}
hideObject(splash);
</SCRIPT>
You can download a sample file with all the necessary code here,
including the sample progress bar image.
peterbrunone@aspalliance.com
|
