SQL Server Magazine

To use a filter, you must begin by setting the style.filter property to a specific predefined filter. In this case, the blendTrans filter is used. This filter accepts a duration parameter, which specifies how long the transition should occur. In this example, it's set to 7 seconds. After the filter is selected, you use the Apply method to prepare the SPAN element for content changes. However, the changes don't actually take place until the Play method executes.

The next line of code sets the style.visibility property to hidden, which means the Span1 object (which contains the existing text at this point) will fade out when the blendTrans .Play method executes in the following line. While in the hidden state, the text changes to the string specified by the innerText property.

To make the new text fade in, you apply the same techniques. After the filter is selected and prepared, you set the style.visibility property, but this time you set it to visible rather than hidden. When the Play method executes, the Span1 object (which contains the new text at this point) fades in. This transition also takes 7 seconds. The cursor is reset at the end of this transition because the onfilterchange event fires. Callout A in Listing 2 shows the code that resets the cursor by executing the resetcursor subprocedure.

The Disappearing Act
Text isn't the only thing you can make vanish into thin air. You can make buttons, boxes, and other items disappear and reappear at will. For example, in the UI in Figure 1, click the HideBrowse button. Notice that the Browse box and ShowFileSelected button in the upper left corner of the UI vanish and the HideBrowse button becomes the ShowBrowse button. To make the Browse box and ShowFile-Selected button reappear, simply click the ShowBrowse button. Similarly, you can make a clock and a WhatTimeIsIt button appear and disappear by clicking a button whose label toggles between ShowTime and HideTime.

The DIV element makes such disappearing acts possible. The DIV and SPAN elements are similar to each other in that whatever attribute is applied to that DIV or SPAN is applied to everything within its start and end tags. More important, you can use IDs in DIV elements the same way you can use IDs in SPAN elements. Unlike the SPAN element, the DIV element can include line breaks. (The SPAN element at callout A in Listing 2 appears to have line breaks, but it doesn't in the actual HTA code. Column widths in the printed publication force us to wrap code.)

As Listing 4 shows, there are two DIV elements in this sample HTA and both are defined with absolute positions (i.e., 50 pixels from the top and 10 pixels to the left). So, both occupy the same space. However, the first DIV element (which contains the time objects) has its style.visibility property set to hidden, so only the browse objects in the second DIV element appear when the application starts up. Thus, you can use one area of your UI to display different elements.

Setting the Stage
Before you can use special effects in HTAs, you need to set the stage so that they work properly. In previous HTA articles, I demonstrated the use of the Window_Onload event, which takes place when an HTA is launched. In HTASpecialEffects.hta, I use another Onload event that differs slightly from the Window_Onload event. The new Onload event resides in the BODY element and executes before the Window_Onload event. The Onload event occurs while the browser is loading, whereas the Window_Onload event occurs after the browser has finished loading the page.

The Onload event calls the Startup subprocedure into action. This subprocedure sets up the HTA window size and initializes the timer used to display the time of day. It also uses Windows Management Instrumentation (WMI) to gather the names of the .ani files that reside in the C:\ WINDOWS\Cursors or C:\Winnt\Cursors folder. These files contain the animated cursors. Windows XP has quite a few animated cursor files, but unfortunately Windows 2000 has only one that I have seen in my tests. The Startup subprocedure populates the animated-cursor list box with the collection of .ani filenames.

Immediately after the Startup subprocedure runs, an Onhelp event calls the ShowHelp subprocedure. As its name implies, this subprocedure provides Help information. The Onhelp event is triggered whenever you press the F1 key.

The Window_Onload event uses the Focus method to initially activate the animated-cursor list box. Typically, I use the Focus method to place the cursor immediately into a user input textbox. In HTASpecialEffects .hta, however, I set the focus on this list box so that users can simply press the DOWN ARROW key on the keyboard to quickly scroll through the animated cursors to see which cursor they want to use. Note that for the animated cursors, fade transitions, and the other special effects to display properly, the system's color palette must be set to 256 colors or better.

Spruce Up Your HTAs with F/X
HTASpecialEffects.hta only begins to scratch the surface of the special effects you can achieve with HTML filters and transitions. I hope it helps you get an idea of how you might enhance your VBScript HTAs.

End of Article

Prev. page     1 [2]     next page -->