User Guide Cancel

Apply built‑in JavaScript behaviors

Last updated on Apr 27, 2021

Use this topic to understand how to apply built-in JavaScript behaviors in Adobe Dreamweaver.

Use built‑in behaviors

The behaviors included with Dreamweaver have been written to work in modern browsers. The behaviors fail silently in older browsers.

Note:

The Dreamweaver actions have been carefully written to work in as many browsers as possible. If you remove code from a Dreamweaver action by hand, or replace it with your own code, you may lose cross-browser compatibility.

Although the Dreamweaver actions were written to maximize cross-browser compatibility, some browsers do not support JavaScript at all, and many people who browse the web keep JavaScript turned off in their browsers. For best cross-platform results, provide alternative interfaces enclosed in <noscript> tags so that people without JavaScript can use your site.

Apply the Call JavaScript behavior

The Call JavaScript behavior executes a custom function or line of JavaScript code when an event occurs. (You can write the script yourself, or you can use code provided by various freely available JavaScript libraries on the web.)

Select an object and choose Call JavaScript from the Add Behavior menu of the Behaviors panel.
Type the exact JavaScript to be executed, or type the name of a function.

For example, to create a Back button, you might type if (history.length > 0){history.back()}. If you have encapsulated your code in a function, type only the function name (for example, hGoBack()).
Click OK and verify that the default event is correct.

Apply the Change Property behavior

Use the Change Property behavior to change the value of one of an object’s properties (for example, the background color of a div or the action of a form).

Note:

Use this behavior only if you are very familiar with HTML and JavaScript.

Select an object and choose Change Property from the Add Behavior menu of the Behaviors panel.
From the Type Of Element menu, select an element type to display all the identified elements of that type.
Select an element from the Element ID menu.
Select a property from the Property menu, or enter the name of the property in the box.
Enter the new value for the new property in the New Value field.
Click OK and verify that the default event is correct.

Apply the Check Plugin behavior

Use the Check Plugin behavior to send visitors to different pages depending on whether they have the specified plug‑in installed. For example, you might want visitors to go to one page if they have Shockwave and another page if they do not.

Note:

You cannot detect specific plug‑ins in Internet Explorer using JavaScript. However, selecting Flash or Director will add the appropriate VBScript code to your page to detect those plug‑ins in Internet Explorer on Windows. Plug‑in detection is impossible in Internet Explorer on Mac OS.

Select an object and choose Check Plugin from the Add Behavior menu of the Behaviors panel.
Select a plug‑in from the Plugin menu, or click Enter and type the exact name of the plug‑in in the adjacent box.

You must use the exact name of the plug‑in as specified in bold on the About Plug‑ins page in Netscape Navigator. (In Windows, select Navigator’s Help > About Plug‑ins command; on Mac OS, select About Plug‑ins from the Apple menu.)
In the If Found, Go To URL box, specify a URL for visitors who have the plug‑in.

If you specify a remote URL, you must include the http:// prefix in the address. If you leave the field blank, visitors will stay on the same page.
In the Otherwise, Go To URL box, specify an alternative URL for visitors who don’t have the plug‑in. If you leave the field blank, visitors will stay on the same page.
Specify what to do if plug‑in detection is not possible. By default, when detection is impossible, the visitor is sent to the URL listed in the Otherwise box. To instead send the visitor to the first (If Found) URL, select the option Always Go To First URL If Detection Is Not Possible. When selected, this option effectively means “assume that the visitor has the plug‑in, unless the browser explicitly indicates that the plug‑in is not present.” In general, select this option if the plug‑in content is integral to your page; if not leave it deselected.

Note:

This option applies only to Internet Explorer; Netscape Navigator can always detect plug‑ins.
Click OK and verify that the default event is correct.

Apply the Drag AP Element behavior

The Drag AP Element behavior lets the visitor drag an absolutely positioned (AP) element. Use this behavior to create puzzles, slider controls, and other movable interface elements.

You can specify in which direction the visitor can drag the AP element (horizontally, vertically, or in any direction), a target to which the visitor should drag the AP element, whether to snap the AP element to the target if the AP element is within a certain number of pixels of the target, what to do when the AP element hits the target, and more.

Because the Drag AP Element behavior must be called before the visitor can drag the AP element, you should attach Drag AP Element to the body object (with the onLoad event).

Select Insert > Layout Objects > AP Div or click the Draw AP Div button on the Insert panel and draw an AP Div in the Document window’s Design view.
Click <body> in the tag selector at the lower-left corner of the Document window.
Select Drag AP Element from the Add Behavior menu of the Behaviors panel.

