DHTML Tutorial 5: Working with Windows and Frames

Enhancing a Web Site with Interactive Windows

Additional Topics

• Creating a Scrolling Status Bar
• Scrolling the Browser Window
• Passing Information to and from a Modal Window
• Showing Help Windows

Creating a Scrolling Status Bar

For an interesting effect, you can add a scrolling message to your browser's status bar. To create this effect, the message must be prefaced with a long set of blank spaces. The number of blank spaces is then reduced every few milliseconds, giving the illusion that the message is moving to the left. You can also add blank spaces to create the illusion that the message is moving to the right. The code to do this appears as follows:

var message="DHTML Tutorial 5 Notes";
var start=100;
var position=100;
var scrollID;

function addSpaces(count) {
    space="";
    for (i=0; i < count; i++) {space +=" ";}
    return space;
}

function showStatus() {
    if (position < -message.length) position=start;
    position--;
    if (position < 0) {
        window.status=message.substring(-position);
    } else {
        window.status=addSpaces(position)+message;
    }
}

function scrollStatus() {
    scrollID=setInterval("showStatus()", 10);
}


In this example, the global message variable contains the text of the status bar message. The start variable contains the maximum number of blank spaces to add to the beginning of the status bar message. The position variable stores the current number of blank spaces added to the beginning of the message (this value will decrease as the message moves to the left.) The scrollID message stores the ID number of the scrollStatus() function as it is repeatedly run every 10 milliseconds.

The addSpaces() function simply generates a blank text string that is count spaces long. The showStatus() function determines the location of the status bar message. If the current location is less than the length of -message.length, the message has completed scrolled off the status bar and the message is moved back to the starting position. The value of the position variable is then decremented by one. If the position is less than zero, the start of the message is truncated; otherwise the message is displayed prefaced with position blank spaces.

To see this effect in action, click the Scroll Status Bar button below. To restore your status bar, click the Clear Status Bar button.

   

Scrolling the Browser Window

To scroll the browser window, you can use any of the following methods:

Scroll Methods

Method	Description	IE	Netscape
scroll(x, y)	Sets the scrolled position of the document in the browser window.	3.0	4.0
scrollBy(dx, dy)	Scrolls the document in the browser window by dx pixels to the right, and dy pixels down.	4.0	4.0
scrollTo(x, y)	Scrolls the document to the coordinate (x, y).	4.0

The following script has been added to this page to scroll the page upward a few spaces:

function scrollPage() {
    TimeID=setInterval("window.scrollBy(0,-10)",10);
    setTimeout("clearInterval("+TimeID+")",4500);
}


To see this in action, click the Scroll Page Up button below.

Passing Information to and from a Modal Window

When you create a modal (or modeless) window, you will often need to pass information between the browser window and the modal window. To send information to a modal window, use the JavaScript command:

ReturnValue=showModalDialog(url,"Argument", "Features");

where ReturnValue is the value that is returned from the modal window, Arguments is a text string that contains the arguments or values sent to the modal window, and Features is a text string controlling the appearance of the modal window.

Within the HTML markup for the modal window, the value of the Arguments text string is stored in the property:

window.dialogArguments;

The value of the ReturnValue variable will be stored in the property:

window.returnValue;

To see this in action, enter a value in the first input box below, and click the Submit button. The value you entered will appear in the modal window (Internet Explorer only.)

Showing Help Windows

If you are running Internet Explorer on Windows 95 or higher, you can open a Windows HTML Help file window using the window.showHelp() method. The syntax is:

window.showHelp("helpfile")

To see this in action, click the Help button below.

Note that this technique may not work on some Web servers that do not support Windows Help files.

This will not work with Netscape Navigator.