Chapter 42: Working with Behaviors, Custom Scripts, and Snippets

---

 Download CD Content

Dreamweaver contains an array of JavaScript functions that add increased functionality to your site pages, including pop-up windows, form validation, and customized scripts. Dreamweaver also includes a snippets panel that enables you to store code for later use in all your sites. Snippets can either be complex functions or text bits you use on a regular basis.

Introducing Dreamweaver's Built-in Behaviors

Dreamweaver behaviors place JavaScript code in a document to let visitors interact with Web page elements through events. Events are user-actions, such as clicking (onClick), rolling the cursor over a page element (onMouseOver), or loading a page (onLoad) among many others. A behavior is a combination of an event with an action triggered by that event. Actions are Dreamweaver's name for JavaScript functions. Functions set up client-side logic that is called when a specified event occurs. In the Behaviors panel, you add a behavior to a page by selecting it from the Behaviors panel. You may then specify the event that triggers the selected action.

You've already explored some of the built-in behaviors found in Dreamweaver when you designed and scripted your navigation elements using Swap Image, Set Nav Bar image, and Show Pop-Up Menu. But there are many more behaviors that you can tap into to add increased functionality to your site, as seen in Figure 42-1. Some behaviors are grayed out depending upon the selected object in the current document. The list of events you may select from changes depending upon what your target browsers are. You may change the list of events available by choosing Show Events For. This doesn't change the list of behaviors — only the events that may trigger the actions, but events and the JavaScript functions (actions) may be affected by the user's browser. Browsers, like any other program, evolve and more modern browsers understand and use a richer, more complex version of JavaScript, which makes use of more events than earlier versions did.

Figure 42-1: Dreamweaver's behaviors. Which behaviors are available depends on what object or link is selected in the current document.

Cross-Reference 

The entry for Studio VII shown in Figure 42-1 was added through extensions created by Project Seven. You'll read more about Extending Dreamweaver later in Chapter 43.

If all this talk of JavaScript functions and user events is overwhelming, don't worry. Using Dreamweaver doesn't require that you know which code to modify. You use the Behavior panel to select a new event and Dreamweaver makes the changes for you. With years of testing and much input from a vast team of engineers and beta testers, you can be sure that the code produced will work in your target browsers, too. That said, if you are a coder by nature, rejoice! DreamweaverMX, like the versions before it, provides easy access to the JavaScript behind the behaviors. Whether you prefer Design view or Code view, you will appreciate the time-saving, easy-to-apply functionality of Dreamweaver behaviors.

Using Dreamweaver's built-in behaviors

Dreamweaver MX contains many useful built-in behaviors, some of which have already been used in previous chapters. Here are some simple exercises designed to help you understand how some of the behaviors may be used. In some cases, the behavior has already been explained and used in another chapter — or will be used in a later chapter — so look for the cross-references.

Call JavaScript

Use Call JavaScript to call a custom function or line of JavaScript code that should be executed when an event occurs. When adding this behavior, type your own script or use code that is easily and freely available online.

On the CD-ROM 

Save the chapter42_exercise folder to your hard drive. Define a new site.

Here's a simple example of a back button created using this behavior:

1. Locate and open _exercisechapter42\behaviors\showdate.htm. This page contains a custom dynamic date function (mydate) written in the head of the page.

2. Place your cursor into the write date link.

3. Click the Add (+) button to add Call JavaScript.

4. In the dialog box, type the following call to the mydate function: mydate()

5. Close the dialog box and set the Event to onClick, if it is not already set.

6. Save the page and preview it in a browser. Click the write date link to see the dynamic date.

Change Property

Use the Change Property behavior to change the value of an object's properties in the current document through the use of CSS. Which properties you may affect depends upon the user's browser — more properties may be changed in newer browsers (those with more support for dynamic CSS) and some browsers may not allow this method at all. Use this action only if you are familiar with HTML and your target browsers' capabilities. Here's an example exercise using the Change Property behavior to create a rollover effect in a layer with a text link inserted into a table cell:

