///Transition Popups

Transition Popups

Transition Popups

Do you have a slow-loading page, one where folks might leave before loading is done?

Something that might encourage folks to wait around for your page to load is to provide a transition popup with an explanation. The popup might say “Large image, but worth the wait” or “Retrieving data from remote site” or whatever is applicable. The demonstration (URL below) simply uses the word “Loading” with an animated image of three dots.

The transition popup is launched by the slow loading page when it first begins loading. And the popup closes automatically once the page has completed loading.

The demonstration page is at http://willmaster.com/a/13/pl.pl?art137

In the source code of the slow loading page, in the HEAD area, put these three lines:


<script type=”text/javascript” language=”JavaScript”><!–

MyPopup = window.open(‘pop.html’,”,’height=100,width=300′);

// –></script>

The height and width of the popup may be adjusted as necessary.

In the <body… tag, insert this attribute:


onLoad=”MyPopup.close();”

The JavaScript in the HEAD area runs as soon as the page begins loading, before any of the body content loads. The onLoad=”…” JavaScript in the <body… tag runs as soon as the page has completed loading. Thus, the first launches the popup and the latter closes it.

The entire page might look something like this:


<html>

<head>

<script type=”text/javascript” language=”JavaScript”><!–

MyPopup = window.open(‘pop.html’,”,’height=100,width=300′);

// –></script>

</head>

<body onLoad=”MyPopup.close();”>

YOUR PAGE BODY CONTENT HERE

</body>

</html>

Of course, you need content for the popup to display.

The popup content page is simply another web page. If you name the file containing the popup content anything other than pop.html, then change the ‘pop.html’ URL in the JavaScript to reflect the URL of the different file name.

In the <body… tag of the popup, insert this attribute:


onLoad=”self.focus();”

With the above attribute, the popup will appear above all other windows at the moment it completes loading.

Another attribute you may consider putting into the <body… tag is


onBlur=”self.focus();”

The above attribute keeps the popup as the top window. This could be annoying to your visitor if s/he wants to do other chores while your page is loading; the popup could prevent other program windows from coming to the fore. Thus, if you use the above attribute, a “close window” button or link should be provided for closing the popup even before your other page has completed loading. Here are the button and link methods.

The button method for closing the popup:


<form>

<input type=”button”

value=”Close Window”

onClick=”self.close()”>

</form>

The link method for closing the popup:


<a href=”javascript:self:close()”>Close Window</a>

The source code of your popup might look something like this:


<html>

<body onLoad=”self.focus();” onBlur=”self.focus();”>

<font size=”7″>L O A D I N G . . .</font>

<form>

<input type=”button”

value=”Close Window”

onClick=”self.close()”>

</form>

</body>

</html>

You can see a live implementation at the WillMaster Possibilities archive URL: http://willmaster.com/possibilities/archives/

The demo page links to two demonstrations, (i) a page with a large, slow loading image and (ii) a page that could take some time to load all of its text. The URL is http://willmaster.com/a/13/pl.pl?art137

2010-05-26T16:59:28+00:00 June 28th, 2004|JavaScript|0 Comments

About the Author:

Leave A Comment