Advanced JavaScript windowing -- part one: Self-closing popups

This two-part article demystifies multi-window UI design, and includes cut-and-paste JavaScript code of practical windowed UIs that can run in both Netscape Communicator and Microsoft Internet Explorer.

A multi-window user interface benefits end-users by conserving desktop real estate, differentiating between navigation and destination, accommodating tangential data without losing focus on primary data, and so on. This is well-worn territory for application developers. Although beneficial, developing a multi-window UI for the Web is not a trivial task. This two-part article demystifies multi-window UI design, and includes cut-and-paste JavaScript code of practical windowed UIs that can run in both Netscape Communicator and Microsoft Internet Explorer.

Note: The code in this article has been tested and works on 4.x (32-bit) versions of Communicator and Internet Explorer.

Multi-window UIs are increasingly common on the Web. Some are designed well, many are not. Adult sites, for instance, are notorious for trying to entice (if not severely confuse) potential customers by launching a barrage of popup windows when users attempt to leave—an obnoxious ploy reminiscent of the old JavaScript window bomb that would proliferate popups on the unwitting user's desktop until either the browser or OS failed. In part one of this article we will look at the utility of popups for enhancing site accessibility and user experience.

Let's cut to the chase. The cardinal rule of windowed Web design: Subwindows should not require more user intervention than if users had remained in the primary browser window. For example, JavaScript scripted windows often force users to exit manually by clicking a close button or using the operating system's close method. This isn't necessary, nor even desirable in many instances.

Self-closing popups can help ease the burden of site navigation. Here are some recommended implementations.

Closing with onBlur

Place

onBlur="window.close()"

in the

<body>

tag of the popup. This code simulates the behavior of a Windows Help popup. Users can still drag the popup by its title bar, maximize (but not minimize) the popup window, resize the popup (if it's resizable) and use the popup's scrollbars. But when users click anywhere else on the desktop—including the popup viewing area—the popup window automatically closes. This is an efficient way to present tangential data, such as glossary definitions or explanatory information.

Click example 1!

Closing with setTimeout()

To automatically close a popup after a specified duration, use

setTimeout()

. Placing

onLoad="setTimeout('window.close()','4500')"

in a popup's

<body>

tag will automatically close the popup after 4,500 milliseconds (4.5 seconds). This popup type is useful for information that users need only briefly peruse, such as a site greeting or introduction.

Click example 2!

You can also use

setTimeout()

with other JavaScript methods or event handlers. In this example, when users click the dummy Submit button the window will close 5,000 milliseconds (5 seconds) after onClick fires.

Click example 3!

Closing with onUnload

To close a popup when the primary window file (the opener) unloads, use a JavaScript function call in the

<body>

tag of the opener. This remedies the pervasive design flaw of site builders not cleaning up after themselves—the site's @#!*%$ popups are still lurking around when users leave. More than just a user inconvenience, many popups have relevance for a specific page within a site and should be closed when that page is exited.

I wrote the code in this next example for eMirage [ designer imitations ], a retail site specializing in generic versions of name-brand products. Here, when users leave a product-specific page any open popups launched from that page automatically close.

Click example 4, then click your browser Reload button!

This code is both unique and temperamental.

Function Definition:

var faux = null; function copyCat(url,w,h) { faux = open(url + ".htm", "popUp", "resizable, top=40, left=40, width=" + w + ",height=" + h); } function flush() { if (faux != null && faux.open) faux.close(); }

Since

flush()

can query the value of

faux

before it has (or no longer has) a value, ensure that you set the global variable

faux

null

. Suppose a user didn't open the popup, or had opened then manually closed the popup, this code effectively queries such a status (error-free) when the user leaves the page.

Seasoned JavaScript scripters will notice a coding anomaly in

flush()

—an as-yet-undocumented (I'd gladly be corrected on that point) window

open

property. Odd as it may seem, if you don't include this ghost property, you risk generating an error message when users unload the opener, especially if users have opened then manually closed the popup.

Function Invocation:

onUnload="flush()"

As noted above, place the function call in the

<body>

tag of the opener.

Don't confuse the code in the above example with the

dependent

feature in the JavaScript 1.2 window

open()

method. This Netscape-specific feature creates a parent/child relationship between a new window and the opener window object—not the opener file as in our onUnload example.

Adding

dependent

to the litany of window features in the

open()

method lets Netscape Communicator close a child window when the parent window closes. But keep in mind that in JavaScript frames are window objects too. So depending on your site design,

dependent

can create different user experiences. Suppose you launch a new window from a file in a non-frames site, the new window would remain open until the primary browser that launched it closes—no matter how many other sites were subsequently visited. If on the other hand you launch a new window from a file in a frameset, the new window would remain open until the frameset—not necessarily the frame opener file since any number of files can open in a given frame—unloads. It seems that to accommodate the functionality in our onUnload example a new feature for the window

open()

method should be created. "Co-dependent" has a nice ring.

Note that you can also automatically close a child window when a dependent

alert()

confirm()

message closes.

Closing with conditional statements

Code conditional statements that will close the popup when certain conditions exist. Consider a transitional popup I developed for Novell's Web-compatible documentation. The popup—which provides links to various Novell Web sites—opens a third window. Note the code in the popup .htm file that closes the Novell Web Links popup:

var whoAmI = navigator.appName; function findMe(url) { var overHere = open(url, "w3Links", "scrollbars, resizable, top=40, left=40, height=340, width=640"); if (overHere != null) window.close(); if (whoAmI == "Netscape" && overHere != null) overHere.focus(); }

This code queries whether variable

overHere

(the tertiary window) has a value (i.e., whether window

overHere

is open). If so, the transitional popup closes.

Click example 5!

Function

findMe()

also includes code for controlling the tertiary window's focus—but it's not without its cross-browser quirks. This type of code shifts control of window functionality from the browser to the developer. With that convenient segue, our next installment will focus (no pun intended) on designing ultra-customized windowed UIs for the Web, Go to Part Two: Kiosk Popups.

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 been 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.