Please Wait...
page 1 of 1
Published: 17 Dec 2003
Unedited - Community Contributed
Abstract
Add a splash screen to your process-intensive pages; now updated for Netscape 6 and 7!
by Peter Brunone
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 44047/ 44

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.



User Comments

Title: alibabu37@ohtmail.com   
Name: alibabu37@ohtmail.com
Date: 2/13/2012 6:57:22 AM
Comment:
asp alliance yes office windows xp officials yahoo offers msn messengrs offline pakistna hose whats f.103.block N sc.19.blknnnaz ok yes my
Title: Webmaster Forum   
Name: wc
Date: 8/1/2009 10:35:37 AM
Comment:
Great piece of code. Simple but works really well. Thanks.
Title: nice   
Name: nice
Date: 12/30/2007 12:12:12 AM
Comment:
nice
Title: Easiest way to display Please Wait Screen   
Name: dng
Date: 6/1/2007 1:29:59 PM
Comment:
Hi,

Good work, you will find more easier method to display Splash Screen http://dotnetguts.blogspot.com/2007/02/please-wait-screen-for-heavy-loading_12.html

Dotnetguts (DNG)
http://dotnetguts.blogspot.com
Title: Mozilla has document.all?   
Name: Peter Brunone
Date: 12/14/2006 9:17:22 PM
Comment:
Hi Venkat,

I thought only Internet Explorer had document.all in its object model.

Joni,
I'm afraid I don't know much about Cold Fusion; maybe some google searching will help.
Title: hi Mr. Peter   
Name: joni
Date: 11/12/2006 9:19:56 PM
Comment:
dear Mr.peter

would you like to send me software about coldfusion ?
i know i am to proud to apply about it but i believe you will replay my mail, thanx

from joni pranch
Title: Found Very Useful   
Name: Mahesh S
Date: 6/20/2006 6:16:48 AM
Comment:
Thanks Peter indeed a very nice article
Title: ASP.NET?   
Name: Tomas
Date: 5/30/2006 3:14:20 AM
Comment:
Does anybody know how to use something like this in ASP.NET?

Any reply will be wellcome: tomas1978@gmail.com
Title: It is simply Great.   
Name: Venkat
Date: 3/8/2006 3:11:49 AM
Comment:
First of all Thanks to the Author.

The code did work perfectly, but with some minor modifications according to my need.I used the following code to initialize the splash variable...

if ( netscape )
{
var splash = document.getElementById('splashScreen');
}
else if ( internetexplerer || other )//other means mozilla
{
var splash = document.all("splashScreen");
}

and I used the following code to hide the div.

splash.style.visibility = "hidden";

The above line worked for all the Browsers( didn't use IE4 or NS4)...

Any way great work.
Title: ASPX   
Name: Anoop
Date: 2/13/2006 4:51:28 AM
Comment:
I'm using ASP.Net and can't get this to work. It is not liking <% Response.Buffer = True %>. Any Ideas?
Title: Good stuff   
Name: Brian
Date: 12/20/2005 9:56:31 PM
Comment:
This works great. Thank You
Title: Wait   
Name: siddhu
Date: 7/12/2005 2:56:03 AM
Comment:
Very useful
Title: Script-less Splash Screen   
Name: Rick
Date: 6/21/2005 11:59:27 AM
Comment:
Hey, I've written a class file in VBScript that uses CSS positioning to generate a processing splash screen without using any client-side script or images. It's very customizable just by using the properties and methods it comes with. Very quick and easy to use, imo. Peter B, if you'd like to host that on this site I'm more than willing to email you a copy. I hate surfing the net for example code and never finding what I'm looking for. So I figure I should give back to the "community". vendric@gmail.com if you'd like a copy of what I've come up with. It's commented with details of how to use it, and certainly it can be customized further. I just made it generic and flexible. Though I only spent a couple of hours on it so I'm sure it's not 100% perfect in the minds of most people. It is executing without errors though :P
Title: Great Article   
Name: J
Date: 6/15/2005 1:13:01 PM
Comment:
This was just what I was looking for. This should stop people from freaking out when the processing of the page takes sometime. Thanks!
Title: Errors?   
Name: Peter B
Date: 6/13/2005 9:27:28 PM
Comment:
I don't know what server-side error handling code you're talking about, since there isn't any in the example above. What kind of error are you seeing? I doubt it has anything to do with this code, but if you can show me otherwise, I'll take a look.
Title: Cant catch problem properly   
Name: Mel
Date: 6/13/2005 6:19:26 PM
Comment:
This code is good but when there is an error on the ASP server side code after flushing out the processing image to the browser, the error is not catch by the server side error handling routine you have.
Title: THnx   
Name: Roy Heaney
Date: 6/2/2005 5:36:28 AM
Comment:
thnx just what i needed 4 my datadex.
Title: Useful function   
Name: Ann
Date: 5/10/2005 5:33:47 AM
Comment:
very nice and functional.
Thanx.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2014 ASPAlliance.com  |  Page Processed at 11/24/2014 5:28:52 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search