User Guide Cancel

Use JavaScript behaviors (general instructions)

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Use JavaScript behaviors in Adobe Dreamweaver to place JavaScript code in documents so visitors can change a web page or initiate certain tasks.

Adobe Dreamweaver behaviors place JavaScript code in documents so that visitors can change a web page in various ways or initiate certain tasks. A behavior is a combination of an event and an action triggered by that event. In the Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that triggers that action.

Note:

Behavior code is client-side JavaScript code; that is, it runs in browsers, not on servers.

Events are, effectively, messages generated by browsers indicating that a visitor to your page has done something. For example, when a visitor moves the pointer over a link, the browser generates an onMouseOver event for that link; the browser then checks whether it should call some JavaScript code (specified in the page being viewed) in response. Different events are defined for different page elements; for example, in most browsers onMouseOver and onClick are events associated with links, whereas onLoad is an event associated with images and with the body section of the document.

An action is pre-written JavaScript code for performing a task, such as opening a browser window, showing or hiding an AP element, playing a sound, or stopping an Adobe Shockwave movie. The actions provided with Dreamweaver provide maximum cross-browser compatibility.

After you attach a behavior to a page element, the behavior calls the action (JavaScript code) associated with an event whenever that event occurs for that element. (The events that you can use to trigger a given action vary from browser to browser.) For example, if you attach the Popup Message action to a link and specify that it will be triggered by the onMouseOver event, then your message pops up whenever someone places the pointer over that link.

A single event can trigger several different actions, and you can specify the order in which those actions occur.

Dreamweaver provides about two dozen actions; additional actions can be found on the Exchange website at www.adobe.com/go/dreamweaver_exchange as well as on third-party developer sites. You can write your own actions if you are proficient in JavaScript.

Note:

The terms behavior and action are Dreamweaver terms, not HTML terms. From the browser’s point of view, an action is just like any other piece of JavaScript code.

Behaviors panel overview

You use the Behaviors panel (Window > Behaviors) to attach behaviors to page elements (more specifically to tags) and to modify parameters of previously attached behaviors.

Behaviors that have already been attached to the currently selected page element appear in the behavior list (the main area of the panel), listed alphabetically by event. If several actions are listed for the same event, they will be executed in the order in which they appear on the list. If no behaviors appear in the behavior list, no behaviors have been attached to the currently selected element.

The Behaviors panel has the following options:

Show Set Events

Displays only those events that have been attached to the current document. Events are organized into client-side and server-side categories. Each category’s events are in a collapsible list. Show Set Events is the default view.

Show All Events

Displays an alphabetical list of all events for a given category.

Add Behavior (+)

Displays a menu of actions that can be attached to the currently selected element. When you select an action from this list, a dialog box appears in which you can specify parameters for the action. If all the actions are dimmed, no events can be generated by the selected element.

Remove Event (–)

Removes the selected event and action from the behavior list.

Up and down arrow buttons

Move the selected action up or down in the behavior list for a particular event. You can change the order of actions only for a particular event—for example, you can change the order in which several actions occur for the onLoad event, but all the onLoad actions stay together in the behavior list. The arrow buttons are disabled for actions that can’t be moved up or down in the list.

Events

Displays a pop‑up menu, visible only when an event is selected, of all the events that can trigger the action (this menu appears when you click the arrow button next to the selected event name). Different events appear depending on the object selected. If the events you expect don’t appear, make sure that the correct page element or tag is selected. (To select a specific tag, use the tag selector at the lower-left corner of the Document window.)

Note:

Event names in parentheses are available only for links; selecting one of these event names automatically adds a null link to the selected page element, and attaches the behavior to that link instead of to the element itself. The null link is specified as href="javascript:;" in the HTML code.

About events

Each browser provides a set of events that you can associate with the actions listed in the Behavior panel’s Actions (+) menu. When a visitor to your web page interacts with the page—for example, by clicking an image—the browser generates events; those events can be used to call JavaScript functions that perform an action. Dreamweaver supplies many common actions that you can trigger with these events.

