285Chapter 16 .Window and Frame Objects the strings via string concatenation. For example, if a function uses event handling to find the element that a user clicked (to initiate some animation sequence), that element s ID, referenced by a variable, can be passed to the function invoked by setInterval(): function findAndCycle() { var elemID // statements here that examine the event info // and extract the ID of the clicked element, // assigning that ID to the elemID variable intervalID = setInterval( cycleAnimation( + elemID + ) , 500) } If you need to pass ever-changing parameters with each invocation of the function from setInterval(), look instead to using setTimeout()at the end of a function to invoke that very same function again. On the CD-ROM Example (with Listings 16-36 and 16-37) on the CD-ROM Related Items: window.clearInterval(), window.setTimeout() methods. setTimeout( expr , msecDelay [, language]) setTimeout(functionRef, msecDelay [, funcarg1, …, funcargn]) Returns: ID value for use with window.clearTimeout() method. NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . The name of this method may be misleading, especially if you have done other kinds of programming involving timeouts. In JavaScript, a timeout is an amount of time (in milliseconds) before a stated expression evaluates. A timeout is not a wait or script delay, but rather a way to tell JavaScript to hold off executing a statement or function for a desired amount of time. Other statements following the one containing setTimeout()execute immediately. Say that you have a Web page designed to enable users to interact with a variety of buttons or fields within a time limit (this is a Web page running at a free-standing kiosk). You can turn on the timeout of the window so that if no interaction occurs with specific buttons or fields lower in the document after, say, two minutes (120,000 milliseconds), the window reverts to the top of the document or to a help screen. To tell the window to switch off the timeout after a user does navigate within the allotted time, you need to have any button that the user interacts with call the other side of a setTimeout() method the clearTimeout() method to cancel the current timer. (The clearTimeout() method is explained earlier in this windowObject.setTimeout() Please visit Domain Name Hosting services for high quality webhost to host and run your jsp applications.
284 Part III . Document Objects Reference that appear in other frames or as layers, perhaps changing the view every ten seconds. Clock displays and countdown timers would also be suitable usage of this method (even though you see examples in this book that use the old-fashioned setTimeout() way to perform timer and clock functions). In contrast, setTimeout() is best suited for those times when you need to carry out a function or expression one time in the future even if that future is only a second or two away. See the discussion of the setTimeout()method later in this chapter for details on this application. While the primary functionality of the setInterval()method is the same in both NN and IE, each browser offers some extra possibilities depending on the way you use parameters to the method. For simple invocations of this method, the same parameters work in all browsers that support the method. First, I address the parameters that all browsers have in common. The first parameter of the setInterval()method is the name of the function or expression to run after the interval elapses. This item must be a quoted string. If the parameter is a function, no function arguments are allowed inside the function s parentheses unless the arguments are literal strings (but see the section Passing Function Parameters ). The second parameter of this method is the number of milliseconds (1,000 per second) that JavaScript should use as the interval between invocations of the func tion or expression. Even though the measure is in extremely small units, don t rely on 100 percent accuracy of the intervals. Various other internal processing delays may throw off the timing just a bit. Just as with setTimeout(), setInterval() returns an integer value that is the ID for the interval process. That ID value lets you turn off the process with the clearInterval() method. That method takes the ID value as its sole parameter. This mechanism allows for the setting of multiple interval processes running, while giving your scripts the power to stop individual processes at any time without interrupting the others. IE4+ uses the optional third parameter to specify the scripting language of the statement or function being invoked in the first parameter. As long as you are scripting exclusively in JavaScript (the same as JScript), there is no need to include this parameter. Passing function parameters NN4+ provides a mechanism for easily passing evaluated parameters to a func tion invoked by setInterval(). To use this mechanism, the first parameter of setInterval() must not be a string, but rather a reference to the function (no trailing parentheses). The second parameter remains the amount of delay. But beginning with the third parameter, you can include evaluated function arguments as a comma-delimited list: intervalID = setInterval(cycleAnimation, 500, figure1 ) The function definition receives those parameters in the same form as any function. function cycleAnimation(elemID) {…} For use with a wider range of browsers, you can also cobble together the ability to pass parameters to a function invoked by setInterval(). Because the call to the other function is a string expression, you can use computed values as part of windowObject.setInterval() Please visit Domain Name Hosting services for high quality webhost to host and run your jsp applications.
283Chapter 16 .Window and Frame Objects alias auto cell context-menu copy count-down count-up count-up-down crosshair default e-resize grab grabbing help move n-resize ne-resize nw-resize pointer s-resize se-resize spinning sw-resize text w-resize wait Each operating system provides its own suite of cursor designs, but not all operating systems provide a unique cursor design for each type. Also be aware that setting the cursor via this method does not lock the cursor. If the user rolls the cursor atop form controls (especially text boxes), the cursor reverts to its auto setting. On the CD-ROM Example on the CD-ROM Related Item: style.cursor property (Chapter 30). setInterval( expr , msecDelay [, language]) setInterval(funcRef, msecDelay [, funcarg1, …, funcargn]) Returns: Interval ID integer. NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . It is important to understand the distinction between the setInterval()and setTimeout() methods. Before the setInterval() method was part of JavaScript, authors replicated the behavior with setTimeout(), but the task often required reworking scripts a bit. Use setInterval()when your script needs to call a function or execute some expression repeatedly with a fixed time delay between calls to that function or expression. The delay is not at all like a wait state in some languages: Other processing does not halt while the delay is in effect. Typical applications include animation by moving an object around the page under controlled speed (instead of letting the JavaScript interpreter whiz the object through its path at CPU-dependent speeds). In a kiosk application, you can use setInterval() to advance slides windowObject.setInterval() If you are looking for affordable and reliable webhost to host and run your business application visit our ftp web hosting services.
282 Part III . Document Objects Reference Unwanted User Scrolling Many Windows-compatible personal computers ship with a mouse that includes a scroll wheel that is activated by pressing down on the wheel and spinning the wheel. Be aware that even if your page design loads into frames or new windows that intentionally lack scrollbars, the page will be scrollable via this wheel if the document or its background image are larger than the window or frame. Users may not even be aware that they have scrolled the page (because there are no scrollbar visual clues). If this affects your design, you may need to build in a routine (via setTimeout()) that periodically sets the scroll of the window to 0,0. To scroll upward, use a negative value for the second parameter: window.scrollBy(0, -window.innerHeight) Scrolling the document in the Macintosh exhibits some buggy behavior. At times it appears as though you are allowed to scroll well beyond the document edges. In truth, the document has stopped at the border, but the window or frame may not have refreshed properly. The window scroll methods are not the ones to use to produce the scrolling effect of a positioned element. That kind of animation is accomplished by adjusting style position properties (see Chapter 31). On the Example (with Listings 16-34 and 16-35) on the CD-ROM CD-ROM Related Items: window.pageXOffset, window.pageYOffset properties; window.scroll() method. setCursor( cursorType ) Returns: Nothing. NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . The NN6 window.setCursor() method is an alternative to the cursor style sheet attribute. In the meantime, NN6 user interface theme authors have been using it, and you can experiment with it, too. The method requires one parameter, a string name of one of the accepted cursor types. Recognized cursor types are as follows: windowObject.setCursor() Go visit our java server pages services for a reliable, lowcost webhost to satisfy all your needs.
281Chapter 16 .Window and Frame Objects document s 0,0 point can move via manual or scripted scrolling. Although scroll() is a window method, it seems to behave more like a document method, as the document appears to reposition itself within the window. Conversely, you can also think of the window moving to bring its 0,0 point to the designated coordinate of the document. Although you can set values beyond the maximum size of the document or to negative values, the results vary from platform to platform. For the moment, the best usage of the window.scroll()method is as a means of adjusting the scroll to the very top of a document (window.scroll(0,0)) when you want the user to be at a base location in the document. For vertical scrolling within a text-heavy document, an HTML anchor may be a better alternative for now (though it doesn t readjust horizontal scrolling). On the CD-ROM Example (with Listings 16-31, 16-32, and 16-33) on the CD-ROM Related Items: window.scrollBy(), window.scrollTo() methods. scrollBy(deltaX,deltaY) scrollTo(x,y) Returns: Nothing. NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . NN4+ and IE4+ provide a related pair of window scrolling methods. The window.scrollTo() method is the new version of the window.scroll() method. The two work identically to position a specific coordinate point of a document at the top-left corner of the inner window region. In contrast, the window.scrollBy()method allows for relative positioning of the document. Parameter values indicate by how many pixels the document should scroll in the window (horizontally and vertically). Negative numbers are allowed if you want to scroll to the left and/or upward. The scrollBy()method comes in handy if you elect to hide the scrollbars of a window or frame and offer other types of scrolling controls for your users. For example, to scroll down one entire screen of a long document, you can use the window.innerHeight(in NN) or document.body.clientHeight (in IE) properties to determine what the offset from the current position would be: // assign IE body clientHeight to window.innerHeight if (document.body && document.body.clientHeight) { window.innerHeight = document.body.clientHeight } window.scrollBy(0, window.innerHeight) windowObject.scrollBy() If you are in need for cheap and reliable webhost to host your website, we recommend http web server services.
280 Part III . Document Objects Reference Perhaps a more common reason for capturing events at the window (or similar) level is to look for special cases, such as when someone Ctrl+clicks on an element. In this case, even though the window event handler receives all click events, it performs further processing only when the event.modifiersproperty indicates the Ctrl key is also pressed and the eventObj.target property reveals the item being clicked is a link rather than a button. All other instances of the click event are routed on their way to their destinations. The event object knows where it s going, so that your routeEvent()method doesn t have to worry about that. The parameter for the routeEvent()method is the event object that is passed to the function that processes the high-level event, as shown here: function flashRed(evt) { [statements that filter specific events to flash background color red] routeEvent(evt) } The event object, evt, comes into the function while passing unmodified to the object that was clicked. In the W3C DOM event model (as implemented in NN6), a captured event continues onward to the target after event handlers higher up the containment chain finish their work. On the CD-ROM Example on the CD-ROM Related Items: window.captureEvents(), window.releaseEvents(), window.handleEvent() methods; event object (Chapter 29). scroll(horizontalCoord, verticalCoord) Returns: Nothing. NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . The window.scroll() method was introduced in NN3 and has been implemented in all scriptable browsers since then. But in the meantime, the method has been replaced by the window.scrollTo() method, which is in more syntactic alliance with many other window methods. Use the window.scroll() method only if your audience is still using NN3; for an audience of NN4+ and IE4+, use the window.scrollTo() method instead. The window.scroll() method takes two parameters, the horizontal (x) and vertical (y) coordinates of the document that is to be positioned at the top-left corner of the window or frame. You must realize that the window and document have two similar, but independent, coordinate schemes. From the window s point of view, the top-left pixel (of the content area) is point 0,0. All documents also have a 0,0 point: the very top-left of the document. The window s 0,0 point doesn t move, but the windowObject.scroll() If you are searching for cheap webhost for your web application, please visit MySQL5 Web Hosting services.
279Chapter 16 .Window and Frame Objects To resize the window such that it occupies all screen real estate (except for the Windows Taskbar and Macintosh menubar), use the screenobject properties that calculate the available screen space: window.resizeBy(screen.availWidth, screen.availHeight) This action, however, is not precisely the same in Windows as maximizing the window. To achieve that same effect, you must move the window to coordinates -4, -4 and add eight to the two parameters of resizeBy(): window.moveTo(-4,-4) window.resizeTo(screen.availWidth + 8, screen.availHeight + This hides the window s own four-pixel wide border, as occurs during OS- induced window maximizing. See also the screenobject discussion (Chapter 28) for more OS-specific details. In practice, NN4 does not give reliable results setting a window s size via the resizeTo() method. On some platforms, the dimensions are applied to the inner width and height, rather than outer. If a specific outer size is necessary, use the NN- specific window.outerHeightand window.outerWidth properties instead. Navigator imposes some security restrictions for maximum and minimum size for a window. For both methods, you are limited to the viewable area of the screen and visible minimums unless the page uses signed scripts (see Chapter 46). With signed scripts and the user s permission, for example, you can adjust windows beyond the available screen borders. On the CD-ROM Example (with Listing 16-30) on the CD-ROM Related Items: window.outerHeight, window.outerWidth properties; window.moveTo(), window.sizeToContent() methods. routeEvent(event) Returns: Nothing. NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . If you turn on NN4-specific event capturing in the window, document, or layer object (via their respective captureEvents()methods), the handlers you assign to those events really capture those events, preventing them from ever reaching their intended targets. For some page designs, this is intentional, as it allows the higher-level object to handle all events of a particular type. But if your goal is to perform some preprocessing of events before they reach their destination, you need a way to pass that event along its regular path. That s what the routeEvent() method is for. windowObject.routeEvent() We recommend high quality webhost to host and run your jsp application: christian web host services.
278 Part III . Document Objects Reference their intended target. In fact, by releasing capture from a higher object, released events don t bother stopping at those higher objects anymore. Parameters for the releaseEvents() method are one or more event types. Each event type is its own entity, so if your window captures three event types at one point, you can release some or all of those event types as the visitor interacts with your page. For example, if the page loads and captures three types of events, as in window.captureEvents(Event.CLICK | Event.KEYPRESS | Event.CHANGE) you can later turn off window event capture for all but the click event: window.releaseEvents(Event.KEYPRESS | Event.CHANGE) The window still captures and processes click events, but keyPress and change events go directly to their target objects. A new mechanism (removing an event listener) is implemented in NN6 based on the W3C event model. See Chapters 14 and 29 for more information. Related Items: window.captureEvents(), window.routeEvent() methods. resizeBy(deltaX,deltaY) resizeTo(outerwidth,outerheight) Returns: Nothing. NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . Starting with NN4 and IE4, scripts can control the size of the current browser window on the fly. While you can set the individual inner and (in NN) outer width and height properties of a window, the resizeBy() and resizeTo() methods let you adjust both axis measurements in one statement. In both instances, all adjustments affect the lower-right corner of the window: To move the top-left corner, use the window.moveBy()or window.moveTo() methods. Each resize method requires a different kind of parameter. The resizeBy() method adjusts the window by a certain number of pixels along one or both axes. Therefore, it is not concerned with the specific size of the window beforehand only by how much each axis is to change. For example, to increase the current window size by 100 pixels horizontally and 50 pixels vertically, the statement is window.resizeBy(100, 50) Both parameters are required, but if you only want to adjust the size in one direction, set the other to zero. You may also shrink the window by using negative values for either or both parameters. You find a greater need for the resizeTo() method, especially when you know that on a particular platform the window needs adjustment to a specific width and height to best accommodate that platform s display of form elements. Parameters for the resizeTo() method are the actual pixel width and height of the outer dimension of the window the same as NN s window.outerWidth and window.outerHeight properties. windowObject.resizeBy() We would like to recommend you tested and proved virtual web hosting services, which you will surely find to be of great quality.
277Chapter 16 .Window and Frame Objects The value returned by this method is a string in the dialog box s field when the user clicks the OK button. If you re asking the user to enter a number, remember that the value returned by this method is a string. You may need to perform data- type conversion with the parseInt()or parseFloat()functions (see Chapter 42) to use the returned values in math calculations. When the user clicks the prompt dialog box s OK button without entering any text into a blank field, the returned value is an empty string ( ). Clicking on the Cancel button, however, makes the method return a null value. Therefore, the scripter must test for the type of returned value to make sure that the user entered some data that can be processed later in the script, as in var entry = prompt( Enter a number between 1 and 10: , ) if (entry != null) { //statements to execute with the value } This script excerpt assigns the results of the prompt dialog box to a variable and executes the nested statements if the returned value of the dialog box is not null (if the user clicked the OK button). The rest of the statements then include data validation to make sure that the entry is a number within the desired range (see Chapter 43). It may be tempting to use the prompt dialog box as a handy user input device. But, as with the other JavaScript dialog boxes, the modality of the prompt dialog box is disruptive to the user s flow through a document and can also trap automated macros that some users activate to capture Web sites. In forms, HTML fields are better user interface elements for attracting user text entry. Perhaps the safest way to use a prompt dialog box is to have it appear when a user clicks a button element on a page and then only if the information you require of the user can be provided in a single prompt dialog box. Presenting a sequence of prompt dialog boxes is downright annoying to users. On the CD-ROM Example (with Figure 16-13 and Listing 16-29) on the CD-ROM Related Items: window.alert(), window.confirm() method. releaseEvents(eventTypeList) Returns: Nothing. NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . If your scripts have enabled NN4-specific event capture for the windowobject (or documentor layer, for that matter), you can turn off that capture with the releaseEvents() method. This method does not inhibit events from reaching windowObject.releaseEvents() We highly recommend you visit web and email hosting services if you need stable and cheap web hosting platform for your web applications.
276 Part III . Document Objects Reference While there is no known workaround for resurrecting modified content, your script can at least know if the page is being loaded into one of these hidden win dows: The NN-specific window.outerHeightand window.outerWidth properties are zero. If you don t want an immediate script statement to run before being printed, use an ifconstruction to let the nested statement(s) run only if either of those dimension properties is greater than zero. Printing in IE4 While the window.print() method is not available in IE4, it is possible to script printing in the Win32 OS platforms via the built-in browser object. To use this ActiveX object, you must first include the following HTML somewhere in your document (at the end of the BODY is fine): The long CLASSIDattribute must be copied exactly. This HTML adds an object to the document object model that can be scripted. The object has several commands available, one of which provides printing services. The commands are numbered, and the one for printing is the following: IEControl.ExecWB(6, 1) If the user cancels the Print dialog box, a script error may appear, so be sure to trap for errors (see the window.onerrorproperty earlier in this chapter). If you change the second parameter to 2, the Print dialog box does not appear, but that isn t a very user-friendly way to treat printing. Related Items: window.back(), window.forward(), window.home(), window.find() methods. prompt( message , defaultReply ) Returns: String of text entered by user or null. NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . The third kind of dialog box that JavaScript can display includes a message from the script author, a field for user entry, and two buttons (OK and Cancel, or Yes and No on Mac versions of Navigator 2 and 3). The script writer can supply a prewritten answer so that a user confronted with a prompt dialog box can click OK (or press Enter) to accept that answer without further typing. Supplying both parameters to the window.prompt()method is important. Even if you don t want to supply a default answer, enter an empty string as the second parameter: prompt( What is your postal code? , ) If you omit the second parameter, JavaScript inserts the string undefined into the dialog box s field. This string is disconcerting to most Web page visitors. windowObject.prompt() You need excellent and relaible webhost company to host your web applications? Then pay a visit to Inexpensive Web Hosting services.