Pane Help in MSN Hotmail

By Rick Schlamp

Emerging from Microsoft is one of the newest areas of Help design. This form of Help, called "Pane Help," is being used with Microsoft Web-based applications. Pane Help makes extensive use of JavaScript code to displays topics in a separate Help window that is tiled with the original browser window. This makes it easy for users to read the instructions while they work with an application.

The most prominent of these applications is Hotmail, which has a user base estimated at 40 to 50 million. With so many users, it’s reasonable to expect that Hotmail is accessed via many different browsers on many different operating platforms. Due to the varying implementations of JavaScript on different browsers and the varying navigation options on different platforms, the developers faced some challenges and compromises in achieving this goal.

In this article, we’ll first illustrate the way Hotmail displays its Help pane and main window on selected browsers. Next, we’ll examine the JavaScript code within Hotmail that delivers this look on various browsers, platforms, and display resolutions. Our goal is to show you some JavaScript techniques that you may wish to emulate for determining your visitor’s browsing environment and modifying your site’s window sizes and positions.

How It Looks

When it came to designing the Hotmail Help, developers zeroed in on the most popular browsers (Internet Explorer and Netscape Communicator/Navigator), the platforms on which these run (Windows, Macintosh, and UNIX), and the most popular Internet service provider (AOL).

After logging in to Hotmail and clicking Inbox on the left end of the Hotmail toolbar, most platforms using the latest browsers display a main window similar to the following figure, as seen in IE 5 on Windows 95:

After clicking Help on the right end of the Hotmail toolbar, Hotmail creates a narrow Help pane immediately to the right of a resized Hotmail main window, as displayed in the next figure:

Hotmail uses Active Server Pages (ASP) to set the initial content for the Help pane and to perform any fine-tuning to the window sizes and positions. Notice that the Help pane has no link to dismiss itself when you are finished with it. You close the Help pane as you would any other window on your platform (for example, by clicking x in the upper right corner in Windows). The main window remains in a maximized state, but in a smaller, partial-screen size.

You’d get a similar arrangement of main window and Help pane on version 4 or later IE browsers, version 4.x Netscape PC browsers, or using Navigator 4.6 on the Mac. (The Hotmail Help version discussed here was developed prior to the Netscape 6 release.) But for version 3 browsers, AOL 4 on a PC, or IE 4.5 on the Mac you’re presented with a much different display similar to the following upon clicking Help:

Here the Help pane is not located adjacent to a resized main window, but on the left side of the screen partially covering the main window. Version 3 browsers do not support the properties in JavaScript 1.2 necessary to perform window manipulations. The JavaScript 1.2 code in Hotmail allows more sophisticated window positioning for some AOL browsers; however, it is not apparent from the code whether all versions of AOL, or just version 5 or later, support the precise setting of window sizes and positions. Also, Hotmail’s JavaScript code offers no clue as to the contrast in Help pane location between IE and Navigator on the Mac.

How It Works

Hotmail uses three files containing the JavaScript code necessary to perform the various window manipulations: HOTMAIL INBOX.HTM, HELPGLOBAL.JS, and HELPPANE.JS.

The main window file, HOTMAIL INBOX.HTM, initializes the variables that determine the user’s platform through the ASP in the following code:

var agent_isIE = true;
var agent_isNS = 0;
var agent_isMac = 0;
var agent_isAOL = 0;

The values shown above were set on a Windows platform displaying Hotmail in IE5.

If you are not using Active Server Pages, an alternative is to use a "sniffer" script to help you assign values to these variables. Sniffer scripts determine the current user’s platform as well as browser type and version for activating code sequences tailored to a particular environment. An excellent sniffer is available from Mozilla's web site (www.mozilla.org/docs/web-developer/sniffer/browser_type.html).

The second file, HELPGLOBAL.JS, sets the variable bscreen based on the platform, browser type, and browser version from the variables set above in the following:

if (((agent_isNS) || (agent_isIE) || (agent_isMac)) &&
   (navigator.appVersion.indexOf("4.")>=0))
    bScreen = true;
else
    bScreen = false;

Here, bscreen is true for version 4 or later Navigator or IE browsers, or on the Mac. We’ll see below that this variable determines whether or not the sophisticated window manipulations are done.

The third file, HELPPANE.JS, does all of the work. The JavaScript function DoHelp() has the code to set the size of the Help pane, open it, and resize the main Hotmail window. Lets look at each of these operations separately.

Setting the Help Pane Size

First, for older browsers, the DoHelp() function sets default values for the Help pane width (help_w=230 pixels) and height (help_h=460 pixels), as well as the value for the remainder of the screen width not taken up by the Help pane (help_l=640-help_w), which is based on a generic 640 pixel-width screen.

//set defaults for Help window size
// (for browsers that don't access the screen object)
    help_w=230;help_h=460;help_l=640-help_w;help_t=0;

Then for the newer browsers, the function determines the Help pane width. For Mac users the WIDTH variable is set to a value dependent upon whether or not they’re running AOL. For Windows or UNIX users, WIDTH is set based on the screen resolution through the property screen.width (there is an associated property screen.height, which will be used later on).