If Drag AP Element is unavailable, you probably have an AP element selected.
In the AP Element pop‑up menu, select the AP element.
Select either Constrained or Unconstrained from the Movement pop‑up menu.

Unconstrained movement is appropriate for puzzles and other drag-and-drop games. For slider controls and moveable scenery such as file drawers, curtains, and mini-blinds, select constrained movement.
For constrained movement, enter values (in pixels) in the Up, Down, Left, and Right boxes.

Values are relative to the starting position of the AP element. To constrain movement within a rectangular region, enter positive values in all four boxes. To allow only vertical movement, enter positive values for Up and Down and 0 for Left and Right. To allow only horizontal movement, enter positive values for Left and Right and 0 for Up and Down.
Enter values (in pixels) for the drop target in the Left and Top boxes.

The drop target is the spot to which you want the visitor to drag the AP element. An AP element is considered to have reached the drop target when its left and top coordinates match the values you enter in the Left and Top boxes. Values are relative to the top left corner of the browser window. Click Get Current Position to automatically fill the text boxes with the current position of the AP element.
Enter a value (in pixels) in the Snap If Within box to determine how close the visitor must get to the drop target before the AP element snaps to the target.

Larger values make it easier for the visitor to find the drop target.
For simple puzzles and scenery manipulation, you can stop here. To define the drag handle for the AP element, track the movement of the AP element while it is being dragged, and trigger an action when the AP element is dropped, click the Advanced tab.
To specify that the visitor must click a particular area of the AP element to drag the AP element, select Area within element from the Drag Handle menu; then enter the left and top coordinates and the width and height of the drag handle.

This option is useful when the image inside the AP element contains an element that suggests dragging, such as a title bar or drawer handle. Do not set this option if you want the visitor to be able to click anywhere in the AP element to drag it.
Select any While Dragging options that you want to use:
- Select Bring Element To Front if the AP element should move to the front of the stacking order while it is being dragged. If you select this option, use the pop‑up menu to select whether to leave the AP element in front or restore it to its original position in the stacking order.
- Enter JavaScript code or a function name (for example, monitorAPelement()) in the Call JavaScript box to repeatedly execute the code or function while the AP element is being dragged. For example, you could write a function that monitors the coordinates of the AP element and displays hints such as “you’re getting warmer” or “you’re nowhere near the drop target” in a text box.
Enter JavaScript code or a function name (for example, evaluateAPelementPos()) in the second Call JavaScript box to execute the code or function when the AP element is dropped. Select Only If Snapped if the JavaScript should be executed only if the AP element has reached the drop target.
Click OK and verify that the default event is correct.

Gather information about the draggable AP element

When you attach the Drag AP element behavior to an object, Dreamweaver inserts the MM_dragLayer() function into the head section of your document. (The function retains the old naming convention for AP elements [that is, “Layer”] so that layers created in previous versions of Dreamweaver will remain editable.) In addition to registering the AP element as draggable, this function defines three properties for each draggable AP element—MM_LEFTRIGHT, MM_UPDOWN, and MM_SNAPPED—that you can use in your own JavaScript functions to determine the relative horizontal position of the AP element, the relative vertical position of the AP element, and whether the AP element has reached the drop target.

Note:

The information provided here is intended for experienced JavaScript programmers only.

For example, the following function displays the value of the MM_UPDOWN property (the current vertical position of the AP element) in a form field called curPosField. (Form fields are useful for displaying continuously updated information because they are dynamic—that is, you can change their contents after the page has finished loading.)

function getPos(layerId){ 
    var layerRef = document.getElementById(layerId); 
    var curVertPos = layerRef.MM_UPDOWN; 
    document.tracking.curPosField.value = curVertPos; 
}

Instead of displaying the values of MM_UPDOWN or MM_LEFTRIGHT in a form field, you could use those values in a variety of other ways. For example, you could write a function that displays a message in the form field depending on how close the value is to the drop zone, or you could call another function to show or hide an AP element depending on the value.

It is especially useful to read the MM_SNAPPED property when you have several AP elements on the page, all of which must reach their targets before the visitor can advance to the next page or task. For example, you could write a function to count how many AP elements have an MM_SNAPPED value of true and call it whenever an AP element is dropped. When the snapped count reaches the desired number, you could send the visitor to the next page or display a message of congratulations.

Apply the Go To URL behavior

The Go To URL behavior opens a new page in the current window or in the specified frame. This behavior is useful for changing the contents of two or more frames with one click.

