Controlling Other Layer Properties

[ LiB ]

You've changed visibility, you've changed the contents, and you've dragged layers around. However, those are only a few of the layer properties you can control. Depending on which browser(s) you're scripting for, you can change background color , position, width and height, style, and clippingyou name it. The Dreamweaver general, all-purpose behavior for controlling everything not covered by other behaviors is Change Property.

Using the Change Property Behavior

This behavior isn't just for changing layer properties. It's more of a catchall behavior for changing any property of any scriptable page element. Depending on the browser you're targeting and the DOM it supports (see the discussion on DOMs at the beginning of this chapter), you can change properties for form elements, various kinds of layers, and even images. Figure 14.28 shows the Change Property dialog box with its various parts identified. (See Chapter 9, "Working with Forms," for a discussion of using this behavior with form elements.)

Figure 14.28. The Change Property dialog box.

To use Change Property to alter layer properties, follow these steps:

Set up your document with whatever layer (or form or image) elements you want to use and change.
Select whichever object will trigger the behavior, and choose Change Property from the Behaviors panel Actions list.
From the first pop-up menu, choose the tag of the object you want to change ( <div> , <layer> , and so on). Unless you have changed the default, a layer in Dreamweaver will be created with the <div> tag.
The second pop-up menu will now be populated with all named instances of the chosen tag that appear in your document. From this menu, choose the specific instance you want to control. (Unlike Show-Hide Layers, you can control only one object with each occurrence of this behavior.)
Choose a target browser from the pop-up list on the third line of the dialog box. What you choose here will determine what choices will appear in the Property pop-up list to its left.
Choose a property to change. If the Property list is empty, the object you have chosen is not scriptable in the DOM of the browser you have targeted . If you want to change a property that isn't on the list but that you know is scriptable, enter it by hand in the text field below.
Enter a new value for the property. It's up to you to choose a value acceptable for that property. The Change Property dialog box shown in Figure 14.29 is set to change the font-family of all text within the <div> layer named caption. If the value field for this dialog box didn't contain a valid font name, the property change would have no effect.

Figure 14.29. The Change Property dialog box set up to change the z-index property of a div layer.

Change Property and Browser Compatibility

Because it's a generic behavior with a very basic purpose, Change Property does not necessarily create cross-browser scripts. After you choose a target browser in the dialog box, the script will be entered using the syntax required for that browser. If all you're doing with the behavior is scripting form fields, your script will probably work across browsers because only basic DOM access is required for this kind of page element. If you're scripting layers, your behavior will definitely be browser-specific.

Controlling Netscape Layers

As discussed in Chapter 13, "Interactivity with Behaviors," Netscape 4. x functions best if its proprietary <layer> tag is used to create layers, even though layers created with other tags will work there. If you target Netscape 4 in the Change Property behavior and specify that you want to change <div> layers, no scriptable properties will show up in the dialog box. If you choose the <layer> tag to change, however, you'll still be allowed to choose named instances of <div> layers, and the property list will supply a list of Netscape-formatted properties to change. Figure 14.29 shows this strange occurrence in action. This configuration will work fine in Netscape 4 or Netscape 6.

Doubling Up for Multiple Browsers

For some properties, it is possible to target IE and Netscape Navigator just by attaching two instances of Change Property to the same event handler. Figure 14.30 shows two separate configurations of the behavior, each set to change the vertical position of the specified layer on the page. Both behaviors are being applied to one text link, to be activated by onClick . This strategy won't work with all properties. If you attempt to change the layer's background color in this way, for instance, IE interprets the Netscape syntax as a command to change the page's background color.

Figure 14.30. Two instances of the Change Property behavior, each set up to change the T (top) property of a layer called fred