Advanced JavaScript windowing -- part two: Kiosk popups

Web development tides are changing. It's not difficult to imagine kiosk popup windows riding the crest of a new wave of autonomous Web sites-sites with little or no reliance on browsers for navigation or core functionality, such as printing or searching. In effect, standalone Web sites.

Web development tides are changing. It's not difficult to imagine kiosk popup windows riding the crest of a new wave of autonomous Web sites—sites with little or no reliance on browsers for navigation or core functionality, such as printing or searching. In effect, standalone Web sites.

By "kiosk popup" I mean a popup window that is fully functional irrespective of whether the main browser window remains open. In part one of this article we looked at how self-closing popups can improve site usability. In this installment, we'll consider how JavaScript popups can operate independently of a browser's toolbars to enhance user interactivity.

Note: Unless otherwise indicated, the code in this article has been tested and works on 4.x (32-bit) versions of Netscape Communicator and Microsoft Internet Explorer. (IE users may encounter slight graphical display problems.)

As an example of a kiosk-mode Web site, we will focus on a prototype that I developed three years ago for Novell's product documentation. The prototype—codenamed "HyperDoc 1.0" (but affectionately referred to as "GameBoy"; you'll see why below)—was designed to give users greater control in manipulating a Web-based windowed environment. I've revved 1.0 to 1.5 for this article to accommodate both Communicator and IE users, since 1.0 was coded for Netscape Navigator 3.x only.

True, IE 4.x's window

focus()

method is broken—I'm on the record lamenting as much—but it's not absent. Web builders generally have not taken advantage of instances in which the IE 4.x window

focus()

method works. HyperDoc 1.5 illustrates such instances.

To better understand HyperDoc's window control features, follow the mini-test suite below.

1. Launch HyperDoc 1.5!

2. In the Topic Console popup, scroll to "Topic 4" (don't click any links yet).

3. In the HyperDoc Console window (the one with the navigational gadgets at the bottom), click SUPPORT to open the Novell tech support web site in a new window.

4. In the Novell Support Connection window, scroll to the bottom.

(It may seem like I'm dictating a bunch of menial tasks; please be patient, this rainbow has Web developers' proverbial pot 'o gold at its end.)

5. Click in the HyperDoc Console (avoid its navigational buttons) to bring it to the top.

First, let's review the features that work in both IE and Communicator.

6. In the HyperDoc Console, click TOPIC.

This code places the Topic Console on top without reloading the

.htm

file; you can still see "Topic 4" on the screen.

The function to automatically open the Topic Console resides between the

<script>...</script>

tags in the frameset

.htm

file of the HyperDoc Console.

var devi8 = null; function engage1() { devi8 = open('topic.htm', 'TOC', 'resizable, scrollbars, top=0, left=0, height=100, width=320'); } engage1();

The function to focus the Topic Console resides in the

.htm

file of frame

navBar

and accesses the window variable (

devi8

) through the parent (top) frameset.

function reEngage() { if (top.devi8.blur) top.devi8.focus(); }

7. In the Topic Console, click "Topic 4."

When "Topic 4" loads the HyperDoc Console automatically receives focus. This is done by placing

onLoad="window.focus()"

in the

<body>

tag of "Topic 4."

Note: Read procedures 8 through 10 before executing them.

8. In the HyperDoc Console, click MAIN to bring the primary browser window to the top.

9. Close the primary browser window.

10. In the HyperDoc Console, click MAIN to (re)open the primary browser window.

Looks like magic, but it isn't. From this point on, IE and Communicator functionally part company. (IE users will still want to play along, though.) The code invoked by MAIN does a few different things.

var whoAmI = navigator.appName; var bigKahuna = null; function testBigKahuna() { if (top.opener.blur) top.opener.focus(); else { if (bigKahuna != null && bigKahuna.blur && whoAmI == "Netscape") bigKahuna.focus(); else { bigKahuna = open("081398_jswin2.html#kahuna", "MainConsole", "toolbar, status, menubar, directories, location, resizable, scrollbars, height=440, width=640"); } } }

In Communicator, function

testBigKahuna()

first determines whether the

opener

(the primary browser window) is blurred (i.e., open). If so, the

opener

is brought to the top. If not, the function tests whether variable

bigKahuna

has a value (i.e., whether

bigKahuna

is an open window), is blurred, and whether the browser's name is

"Netscape

If these conditions exist, window

bigKahuna

is focused. If these conditions don't exist, a new window (

bigKahuna

) is launched.

In IE, focusing the

opener

works as it does in Communicator. If, however, the

opener

is closed,

testBigKahuna()

bypasses testing whether window

bigKahuna

is open and launches

bigKahuna

. So if

bigKahuna

is already open, it reloads. In IE 4.x, it's not possible for one link to both open or focus the same window.

Note:

testBigKahuna()

doesn't actually reopen the

opener

, instead it opens a new window with the

opener

.htm

file loaded.

11. In the HyperDoc Console, click SUPPORT.

Communicator brings the Novell Support Connection popup to the top without reloading it. IE reloads the window in the background (just as we saw with window

bigKahuna

The code for focusing or opening the support window resides in frame

navBar

var whoAmI = navigator.appName; ... var secondSite = null; function scryer(url) { if (secondSite != null && secondSite.blur && whoAmI == "Netscape") secondSite.focus(); else { secondSite = open(url, "w3Link", "scrollbars, top=20, left=20, height=280, width=620"); } }

Now for the coup de grâce.

12. In the HyperDoc Console, click the close arrow graphic.

Both Communicator and IE close all three open HypderDoc windows. The code for doing this is discussed in part one of this article. Advanced JavaScript windowing -- part one: Self-closing popups For those who need a refresher, the code below—which resides in frame

navBar

—closes the support popup:

function disEngage() { if (secondSite != null && secondSite.open) secondSite.close(); }

This next code—which resides in the HyperDoc Console frameset

.htm

file—closes the Topic Console:

function disEngage() { if (devi8 != null && devi8.open) devi8.close(); }

For those less familiar with the placement of function definitions and invocations (or if I've been too abstruse), here are links to the HyperDoc 1.5 source files that contain JavaScript windowing code:

As JavaScript (and the IE permutation JScript) continues to evolve, developers will discover more resourceful ways to implement robust multi-window Web sites. This two-part article has only scratched the surface of possibilities. Well-architected windowed UIs let users rapidly access information and escape the time-sucking entanglement of convoluted Web design.

Brent Lee Metcalfe is a corporate information architect for Novell Inc. Among other things, he designed and engineered the Web-based documentation user interface for several Novell® products, including Novell BorderManager™, Z.E.N.works™, and forthcoming NetWare® 5.0. Brent has published in c|net's builder.com, and he runs im@go w3 design in his spare time (whatever that is!). He can be pestered here or there. Portions Copyright © 1998 Novell Inc. All rights reserved. Used with permission.