Platinum Edition Using HTML 4, XML, and Java 1.2:Manipulating Windows and Frames with JavaScript

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents

Making Use of Window Events

You can use a number of events associated with the window object in your scripts to control what they do and when they do it. The events are listed in Chapter 19. This section gives you an example of how you might use a few of them. Listing 20.5 shows Window4.htm. This HTML document creates another Web browser window, loads another document (Text.htm, which is not listed here but is included on the CD-ROM) into it, and automatically scrolls through the document. Figure 20.4 shows these two windows after they are first created.

• See “window Object Events,” page 464.

FIGURE 20.4 Small child windows are a good way to show additional information related to your Web site.

Listing 20.5 Window4.htm—HTML Documents Can Be Automatically Scrolled

<HTML>
<HEAD>
<TITLE>Window4.htm</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- Hide script from incompatible browsers! -->
var scrollVal = 0
function scrollWindow() {
   scrollVal += 10
   if (scrollVal <= 1500) {
      self.MyWindow.scroll(0,scrollVal)
      document.MyForm.ScrollY.value = scrollVal
  setTimeout("scrollWindow()",100)
   }
}
//   Hide script from incompatible browsers! -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF onLoad="setTimeout(‘scrollWindow()’,5000)">
<CENTER>
<H1>Window Example #4</H1>
<HR>
<TABLE BORDER>
<FORM NAME="MyForm">
<TR><TD><B>Y Dimension Scroll Value:</B></TD>
    <TD><INPUT TYPE="TEXT" NAME="ScrollY" SIZE=4></TD></TR>
</FORM>
</TABLE>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
</ADDRESS>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- Hide script from incompatible browsers! -->
MyWindow = window.open("Text.htm","MyWindow",
   "toolbar=no,location=no,directories=no,status=no," +
   "menubar=no,scrollbars=yes,resizable=no," +
   "width=300,height=200")
document.MyForm.ScrollY.value = scrollVal
//   Hide script from incompatible browsers! -->
</SCRIPT>
</BODY>
</HTML>

This example uses one window event and three methods to accomplish its purpose. First, the window.open() method is used to create the new window and to load the second HTML document into it. When the window is fully loaded, as indicated by the window object’s onLoad event—included as an attribute in its <BODY> tag—the setTimeout() method is used to set up a call to the scrollWindow() JavaScript after five seconds (5,000 milliseconds) have passed. At the end of this time, scrollWindow() is called, which, in turn, uses the window.scroll() method to automatically scroll the second window. The JavaScript also uses setTimeout() to set up another call to itself. This repeats until the document in the second window is scrolled all the way through. Additionally, the HTML form text field in the main document is used to display the current scroll value (see Figure 20.5).

FIGURE 20.5 Use the setTimeout() method to create timed effects in your HTML documents.

CAUTION:
The x- and y-dimension scroll value passed to the window.scroll() method is in pixels, so it is very difficult to know how many pixels are needed to scroll through a given document. This is particularly true when the scrolled document is primarily text, which can be sized differently in different Web browsers. It is best to use this method when the document being viewed is primarily graphics, making it easier to scroll accurately.

Window Methods for Getting User Input

You can use three window object methods to solicit input from your users. You can use JavaScript to create windows and display custom-made forms to get any kind of input from your user that you would like. The three built-in methods, on the other hand, give you quick, easy ways to get input. These methods are

• alert()

• confirm()

• prompt()

Notification Using the Alert Method

Listing 20.6 shows an example of using the window.alert() method. This method is used to notify your user of something, and can only be responded to by clicking OK. Figure 20.6 shows an example of the alert using this method.

Listing 20.6 Alert.htm—Use This Method to Inform Your User of Important Information

<HTML>
<HEAD>
<TITLE>Alert.htm</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<H1>Alert Method Example</H1>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
</ADDRESS>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- Hide script from incompatible browsers! -->
window.alert("The alert method of the window object is used to " +
   "notify you of some condition; it does not present you with " +
   "any choice other than to click OK.")
//   Hide script from incompatible browsers! -->
</SCRIPT>
</BODY>
</HTML>

FIGURE 20.6 Alert boxes are not used for user input so much as to tell the user something and to make sure the user gets that information.

Using the confirm Method to Get a Yes or No

Listing 20.7 shows an example of using the window.confirm() method. This method is used to solicit a yes or no from your user. It returns a Boolean true or false to indicate what the user selected. This value can then be used by a JavaScript to decide what to display or what to do based on the user input (see Figure 20.7).

Listing 20.7 Confirm.htm—A Confirmation Box Gives the User a Yes or No Decision

<HTML>
<HEAD>
<TITLE>Confirm.htm</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<H1>Confirm Method Example</H1>
<HR>
<FORM NAME="MyForm">
Result of <U>confirm</U> method: <INPUT TYPE=TEXT NAME="MyText">
</FORM>
<HR>
</CENTER>
<ADDRESS>
Jim O’Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
</ADDRESS>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- Hide script from incompatible browsers! -->
res = window.confirm("The confirm method of the window " +
   "object is similar to the alert method in that it is " +
   "used to notify you of some condition; unlike the alert " +
   "method it presents you with a choice to either click " +
   "OK or Cancel, and returns true or false, respectively.")
document.MyForm.MyText.value = res
//   Hide script from incompatible browsers! -->
</SCRIPT>
</BODY>
</HTML>

FIGURE 20.7 You can use the window.confirm() method to create a “gateway” condition to your site. Users must agree to this condition before they can access your site.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.