Select an object and choose Go To URL from the Add Behavior menu of the Behaviors panel.
Select a destination for the URL from the Open In list.

The Open In list automatically lists the names of all frames in the current frameset as well as the main window. If there are no frames, the main window is the only option.

Note:

This behavior may produce unexpected results if any frame is named top, blank, self, or parent. Browsers sometimes mistake these names for reserved target names.
Click Browse to select a document to open, or enter the path and filename of the document in the URL box.
Repeat steps 2 and 3 to open additional documents in other frames.
Click OK and verify that the default event is correct.

Apply the Jump Menu behavior

When you create a jump menu by using Insert > Form > Jump Menu, Dreamweaver creates a menu object and attaches the Jump Menu (or Jump Menu Go) behavior to it. There is usually no need to attach the Jump Menu behavior to an object by hand.

You can edit an existing jump menu in either of two ways:

You can edit and rearrange menu items, change the files to jump to, and change the window in which those files open, by double-clicking an existing Jump Menu behavior in the Behaviors panel.
You can edit the items in the menu just as you would edit items in any menu, by selecting the menu and using the List Values button in the Property inspector.

Create a jump menu object if there isn’t one already in your document.
Select the object and choose Jump Menu from the Add Behavior menu of the Behaviors panel.
Make changes as desired in the Jump Menu dialog box and then click OK.

Apply the Jump Menu Go behavior

The Jump Menu Go behavior is closely associated with the Jump Menu behavior; Jump Menu Go lets you associate a Go button with a jump menu. (Before you use this behavior, a jump menu must already exist in the document.) Clicking the Go button opens the link that’s selected in the jump menu. A jump menu doesn’t normally need a Go button; selecting an item from a jump menu generally causes a URL to load without any need for further user action. But if the visitor selects the same item that’s already chosen in the jump menu, the jump doesn’t occur. In general, that doesn’t matter, but if the jump menu appears in a frame, and the jump menu items link to pages in other frames, a Go button is often useful, to allow visitors to re‑select an item that’s already selected in the jump menu.

Note:

When you use a Go button with a jump menu, the Go button becomes the only mechanism that “jumps” the user to the URL associated with the selection in the menu. Selecting a menu item in the jump menu no longer re-directs the user automatically to another page or frame.

Select an object to use as the Go button (generally a button image), and choose Jump Menu Go from the Add Behavior menu of the Behaviors panel.
In the Choose Jump Menu menu, select a menu for the Go button to activate and click OK.

Apply the Open Browser Window behavior

Use the Open Browser Window behavior to open a page in a new window. You can specify the properties of the new window, including its size, attributes (whether it is resizable, has a menu bar, and so on), and name. For example, you can use this behavior to open a larger image in a separate window when the visitor clicks a thumbnail image; with this behavior, you can make the new window the exact size of the image.

If you specify no attributes for the window, it opens at the size and with the attributes of the window from which it was opened. Specifying any attribute for the window automatically turns off all other attributes that are not explicitly turned on. For example, if you set no attributes for the window, it might open at 1024 x 768 pixels and have a navigation bar (showing the Back, Forward, Home and Reload buttons), location toolbar (showing the URL), status bar (showing status messages, at the bottom), and menu bar (showing File, Edit, View and other menus). If you explicitly set the width to 640 and the height to 480 and set no other attributes, the window opens at 640 x 480 pixels, without toolbars.

Select an object and choose Open Browser Window from the Add Behavior menu of the Behaviors panel.
Click Browse to select a file, or enter the URL you want to display.
Set the options for window width and height (in pixels) and for the incorporation of various toolbars, scroll bars, resize handles, and the like. Give the window a name (use no spaces or special characters) if you want it to be the target of links or want to control it with JavaScript.
Click OK and verify that the default event is correct.

Apply the Popup Message behavior

The Popup Message behavior displays a JavaScript alert with the message you specify. Because JavaScript alerts have only one button (OK), use this behavior to give the user information rather than to present a choice.

