Controlling Layer Visibility

[ LiB ]

One of the simplest and most reliable layer properties that you can control with scripting is visibility. By dynamically hiding and showing layers , you can create pages that store much more information than is visible at any given time. The designer's buzzword for this is nested content. Nested content can include contextual information popping up where needed, drop-down navigation menus , and different sets of body content that display as users click navigation controls. The possibilities are limited only by the designer's imagination and ingenuity.

Visibility control as scripted by Dreamweaver is supported by Netscape Navigator 4 and 6 and Mozilla, IE 4-6, and Opera 57 across platforms.

You control layer visibility in Dreamweaver with the Show-Hide Layers behavior. As Figure 14.1 shows, it's simple and straightforward to use.

Figure 14.1. The interface for Show-Hide Layers behavior.

The Basics of Showing and Hiding Layers

As with any behavior, start by creating the layer to show or hide, and select the object that will trigger the visibility change. Showing and hiding can be triggered by rollovers, mouse clicks, form data changes, or even pages loading. Then follow these steps:

1. In the Behaviors panel, choose the Show-Hide Layers behavior.
   
   
2. In the dialog box that appears, select a layer from the list.
   
   
3. Choose the visibility state that you want it to have.
   
   
4. Repeat steps 2 and 3 for any other layers you want to change with this instance of the behavior.
   
   