For names and descriptions of the events provided by each browser, see the Dreamweaver Support Center at www.adobe.com/go/dreamweaver_support.

Different events appear in the Events menu depending on the selected object. To find out what events a given browser supports for a given page element, insert the page element in your document and attach a behavior to it, then look at the Events menu in the Behaviors panel. (By default, events are drawn from the HTML 4.01 events list, and are supported by most modern browsers.) Events may be disabled (dimmed) if the relevant objects do not yet exist on the page or if the selected object cannot receive events. If the expected events don’t appear, make sure the correct object is selected.

If you’re attaching a behavior to an image, some events (such as onMouseOver) appear in parentheses. These events are available only for links. When you select one of them, Dreamweaver wraps an <a> tag around the image to define a null link. The null link is represented by javascript:; in the Property inspector’s Link box. You can change the link value if you want to turn it into a real link to another page, but if you delete the JavaScript link without replacing it with another link, you will remove the behavior.

To see which tags you can use with a given event in a given browser, search for the event in one of the files in the Dreamweaver/Configuration/Behaviors/Events folder.

Apply a behavior

You can attach behaviors to the entire document (that is, to the <body> tag) or to links, images, form elements, and several other HTML elements.

The target browser you select determines which events are supported for a given element.

You can specify more than one action for each event. Actions occur in the order in which they’re listed in the Actions column of the Behaviors panel, but you can change that order.

  1. Select an element on the page, such as an image or a link.

    To attach a behavior to the entire page, click the <body> tag in the tag selector at the lower-left corner of the Document window.

  2. Choose Window > Behaviors.
  3. Click the Plus (+) button and select an action from the Add Behavior menu.

    Actions that are dimmed in the menu can’t be chosen. They may be dimmed because a required object doesn’t exist in the current document. For example, the Control Shockwave or SWF action is dimmed if the document contains no Shockwave or SWF files.

    When you select an action, a dialog box appears, displaying parameters and instructions for the action.

  4. Enter parameters for the action, and click OK.

    All actions provided in Dreamweaver work in modern browsers. Some actions do not work in older browsers, but they will not cause errors.

    Note:

    Targeted elements require a unique ID. For example, if you want to apply the Swap Image behavior to an image, the image requires an ID. If you don’t have an ID specified for the element, Dreamweaver automatically specifies one for you.

  5. The default event to trigger the action appears in the Events column. If this is not the trigger event you want, select another event from the Events pop‑up menu. (To open the Events menu, select an event or action in the Behaviors panel, and click the downward-pointing black arrow that appears between the event name and the action name.)

Change or delete a behavior

After attaching a behavior, you can change the event that triggers the action, add or remove actions, and change parameters for actions.

  1. Select an object with a behavior attached.
  2. Choose Window > Behaviors.
  3. Make your changes:
    • To edit an action’s parameters, double-click its name, or select it and press Enter (Windows) or Return (Macintosh); then change parameters in the dialog box and click OK.

    • To change the order of actions for a given event, select an action and click the Up or Down arrow. Alternatively, you can select the action and cut and paste it into the desired location among the other actions.

    • To delete a behavior, select it and click the Minus (–) button or press Delete.

Update a behavior

  1. Select an element that has the behavior attached to it.
  2. Choose Window > Behaviors and double-click the behavior.
  3. Make your changes and click OK in the behavior’s dialog box.

    All occurrences of that behavior in that page are updated. If other pages on your site have that behavior, you must update them page by page.

Download and install third‑party behaviors

Many extensions are available on the Exchange for Dreamweaver website (www.adobe.com/go/dreamweaver_exchange).

  1. Choose Window > Behaviors and select Get More Behaviors from the Add Behavior menu.

    Your primary browser opens, and the Exchange site appears.

  2. Browse or search for packages.
  3. Download and install the extension package you want.

For more information, see Add and manage extensions in Dreamweaver.

 Adobe

Get help faster and easier

New user?