You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ({}). To display a brace, precede it with a backslash (\{).

Example:

The URL for this page is {window.location}, and today is {new Date()}.

Note:

The browser controls the appearance of the alert. If you want more control over the appearance, consider using the Open Browser Window behavior.

Select an object and choose Popup Message from the Add Behavior menu of the Behaviors panel.
Enter your message in the Message box.
Click OK and verify that the default event is correct.

Apply the Preload Images behavior

The Preload Images behavior shortens display time by caching images that are not shown when the page first appears (for instance, images that will be swapped in with behaviors or scripts).

Note:

The Swap Image behavior automatically preloads all highlight images when you select the Preload Images option in the Swap Image dialog box, so you do not need to manually add Preload Images when using Swap Image.

Select an object and choose Preload Images from the Add Behavior menu of the Behaviors panel.
Click Browse to select an image file, or enter the path and filename of an image in the Image Source File box.
Click the Plus (+) button at the top of the dialog box to add the image to the Preload Images list.
Repeat steps 2 and 3 for all remaining images that you want to preload on the current page.
To remove an image from the Preload Images list, select it and click the Minus (–) button.
Click OK and verify that the default event is correct.

Apply the Set Text Of Frame behavior

The Set Text Of Frame behavior allows you to dynamically set the text of a frame, replacing the content and formatting of a frame with the content you specify. The content can include any valid HTML code. Use this behavior to display information dynamically.

Although the Set Text Of Frame behavior replaces the formatting of a frame, you can select Preserve Background Color to preserve the page background and text color attributes.

Example:

The URL for this page is {window.location}, and today is {new Date()}.

Select an object and choose Set Text > Set Text Of Frame from the Add Behavior menu of the Behaviors panel.
In the Set Text Of Frame dialog box, select the target frame from the Frame menu.
Click the Get Current HTML button to copy the current contents of the target frame’s body section.
Enter a message in the New HTML box.
Click OK and verify that the default event is correct.

Apply the Set Text Of Container behavior

The Set Text Of Container behavior replaces the content and formatting of an existing container (that is, any element that can contain text or other elements) on a page with the content you specify. The content can include any valid HTML source code.

Example:

The URL for this page is {window.location}, and today is {new Date()}.

Select an object and select Set Text > Set Text Of Container from the Add Behavior menu of the Behaviors panel.
In the Set Text Of Container dialog box, use the Container menu to select the target element.
Enter the new text or HTML in the New HTML box.
Click OK and verify that the default event is correct.

Apply the Set Text Of Status Bar behavior

The Set Text Of Status Bar behavior shows a message in the status bar at the lower-left corner of the browser window. For example, you can use this behavior to describe the destination of a link in the status bar instead of showing the URL associated with it. Visitors often ignore or overlook messages in the status bar (and not all browsers provide full support for setting the text of the status bar); if your message is important, consider displaying it as a pop‑up message or as the text of an AP element.

Note:

If you use the Set Text Of Status Bar behavior in Dreamweaver, the text of the status bar in the browser is not guaranteed to change because some browsers require special adjustments when changing status bar text. Firefox, for example, requires that you change an Advanced option that lets JavaScript change status bar text. For more information, see your browser’s documentation.

Example:

The URL for this page is {window.location}, and today is {new Date()}.

Select an object and choose Set Text > Set Text Of Status Bar from the Add Behavior menu of the Behaviors panel.
In the Set Text Of Status Bar dialog box, type your message in the Message box.

Keep the message concise. The browser truncates the message if it doesn’t fit in the status bar.
Click OK and verify that the default event is correct.

Apply the Set Text Of Text Field behavior

The Set Text Of Text Field behavior replaces the content of a form’s text field with the content you specify.

Example:

The URL for this page is {window.location}, and today is {new Date()}.

Create a named text field

Select Insert > Form > Text Field.

If Dreamweaver prompts you to add a form tag, click Yes.
In the Property inspector, type a name for the text field. Make sure the name is unique on the page (don’t use the same name for multiple elements on the same page, even if they’re in different forms).

Apply Set Text Of Text Field

Select a text field and choose Set Text > Set Text Of Field from the Add Behavior menu of the Behaviors panel.
Select the target text field from the Text Field menu and enter your new text.
Click OK and verify that the default event is correct.

Apply the Show-Hide Elements behavior

The Show-Hide Elements behavior shows, hides, or restores the default visibility of one or more page elements. This behavior is useful for displaying information as the user interacts with the page. For example, as the user moves the pointer over an image of a plant, you could show a page element giving details about the plant’s growing season and region, how much sun it needs, how large it can grow, and so on. The behavior only shows or hides the pertinent element—it does not actually remove the element from the flow of the page when it is hidden.

Select an object and select Show-Hide Elements from the Add Behavior menu of the Behaviors panel.

If Show-Hide Elements is unavailable, you probably have an AP element selected. Because AP elements do not accept events in both 4.0 browsers, you must select a different object—such as the <body> tag or a link (<a>) tag.
From the Elements list, select the element you want to show or hide and click Show, Hide, or Restore (which restores the default visibility).
Repeat step 2 for all remaining elements whose visibility you want to change. (You can change the visibility of multiple elements with a single behavior.)
Click OK and verify that the default event is correct.

This behavior has been deprecated as of Dreamweaver CS5.

Apply the Swap Image behavior

The Swap Image behavior swaps one image for another by changing the src attribute of the <img> tag. Use this behavior to create button rollovers and other image effects (including swapping more than one image at a time). Inserting a rollover image automatically adds a Swap Image behavior to your page.

Note:

Because only the src attribute is affected by this behavior, you should swap in an image that has the same dimensions (height and width) as the original. Otherwise, the image you swap in shrinks or expands to fit the dimensions of the original image.

There is also a Swap Image Restore behavior, which restores the last set of swapped images to their previous source files. This behavior is automatically added whenever you attach the Swap Image behavior to an object; if you leave the Restore option selected while attaching Swap Image, you should never need to select the Swap Image Restore behavior manually.

Select Insert > Image or click the Image button on the Insert panel to insert an image.
In the Property inspector, enter a name for the image in the leftmost text box.

It isn’t mandatory to name images; they’re named automatically when you attach the behavior to an object. However, it is easier to distinguish images in the Swap Image dialog box if you name all the images beforehand.
Repeat steps 1 and 2 to insert additional images.
Select an object (generally the image you’re going to swap) and choose Swap Image from the Add Behavior menu of the Behaviors panel.
From the Images list, select the image whose source you want to change.
Click Browse to select the new image file, or enter the path and filename of the new image in the Set Source To box.
Repeat steps 5 and 6 for any additional images you want to change. Use the same Swap Image action for all the images you want to change at once; otherwise, the corresponding Swap Image Restore action won’t restore all of them.
Select the Preload Images option to cache the new images when the page is loaded.

This prevents downloading delays when it is time for the images to appear.
Click OK and verify that the default event is correct.

Apply the Validate Form behavior

The Validate Form behavior checks the contents of specified text fields to ensure that the user has entered the correct type of data. Attach this behavior to individual text fields with the onBlur event to validate the fields as the user is filling out the form, or attach it to the form with the onSubmit event to evaluate several text fields at once when the user clicks the Submit button. Attaching this behavior to a form prevents the submission of forms with invalid data.

Select Insert > Form or click the Form button in the Insert panel to insert a form.
Select Insert > Form > Text Field or click the Text Field button in the Insert panel to insert a text field.

Repeat this step to insert additional text fields.
Choose a validation method:
- To validate individual fields as the user fills out the form, select a text field and select Window > Behaviors.
- To validate multiple fields when the user submits the form, click the <form> tag in the tag selector at the lower-left corner of the Document window and choose Window > Behaviors.
Select Validate Form from the Add Behavior menu.
Do one of the following:
- If you are validating individual fields, select the same field that you selected in the Document window from the Fields list.
- If you are validating multiple fields, select a text field from the Fields list.
Select the Required option if the field must contain some data.
Select one of the following Accept options:

Use Anything

Checks that a required field contains data; the data can be of any type.

Use E‑mail address

Checks that the field contains an @ symbol.

Use Number

Checks that the field contains only numerals.

Use Number From

Checks that the field contains a number in a specific range.
If you have chosen to validate multiple fields, repeat steps 6 and 7 for any additional fields that you want to validate.
Click OK.

If you are validating multiple fields when the user submits the form, the onSubmit event automatically appears in the Events menu.
If you are validating individual fields, check that the default event is onBlur or onChange. If not, select one of those events.

Both events trigger the Validate Form behavior when the user moves away from the field. The difference is that onBlur occurs whether or not the user has typed in the field, and onChange occurs only if the user changed the contents of the field. The onBlur event is preferred if the field is required.

More like this

Adobe

Get help faster and easier

New user?

Apply built‑in JavaScript behaviors

Use built‑in behaviors

Apply the Call JavaScript behavior

Apply the Change Property behavior

Apply the Check Plugin behavior

Apply the Drag AP Element behavior

Gather information about the draggable AP element

Apply the Go To URL behavior

Apply the Jump Menu behavior

Apply the Jump Menu Go behavior

Apply the Open Browser Window behavior

Apply the Popup Message behavior

Apply the Preload Images behavior

Apply the Set Text Of Frame behavior

Apply the Set Text Of Container behavior

Apply the Set Text Of Status Bar behavior

Apply the Set Text Of Text Field behavior

Create a named text field

Apply Set Text Of Text Field

Apply the Show-Hide Elements behavior

Apply the Swap Image behavior

Apply the Validate Form behavior

More like this

Get help faster and easier

Ask the Community

Contact Us