if(bScreen == true)
{
    if (agent_isMac==true)
    {
        if(agent_isAOL==true)
        {
            WIDTH = 248
        }
        else
        {
            WIDTH = 255
        }
    }
    else
    {
        if(screen.width <= 800)
        {
            WIDTH = 180
            //alert(WIDTH)
        }
        else
        {
            WIDTH = 230
        }
    }

Opening the Help Pane

Once the default Help pane sizes are set for the latest browsers, the DoHelp() function sets Help pane size variables based on the user’s environment, and then sets parameters (including pane position and navigation aid switches) to be passed to the function that opens the pane.

    help_w = WIDTH;
    help_h = screen.availHeight;
    help_l = screen.availWidth - WIDTH;
    w_dressing ="toolbar=0,status=0,menubar=0,width="+help_w+",
                 left="height="+help_h+",+help_l+",
                 top="+help_t+",resizable=1"
}

For the older browsers, the function sets all but the left and top window parameters letting the browser determine the Help pane location (usually near the upper-left corner of the screen).

else
{
    w_dressing ="toolbar=0,status=0,menubar=0,width="+help_w+",
                 height="+help_h+",,,resizable=1"
}

Finally, the Help pane (named h_win) is launched using the JavaScript window.open method with the document displayed in the pane set by the myURL variable.

myURL =H_URL_BASE+"/helpwindow.asp"+Topic_URL+"&BrandID="
      +H_BRAND+"&Filter="+H_FILTER

//check for bScreen (4+ browser) since IE3 and Nav3 puke on close
if(bScreen == true & agent_isIE == true & h_win != null
   & agent_isMac ==false)
{
    h_win.close()
}    
//open the help window with URL and dressing and named _help
h_win=window.open(myURL,"_help", w_dressing);

Resizing the Main Hotmail Window

Once the Help pane is open, the main window is resized to fill the rest of the screen width for version 4 or later browsers. To resize the main window it is necessary to account for the various "navigation bars" inherent in the different platforms. These navigation bars include the taskbar in Windows, the start bar on the Mac, and an additional toolbar for AOL users.

First, for the Mac users, a variable representing a factor to offset the top of the window based on the start bar (mac_heightoffset) is set. Next, room is allowed for the toolbar for the AOL users (aoltoolbar). Finally, the height and width of the Mac start bar (startbarH and startbarW, respectively) are set based on total screen dimensions less the "available" screen dimensions, which take into account operating system task bars. For the Windows and UNIX AOL users, a different AOL tool bar size is set.

if (bScreen == true)
{
    if (agent_isMac==true)
    {
        mac_heightoffset = 1.7
        if (agent_isAOL==true)
        {    
            aoltoolbar = 70
        }
        else
        {
            aoltoolbar=0
        }
        startbarH = (screen.height-screen.availHeight)
        startbarW = (screen.width-screen.availWidth)
    }
    else
    {
        mac_heightoffset = 0
        if (agent_isAOL==true)
        {
            aoltoolbar=105
        }
        else
        {
            aoltoolbar=0
        }
        startbarH = 0
        startbarW = 0

Resizing to a specific size is done by the window.resizeTo method, but differently for Navigator vs. IE browsers. For Navigator users, all of the navigation bar dimensions and window borders are included in the Netscape window.outer_ extensions; the window.inner_ quantities exclude the navigation bars and borders in the dimensions. For IE users, the navigation bar quantities calculated above are needed.

The top-left corner of the window is then moved to the upper-left corner of the screen (allowing for any navigation bars) using the window.moveTo method.

    }
    startbarH=startbarH
    startbarW=startbarW
    if(agent_isNS==true)
    {
    
    top.window.resizeTo(screen.availWidth - WIDTH -
       (window.outerWidth - window.innerWidth),
        screen.availHeight - (window.outerHeight-window.innerHeight))
    }
    else
    {
    
    top.window.resizeTo(screen.availWidth - WIDTH - startbarW*4, 
        screen.availHeight - startbarH-aoltoolbar)
    }
    top.window.moveTo(0,(startbarH * mac_heightoffset)+aoltoolbar)
}

Summary

Web applications, like most traditional desktop applications, can suffer from Help windows being placed in inconvenient locations—often covering the portion of the interface on which the user is working. Microsoft has attempted to fix this annoying behavior in its popular Web-based application, Hotmail.

With Hotmail Help, Microsoft has made a strong case for its "Pane Help" design. From a user’s point of view, it puts timely assistance information in its own pane directly adjacent to the Web application’s main interface window for optimal usability. From a developer’s point of view, it uses relatively straightforward JavaScript code to maintain a consistent look for its target audience.

Considering all of the possible combinations of platforms, browser types/versions, screen resolutions, etc., Hotmail Help has tried to satisfy the greatest number of users. We noted some inconsistent display on the Mac and with AOL4, and the somewhat annoying trait of leaving a reduced-size main window upon closing the Help. Nonetheless, Microsoft has done a commendable job in this groundbreaking effort.

Demo

We've provided a demo program, hotmail_demo, that you can try in any browser on any platform. We've also provided a ZIP file containing all of the files used in the demo. The demo roughly simulates the behavior of opening the Hotmail Help pane. Click the "Open Help pane" link to display the Help pane, and (depending on your browser and platform) resize and redisplay the main window. We've added a second link to close the Help pane and maximize the main window. A third link closes all demo windows.

Rick Schlamp is a technical writer and editor in the Seattle area.