Note that you can change the visibility of as many layers as you like in this one dialog box with just one instance of the Show-Hide behavior. If you have three alternate content layers, for instance, one instance of Show-Hide will show one content layer and hide the other two. (That's the scenario being illustrated in Figure 14.1.) Here are a few other tips.

Setting Visibility vs. Changing Visibility

It's important not to confuse the use of JavaScript to change a layer's visibility with the use of CSS to assign the layer's initial visibility. You assign the latter through the Property Inspector or Layers panel (see Figure 14.2). If you want your layer to be invisible from the moment the page starts loading, set its visibility to be hidden here. Only if you want your layer's visibility to change based on user interaction or browser activity do you need to use the Show-Hide Layers behavior.

Figure 14.2. Setting layer visibility in the Property Inspector or Layers panel.

What's the difference between setting the property initially and using the behavior to set it upon onLoad? Behaviors that execute upon onLoad will execute only after the page has finished loading. For instance, you can create a loading screen by making a layer containing the word Loading and setting it to start out visible but become hidden upon onLoad.

Showing, Hiding, and Default

When you choose the Show-Hide behavior, you have three visibility choices. Show and Hide are self-explanatory. Default sets the visibility state to inherit . If one layer is nested inside another, the child (nested) layer inherits the visibility setting of the parent (nesting) layer.

Choosing Not to Show or Hide a Particular Layer

What if you're in the Show-Hide dialog box, and you've selected a particular layer and set it to show or hide, and then you realize that you had the wrong layer chosen ? You don't have to cancel the whole operation. Just choose the same option for the same layer again to toggle it off. If you've set the layer Fred to Show by mistake, for instance, just leave Fred selected and click the Show button again.

Working with Invisible Layers

When you start working with this behavior, you are likely to run into the following situation. You've created a layer that will start out invisible until the user clicks a button or mouses over something that makes it show. How do you continue working with the layer in Design view now that it's invisible? One solution is to leave it visible until you've finished editing the page. The very last thing you'll do before saving, closing, and uploading the file is use the Property Inspector or Layers panel to set the layer's visibility to Hidden.

For any of you who have less-than -perfect memories, however, this is a dangerous idea because it's easy to forget that last step when you're facing down a deadline and have a million things to do. Instead, use the Layers panel to select your hidden layer. Clicking a layer's name in the panel will select it, and as soon as it's selected, it will become visible and will stay visible as long as you're editing its contents. As soon as you deselect it, however, it will disappear again. Making the layer temporarily visible in this way doesn't change the HTML code (that is, the code still defines the layer as being invisible), so there's no danger of it getting uploaded and displayed on the web improperly (see Figure 14.3).

Figure 14.3. Selecting an invisible layer in the Layers panel to make it temporarily visible in Design view.

Exercise 14.1. Creating a Drop-Down or Cascading Menu

In this exercise, you'll create one of the most popular hidden-layer effects: a graphic menu bar with menus that appear when the mouse rolls over topics on the menu bar. This sort of menu is called a drop-down menu when the menu bar is placed horizontally across the top of a page (the menu bars in standard applications), and a cascading menu or flyout menu when the menu bar is vertical and the menus appear to the side. All files for the exercise are located on the book's website at www.peachpit.com in the chapter_14/menus folder.

If you haven't done so already, download the chapter_14 folder to your hard drive and define a site with that folder as the local root folder.

1. Start by opening dropdown.html and examining its contents and structure. This file contains four layersone for the menu bar and three for the menus that will appear from it. The three menu layers are nested within the main menu bar layer, so the whole menu system can be repositioned by moving only the main layer. Preview the file in a browser, and you'll see that the first of the menus already contains rollovers for each entry (see Figure 14.4).
   
   

   Figure 14.4. The dropdown.html file, before any Show-Hide Layer behaviors have been applied.

   

   
   
2. When working in depth with layers, an important habit to get into is giving them names you'll recognize when you see them in a dialog box or inspector. Before proceeding with the scripting in this exercise, take a moment to rename the layers. Name them main, books, music, and video.
   
   
3. The three books, music, and video layers should initially be invisible. Using the eyeball column in the Layers panel, make the books, music, and video layers invisible by clicking until the closed eye icon shows (see Figure 14.5).
   
   

   Figure 14.5. The Layers panel for dropdown.html, with layers renamed and "eyeballs" closed, signifying that the layers are hidden.

   

   
   
4. You want each menu to appear when the user mouses over the appropriate title in the menu bar. This means attaching the Show-Hide behavior to the three main graphics in the menu bar. Start with the BOOKS image.
   
   

   • Select the image.

   • Open the Behaviors panel and choose Show-Hide Layers from the actions list.

   • In the dialog box that appears, from the list of layers, find books and set it to Show (see Figure 14.6).

     Figure 14.6. The Show-Hide Layers dialog box showing the books layer.

     

     
     

   • When you're done, click OK to close the dialog box.

   After you've applied the behavior, check the Behaviors panel to make sure the <A>onMouseOver event trigger is chosen. (Remember to use the event trigger that appears with <A> to ensure maximum cross-browser compatibility. For more on this, see Chapter 13, "Getting Interactive with Behaviors.")
   
   Preview in the browser to make sure the behavior is working. Then repeat the procedure for each of the other two menu topics.
   
   
5. After you've applied all three behaviors, the menus should appear on cuebut they never disappear. The mechanics of making that happen aren't difficultit's just a matter of applying another Show-Hide behavior. But what event should trigger the behavior? That's a matter of strategy.
   
   One strategy is to make each menu button (BOOKS, MUSIC, VIDEO) trigger its own menu to show and the other menus to hide. To accomplish that, select one of the menu title graphicsBOOKS, for instanceand, in the Behaviors panel, double-click its Show-Hide behavior to edit it. For the BOOKS graphic, the books layer should already be set to Show. Select the music layer and set it to Hide; then set the video layer to Hide also. Using this one behavior, you've now created a script that shows one menu and hides the other two (see Figure 14.7).
   
   

   Figure 14.7. The Show-Hide Layers dialog box for the BOOKS menu title, set to show the books layer and hide the other two menu layers.

   

   
   Repeat this process for each of the three title graphics. Rolling over any menu title should show that title's menu and hide the other two menus.
   
   When you're finished, check out the result in the browser. Assuming that your users will check out each of your menus and then choose a destination from one of them, your menu system should work perfectly . There's one niggling interface flaw remaining, however. What if your visitors check out all the different menus and then decide not to choose a destination from any one of them? After the menus have started showing, there's no way to get all three of them to hide. Again, this is a matter of strategy. What event can be used to trigger all menus hiding?
   
   A sneaky solution is to put another layer behind all of the menu layers, fill that layer with an invisible image, and set that image to trigger all menus hiding when it is rolled over. Figure 14.8 shows this happening.
   
   

   Figure 14.8. Adding a large layer behind the menus, to be used in triggering all menus to hide.

   

   
   
7. Start by drawing a new layer. Make it large enough to cover the entire area of your menu bar and menus. While you're at it, jot down its width and height from the Property Inspector. (Don't nest the background layer in with the main layer, or the effect won't work.) Because it will sit behind the other layers, as a kind of invisible background for them, name it menubg .
   
   Arrange the new menubg layer behind all the other layers by going to the Layers panel and dragging it to the bottom of the list of layers.
   
   With the cursor inside this new layer, use the Image object from the Insert bar to insert trpix.gif . This transparent, single-pixel GIF image is located in the chapter_14/menus/images folder with the rest of the image files for this exercise. Set the width and height of the image to match the dimensions of your layer.
   
   
8. With this large transparent image selected, go to the Behaviors panel and add another Show-Hide Layers behavior. Set this behavior to hide all three menu layers. Set the triggering event to onMouseOver or <A>onMouseOver .
   
   When you're finished, preview the page in a browser. When a menu is showing, moving the mouse away from the menu should hide all menus.
   
   What's happening here? When the mouse rolls over the transparent image, all menus will hide. But when the mouse is over another image, in another layer, which is in front of the transparent image, its event handler is disabled. So, effectively, you've created a trigger that will hide all menus only when the mouse is in the vicinity of the menu system but not actually over any menus or the menu bar.
   
   Should you use onMouseOver or <A>onMouseOver as the trigger for the transparent image? As was discussed in Chapter 13, any time an <img> tag is selected, you have a choice of event triggers with or without <A> . Choosing a trigger with <A> will add the behavior's function call to an <a> tag surrounding the image (and will even create the <a> tag, if necessary). Choosing a trigger without this marker will add the function to the <img> tag itself. Because Netscape 4. x does not support event handlers for <img> tags, it's safer to use the <A> triggers. But adding an <a> tag also causes the cursor to change to a pointing finger. This is the user's cue that a link is present. In the case of your menu system, users will be confused if, any time the mouse gets anywhere near the hidden menus, the cursor changes to indicate a link. That's bad interface design.
   
   For this exercise, try out the menu system both wayswith onMouseOver and <A>onMouseOver . See what the difference means to you. Figure 14.9 shows what the user will see if you choose the safer <A>onMouseOver event handler.
   
   

   Figure 14.9. The pointing finger cursor appearing over empty space if an <a> tag is added to the transparent image behind the menus.

   

   
   

   

   To access the both onMouseOver events, set the event handlers pop-up menu to show events for IE 4.0.

   
   
9. Optional challenge: Can you see how the menu system you've just created could function as a vertical menu bar with cascading menus, without any change in scripting? The only changes required are layout changesaltering the table structure of the main layer, the relative positions of the various menu layers, and the dimensions of the invisible image and layer in the background. See if you can create a sideways cascading menu from this file. If you get stuck, check out cascading_finished.html , in the chapter_14/menus folder, for a completed example. Figure 14.10 shows a cascading menu system in action.
   
   

   Figure 14.10. The drop-down menu system, redesigned as a cascading menu.

   

   
   

Working Smart with the Show-Hide Behavior

The actual mechanics of applying this behavior are not complicated. However, working with invisible page elements brings up a host of questions that you'll undoubtedly stumble across when you least expect them. Here are a few points to consider.

Downloading and Invisible Layers

Any content within an invisible layer is still considered part of your page. It will download when the page downloads. This has all sorts of ramifications . If your page contains many layers that are initially invisible, and if those layers have substantial content in them, your page will take a while to download even though it looks like a simple, fairly empty page. If a user clicks a button that makes a layer visible, and that layer's contents haven't finished downloading yet, the user will experience a delay. After the page has finished downloading, however, layers that become visible will display immediately. In essence, you've preloaded the contents of those layers.

Triggering JavaScript Actions Within Invisible Layers

Because layers can contain just about anything, your layers might include buttons or text links that have their own behaviors attached to them. Be aware that triggers won't work if a layer is invisible. If you have a rollover set to open a new window when the mouse moves over it, and that rollover is hidden in an invisible layer, no visitor is going to accidentally trigger the new window opening by moving the mouse over that hidden item.

Media Objects in Invisible Layers

Embedded video, audio, Flash movies, and other media objects can be placed in layers (see Chapter 15, "Plug-Ins, ActiveX, and Java," for more on this), but this limits the functionality of the layers. Depending on the browser, the platform, and the media plug-in involved, the layer might not become properly invisible, or it might not be possible to change layer visibility with scripting. If you want to use media objects in conjunction with DHTML effects like these, test your pages carefully in all target browsers.

[ LiB ]