1. From the chapter42_exercise defined site, open the file  change_property.htm from the chapter42_exercise\behaviors folder in the Site panel.

2. Place your cursor anywhere in the text. The text is a single link that has a CSS style set to control the color and Text Decoration of the link. It is inside a table cell that is contained within a layer named popad. The layer has a background color property set to #CCCC99.

   Corss-Reference 

   For more about CSS links, see Chapter 36. For more about layers and DHTML (Dynamic HTML), see Chapter 44.

3. Use the Behaviors panel to Add (+) the Change Property behavior.

4. In the dialog box that opens (Figure 42-2) you must first choose the type of object to populate the Named Object field.

   
   Figure 42-2: The Change Property dialog box

   Note 

   You cannot "choose" LAYER if it is already the chosen type of object. First select a different type of object; then switch back to LAYER. This triggers the Named Object field to load the available layers. (There's only one named popad.)

5. Select the popad Named Object. Choose Select from the Property options and choose style.backgroundColor from the first menu and leave the second menu set to IE4. Internet Explorer 4+ and Netscape 6+ browsers recognize more properties. Other browsers simply ignore the attempt to change the properties.

6. Enter a New Value of #999966. Close the dialog box and set the Event to onMouseOver.

7. With your cursor still in the Button link, add the behavior again, repeating the same options but adding a New Value of #CCCC99. After closing the dialog box, set this event to onMouseOut, which restores the original background color to the color first used.

8. Save and test the page. When you move your cursor over the link, the layer background color should mimic the rollover effect normally possible only with images.

Check Browser/Check Plugin

The Check Browser is used to verify the user's browser brand and version and is especially useful when the site pages incorporate functionality that may otherwise be unavailable when the user's browser brand or version doesn't support it. This behavior is most often attached to the <body> tag to occur onLoad. You may also send the user to an alternate page that contains explanation and links to update their browser.

1. Open the page  check_browser.htm from the behaviors folder in the Chapter 42 site.

2. Select the <body> tag and Add (+) the behavior Check Browser.

3. Browse to set the URL to  index.htm in the behaviors folder.

4. Set the Alt URL to  get_new.htm in the behaviors folder.

5. As shown in Figure 42-3, set the Netscape Navigation 4.0 options to Go to URL and otherwise, Go To Alt URL. Do the same for Internet Explorer 4.0 options. Set Other Browsers to Alt URL.

   
   Figure 42-3: The Check Browser dialog box

   If the browser is 4.0 or newer, it should understand JavaScript and be sent to the URL page (the homepage) or otherwise be sent to the Alt URL ( get_new.htm), which provides details and possibly download links.

6. Save and test your page ( check_browser.htm) to see what happens. Assuming you have a relatively new browser, you should be sent to the home page.

   Caution 

   If the user's browser is set to disable the use of JavaScript, the detection of the browser will not occur since it uses JavaScript to do the detection!

7. In some browsers, it is possible to disable JavaScript. To see this in action, disable your scripting options by using a Netscape browser and choosing Edit ® Preferences, as shown in Figure 42-4 (NN 4x) or Figure 42-5 (NN6x).

   
   Figure 42-4: In Netscape 4x, turn off JavaScript by unchecking the option.

   
   Figure 42-5: Turn off scripting in Netscape 6x here.

8. Now test the  check_browser.htm page in Netscape. Because JavaScript is disabled, the Check Browser function never occurs.

   To get around this problem, you must resort to a non-JavaScript method.

9. In  check_browser.htm, choose View Head Content and click the Head Content bar that opens above the document.

10. Choose Insert ® Head Tags ® Refresh to add a meta refresh to this page as shown in Figure 42-6. Set the Delay to 5 seconds and browse to set the URL to  get_new.htm. After a set time (5 seconds) the page takes the user to the  get_new.htm (Alt URL) without the use of JavaScript.

    
    Figure 42-6: A meta refresh doesn't require JavaScript to function.

11. Save and test the page in Netscape. You will find yourself at  get_new.htm after 5 seconds. If you enable scripting for Netscape and retest the page, you will be taken to the home page.

You can use Check Plugin to verify the presence of a plug-in — a program designed to handle a specific file type that the browser itself may not be able to handle. You can't detect specific plug-ins in Internet Explorer using JavaScript. However, selecting Flash or Director adds the appropriate VBScript code to your page to detect those plug-ins in IE for the Windows platform. Plug-in detection is not possible in Internet Explorer for the Macintosh platform.

Control Shockwave or Flash

Use the Control Shockwave or Flash behavior to play, stop, rewind, or go to a frame in a Shockwave or Flash movie. To use this behavior, your movie must be named. You may add a movie name by selecting it and adding the name to the top-left field in the Property inspector. When done, follow these steps:

1. Select the object used to control the movie and add the behavior.

2. Select a Shockwave or Flash movie from the menu of those movies in the current page.

3. Choose Play, Stop, Rewind, or Go to Frame, as shown in Figure 42-7. If you choose go to frame, specify a frame number.

   
   Figure 42-7: Select the type of action needed to control your named Shockwave or Flash movie.

4. After you closed the dialog box, choose the desired event.

Drag Layer

Drag Layer is a behavior designed to allow layers — page objects created through CSS positioning and the <div> tag — to be moved on the page. The layer(s) may be moved freely or be constrained. Because the objects associated with use of this behavior require CSS, this behavior is restricted to version 4+ browsers that support advanced JavaScript and style sheets.

Cross-Reference 

See Chapter 44 for an exercise using this behavior.

Go To URL

The Go To URL behavior is a JavaScript method of sending the user to a new document, either within the site or external to the site. It is often used with framed sites to facilitate the loading of pages within two or more frames.

Cross-Reference 

See Chapter 39 to find out more about this behavior.

Hide Pop-Up Menu/Show Pop-Up Menu

The Show/Hide Pop-Up Menu behaviors are used to build, show, and/or hide complex arrays of navigational elements. This behavior may also be used to modify/edit a pop-up menu created in Fireworks.

Cross-Reference 

See Chapter 40 for example exercises using the Show Pop-Up Menu behavior.

Jump Menu/Jump Menu Go

Jump menus are forms-based menu objects that contain selectable items and URLs. The script is triggered by choosing (changing) the <option> item in the drop-down menu. Jump Menu Go is the same, except it provides a Go button that triggers the page change.

Cross-Reference 

See Chapter 38 to read more about Jump Menus.

Open Browser Window

Use the Open Browser Window behavior to add a pop-up window to your site either when a page loads (onLoad) or when a user clicks a link (onClick).

 Habitat Alert site   To promote the option to send a Flash-based e-card relating to preserving wildlife habitat, a pop-up window will announce the e-card feature. The pop-up window will occur when the homepage loads, so its event will be onLoad:

1. Use the Site panel (window) to open the behaviors folder and open  index.htm.

2. Select the <body> tag using the Property inspector and use the Behaviors panel to Add (+) the Open Browser Window behavior.

3. In the dialog box that opens (Figure 42-8) click the Browse button to locate behaviors\change_property.htm. This is a page with an announcement of the e-card site feature.

   
   Figure 42-8: Use the Open Browser Window dialog box to set up your pop-up window.

4. Set the desired width and height for the new window. Keep in mind your target monitor resolutions when selecting the values used. This window is set to open at 350px by 150px.

5. Use the check boxes to provide browser window options — sometimes called "chrome." It is generally a good idea to allow scrollbars and resizing because the size of HTML text may vary so widely from user to user. You may also name the new window to be able to control it with JavaScript, but it is not required.

6. Click OK to close the dialog box. Save your page and preview in your target browsers.

Tip 

Setting any attribute for the window automatically disables those not explicitly set. For example, setting scrollbars and resizing means only that your window will not have menu buttons, status bar, or any other options.

Play Sound

The Play Sound behavior lets you set a sound file to play when a specific user-event occurs. Because sound files are handled in so many different ways, this behavior may or may not work for all users because of the way their browsers are set to handle specific sound file types. The example given here uses a short .wav file.

1. Open the page playsound.htm from the Chapter42\behaviors folder.

2. Place your cursor in the Play link and use the Behaviors panel to add (+) the Play Sound behavior.

3. Browse to locate  heron.wav in the behaviors\sounds folder. Select the sound and close the dialog box.

4. Set the event to onMouseOver. Save and test the page in both IE and NN browsers.

Cross-Reference 

See Chapter 41 for more about the use of sound in your pages.

Popup Message

Provide information to the user with a JavaScript alert window created with the Popup Message behavior. You may embed a valid JavaScript function call, property, global variable, or other expression in the text by placing it inside curly braces {}. If, for some reason, you need to display curly braces in your message rather than use them in your script, place a backslash before the brace (\{).

1. Open popmessage.htm from the Chapter42\behaviors folder.

2. Place your cursor in the Play button link.

3. Use the Behaviors panel to add (+) the Popup Message behavior.

4. Add the following text: This is the sound of the Black-Crowned Night Heron and click OK.

5. Save the page and test it in several browsers to see how the alert is handled.

Preload Images, Set Nav Bar Image, Swap Image, and Swap Image Restore

These behaviors are most often used when creating rollovers, remote rollovers, and navigation bars that require the preloading, swapping, and restoring of images.

Cross-Reference 

See Chapter 40 for exercises that use these behaviors.

Set Text (of Frame, of Layer, of Text Field, of Status Bar)

The Set Text behavior is used to change dynamically the content and formatting of frames, layers, and form text fields. Set Text ® Set Text of Status bar is used to add a text message to the browser's status bar. For the first three options, you may use any valid HTML and/or embed JavaScript function calls, variables, properties, or expressions.

Note 

Any HTML content entered in the text box provided in the Set Text dialog box is coded using special characters. For example, adding the HTML <br> to create a line break results in %3Cbr%3. %3C=<, br=br, and %3=>. This can be daunting to users who seldom work in Code view.

Cross-Reference 

See Chapter 44 for example exercises using the Set Text ® Set Text of Layer and Set Text ® Set Text of Status Bar behaviors.

Show-Hide Layers

Show-Hide Layers lets you set the visibility of CSS layers. This behavior is perfect for creating a slide show of images or complex navigation menus.

Cross-Reference 

See Chapter 44 for an example of using Show-Hide Layers.

Timeline (Go To Frame, Play Timeline, Stop Timeline)

When using timelines — complex, scripted dynamic HTML elements — in your pages, you may control how the user interacts with the Timeline using the Timeline behaviors. Options include Play, Stop, and Go To Frame.

Cross-Reference 

See Chapter 44 for exercises using the Timeline behaviors.

Validate Form

The Validate Form behavior may be used to verify that content is added to a form field and to ensure that the correct type of content is added. For example, you may use the behavior to require that an e-mail address is given. Figure 42-9 shows the options you have with the Validate Form behavior. For this example, check the Required box and select the Email Address option. The most likely events used with the Validate Form behavior are onBlur and onSubmit.

Figure 42-9: The Validate Form dialog box lets you choose a form element, specify whether content is required, and then check the type of data provided.

Cross-Reference 

See Chapter 46 for an exercise that validates form content.

Show Events For

This behavior option lets you set what events are available in the Events menu. Earlier browsers understand fewer events. Newer browsers, particularly IE browsers, understand many different events. For greatest compatibility combined with a fairly large range of events, choose Show Events For ® 4.0 and Later Browsers.

Get More Behaviors

The Get More Behaviors option opens your primary browser and takes you to the Macromedia Exchange where you can download new behaviors for your application.

Cross-Reference 

See Chapter 43 to learn more about extensions, including adding new behaviors to your Dreamweaver program.

---