Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Swap Class by PVII

The swapClass by PVII behavior allows you to quickly and efficiently manage CSS class name changes to many elements on your page. This allows you to create user interactivity using CSS-based style definitions. SwapClass will work in modern browsers that support CSS Class Name changes, like IE5+ and Netscape 6+. Older browsers, like Netscape4, will be unaffected by the swapClass events and will simply render the page based on the initial style sheet.

Note: While Opera 5,6 supports most CSS2 style properties, it is still lacking in support for many dynamic interactions and does not support className changes.

Download Swap Class | See Swap Class Examples | Menu Tutorial

Overview

SwapClass by PVII works by automatically changing (swapping) the class name assigned to elements on your page to another class name that you select. SwapClass scans your page for all elements that are assigned to the "Swap From" class and changes the class assignment to the "Swap To" class. You also control the scope of the swapping by selecting one or more specific html element(s) that will be scanned. This allows you to actually use the class name on other elements on your page without being affected by the swap.

SwapClass also allows you to select a specific element (by selecting its id) to receive a direct class name change while still swapping all other instances. This is ideal for managing CSS-based menus or other presentations.

A nifty "Toggle" feature is built in to allow you to automatically switch the class being swapped each time the event is triggered. This allows the user to repeatedly fire the event, each time the swapping is reversed.

SwapClass can be triggered by any element on the page that supports an event trigger. In modern browsers most of the elements on the page can be used as a trigger. In addition to the normal event triggers, null link, image, image map, you can also use most html tags, for example <p>, <div>, <h1>, <h2>, etc.. The behavior on these tags can be set to fire onMouseOver, onClick, onMouseOut just like the usual triggers.

To access the full range of element triggers and events set the Behavior panel to display the events for IE5.0 Click the plus sign(+) on the Behavior Panel, then Choose Show Events For IE 5.0

Creating a swapClass by PVII event

  1. Select (click) an element that will act as the trigger for the behavior.
  2. Click the plus button (+) on the Behaviors Panel.
  3. Choose Studio VII - CSS - swapClass by PVII to open the interface.
  4. Select a Swap From class.
  5. Select a Swap To class
  6. Select one or more tags in the Tags to Use listing.
  7. Optionally set the Element to Use and Toggle boxes
  8. Click OK to apply the behavior.

Modifying an existing swapClass by PVII behavior

  1. Select the element that contains an existing swapClass by PVII behavior.
  2. Double-click the swapClass behavior in the Behavior Panel to open the user interface.
  3. Select and set the options to redefine the swapClass actions.
  4. Click OK to apply the revised behavior.

The Interface:

The swapClass by PVII interface allows you to easily set or modify the class name selections and all options at any time.

User Interface

Swap From

This listing shows all of the CSS class names that are on your page or defined in any style sheets that are linked to your page. Select the class name that you wish to change. All of the elements on your page that are set to this class will be automatically changed to use the class you select in the "Swap To" box.

Swap To

This listing shows all of the CSS class names that are on your page or defined in any style sheets that are linked to your page. Select the class name that you wish to change to. All of the elements on your page that are set to the "Swap From" class will be automatically changed to use this class.

Tag To Use

SwapClass allows you to limit the class changes (swaps) to only the elements that are contained in the html tags you specify. The class swapping will only occur for tags that you select. This allows you to swap class names in one set of tags, <div class="foo"> for example, without affecting other elements on the page that are also set to that class, <p class="foo"> for example. All of the html tags currently on your page are listed here, if you add more elements they will appear in this listing the next time you open the swapClass behavior. You must select at least one tag, although you can select as many as you like.

Select Tag

Click this button to add a tag to the selection list. The word "(Selected)" will appear to the right of the tag name.

Deselect Tag

Click this button to remove a "Selected" tag. The word "(Selected)" will no longer appear to the right of the tag name.

Set This Element

In addition to swapping the classes, you can also select a specific html element to receive a direct class name change. All of the elements on your page that contain an id (<p id="abc">) will be listed here. This feature allows you to set a specific element to the "Swap From" class, while still automatically swapping all other elements to the "Swap To" class.

None

Select "none" if you do not wish to use this feature.

Select an id

Select one of the id's in this listing. All of the normal class swapping will occur based on the class selections made in the "Swap From" and "Swap To" boxes. Additionally, the element that is set to the selected id will receive a direct class name change to the class that is selected in the "Swap From" box.

Toggle Option

The Toggle Option will switch the "Swap From" and "Swap To" classes each time the event is triggered. If an id is selected in the "Set This Element" box, then only the element with that id will use the toggle feature, the other elements will receive a standard swap.

Swap Class | back to main listing