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.

Project Seven dot com
Search
 

MultiClass 2 by PVII

The MultiClass2 by PVII behavior allows you to set up a series of style changes all within one event. This allows you to create user interactivity using CSS-based style definitions. MulitClass2 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 MultiClass2 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. Opera 7 (and higher) works fine.

Download the Multi-Class 2 extension

Overview

MultiClass2 by PVII works by automatically changing the class name assigned to elements on your page to another class name that you select. You can apply a style change to just about any "named" (id) element on the page. Elements are named by setting its id. For example, <td id="mn1"> assigns an id name of "mn1" to this <td> tag. Once named, the id will appear in the "Object Id" list in the MultiClass2 interface.

Class names are custom CSS styles that you create in your style sheet to control the various style properties such as size, font, color, positioning, visibility, margins and much more. MultiClass2 will list all of the class names that are in the style sheet, including those in all linked styles sheets.

MultiClass2 by PVII allows you to select any number of named elements and individually assign each to a specific class name.

MultiClass2 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.

Note: To access the full range of element triggers and events set the Behavior panel to display the events for IE5.0:

  1. Click the plus sign(+) on the Behavior Panel
  2. Choose Show Events For - IE 5.0

MultiClass2 also includes a special "down state" companion behavior that allows you to set the "downstate" class for any number of elements on the page, regardless of other MultiClass2 events that may reference this element. See the downClass2 by PVII Help file for a complete discussion on this feature.

Creating a MultiClass2 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 - MultiClass2 by PVII to open the interface.
  4. Select a Object Id.
  5. Select a Class Name.

If you want to add more class changes, Click the Add Item button and then repeat Steps 4 and 5.

If you want to Delete a class change, Click the line you wish to delete and then:

  1. Click the Delete Item button.
  2. Click OK to apply the behavior.

Modifying an existing MultiClass2 by PVII behavior

  1. Select the element that contains an existing MultiClass2 by PVII behavior.
  2. Double-click the MultiClass2 behavior in the Behavior Panel to open the user interface.
  3. Select the line you wish to modify and Select the new Object Id and Class Name.
  4. Click OK to apply the revised behavior.

The Interface:

The MultiClass2 by PVII interface allows you to easily set or modify, add or delete the class changes at any time.

Multiclass User Interface

Class Changes

This listing shows all of your defined class changes. The class changes are listed as object id/class name pairs, one pair for each line. You can add as many lines (class changes) as you like and you can delete any line at any time. This listing provides an easy visual reference to all of your defined class changes. To edit any of the lines (class changes), simply click on that line and make the appropriate selections for the Object Id and Class Name boxes.

Object Id

All of the elements on your page that contain an id (<p id="abc">) will be listed here. The element that you select here will automatically be assigned the selected class name. When you first create a new MultiClass2 event, or whenever you create a new line, the default reminder message "Select an Object.." will be shown. Select any of the object ids listed. If you forget to make a selection, MultiClass2 will remind you when click the OK button.

Class Name

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. The element on your page that is set to the selected Object Id will be automatically changed to use this class. When you first create a new MultiClass2 event, or whenever you create a new line, the default reminder message "Select an Class Name.." will be shown. Select any of the class names listed. If you forget to make a selection, MultiClass2 will remind you when click the OK button.

Add Item

Click this button to add a new line, ready to receive another class change definition; Object Id and Class Name. You can add as many class changes as you like. Whenever you create a new line, the default reminder messages "Select an Class Name.." and "Select a Class Name.." will be shown. Be sure to make a selection for each. If you forget to make a selection, MultiClass2 will remind you when click the OK button.

Delete Item

Select the line you wish to delete in the "Class Changes" box and click the Delete button. The class change that was defined will be removed from the listing. You can delete as many lines as you like, although MultiClass2 will insist on keeping at least one line. If you try to delete the only line, MultiClass2 will restore this line to the preset defaults.

Downclass 2 Help | MultiClass2 Help | back to main listing