Accessing CSS Class Changer

There are 4 ways to access SCS Choose the one most suitable to your workflow. When you open the interface, the system will detect the appropriate mode (Insert or Modify) based on where your cursor is.

When you are Creating a new SCS instance, place your cursor inside the element you wish to trigger the SCS effect. If Modifying an existing instance, place your cursor anywhere inside the triggering element and use one of the 4 methods below to open the UI. The system will always open in the correct mode.

1. Insert Bar

Switch to the PVII category. SCS is the last icon in the screen capture below

Note: If you would like to revise the classic Insert Bar in newer versions of Dreamweaver, please see this tutorial

2. Insert Panel

Switch to the PVII category. SCS is the last icon in the screen capture below

3. Insert Menu

Choose Insert > Studio VII > Style Class Switcher by PVII

If your cursor is not inside another SCS instance, the main UI will open in Create Mode.

If your cursor is inside an existing menu, you will get an intermediary screen asking if you'd like to modify the existing SCS instance or create a new, nested instance:

Note: Nesting is discussed below in its own topic.

If you click the Modify button, the UI will open in Modify mode:

4. Right-Click

Place your cursor inside your desired trigger and right-click. Choose PVII Style Class Switcher.

SCS has Remote Control Capabilities...

SCS can also be configured to assign disjointed effects. That is, a click, a tap, or a hover on one element can switch classes on an element elsewhere on your page. Consider this:

You have a considerable amount of additional information relevant to a particular topic on your page. The information is such that only some visitors will want to see that information. Using CSS Class Switcher you can easily keep that information hidden until an interested party click (or taps) a link to access it.

We also want to dress up the trigger link in some fancy duds. Let's start there.

Make a trigger link

Type the words Additional Info... on your page, then turn it into a null link. In code view it will look like this:

<a href="#">Additional Info...</a>

Create the CSS rules for the trigger. For this exercise, we will leverage the power of the Mark Active State option in the SCS UI. When this option is turned on, the triggering element is assigned a special class when the effect is running: scs-active.

Copy the rules below to your style sheet:

.more-info-active {
/*Set up an animation*/
transition: all ease-in-out 1.5s;
color: inherit;
}
.more-info-active.scs-active {
/*Set link text color*/
color: #69C;
}
.more-info-active:before {
/*Place a right-facing arrow before the link*/
content: "\25BA";
}
.more-info-active.scs-active:before {
/*Place a down-pointing arrow before the link
when the SCS effect is in the active state */
content: "\25BC";
}

Assign the more-info-active class to your trigger link:

<a href="#" class="more-info-active">Additional Info...</a>

The targeted element

Let's do the CSS rules that affect the targeted element. For a disjointed effect, we need to ID the targeted element so that the SCS script can identify it. Let's use the ID more-info:

CSS Rule #1

#more-info {
transition: all ease 0.25s;
line-height: 0;
opacity: 0;
}

The more-info ID is assigned to the target information. In this case, a paragraph. IDs can be assigned via the Property Inspector or directly in code. Here is what the target paragraph looks like n Code View after assigning the ID:

<p id="more-info">And this is more information, which was triggered by a CSS Class Switcher effect! In this case, the effect is <strong>disjointed</strong>, meaning that it is assigned to a link that when clicked will assign a class to another element on the page. When you clicked or tapped the <strong>Additional Info...</strong> link, this paragraph is assigned the <strong>triggered</strong> class, which makes it appear!</p>

Fixing Dreamweaver Design View and Browsers with JavaScript Disabled

The SCS UI adds a special class to the SCS trigger and the targeted element (where applicable) called scs-noscript. When the page is run in a browser that supports JavaScript, the scs-noscript class is removed. This allows you to add special style rules that allow your content to be accessible in devices that do not support JavaScript. As an added benefit, this also allows you to fix issues in Dreamweaver Design View.

CSS Rule #2

.scs-noscript#more-info {
/*Dreamweaver Design View and devices not supporting script will display the additional information fully*/
line-height: 1;
opacity: 1;
}

CSS Rule #3

#more-info.triggered {
line-height: 1.25;
opacity: 1;
}

The triggered class is the class assigned to the paragraph by SCS, when the Additional Info... link is clicked or tapped. We set up the effect by creating the trigger link, which we do by typing the words: Additional Info... selecting them, and making them a null link (#).

<p><a href="#">Additional Info...</a></p>

We then place our cursor inside the linked text and open the SCS UI:

Set your options exactly as they appear in the above screen capture.

Demo

Click the Additional Info link below to see the effect.

Additional Info...

And this is more information, which was triggered by a CSS Class Switcher effect! In this case, the effect is disjointed, meaning that it is assigned to a link that when clicked will assign a class to another element on the page. When you clicked or tapped the Additional Info... link, this paragraph is assigned the triggered class, which makes it appear! While we chose to hide and show a paragraph, you can just as easily use a DIV, in which case, your additional info can contain mixed content, such as images, lists, and even forms!

Would you like to learn how to orchestrate an ultra-cool animation effect?

Of course you would. Read on, please...

Orchestrating Cool Animations with SCS

As you surely noticed, there is a really neat animation effect on the CSS Class Switcher home page. Let's see how it was done.

Note: If you'd like to use our image, right click this link and save the image to a folder inside your local Dreamweaver site. You can, however, use any image you like. Note also, that because this page was made using PVII Harmony, all images are automatically responsive. Yours might not be if your page was laid out using Dreamweaver's page building tools, so do be mindful of your image's size.

The code for this effect is extremely simple.

1. Copy the block below to your page in Code View:

<div class="criss-cross>
<p><img src="../images/shot-1.png" width="800" height="450" alt=""></p>
<div class="caption">
<p><strong>CSS Class Switcher is a powerful tool.</strong> The effects you can create and orchestrate are limited only by your imagination!</p>
</div>
</div>

Adjust the image name and path if needed.

2. Add the Necessary CSS Rules to your style sheet:

/*The animation container.*/
.criss-cross {
overflow: hidden;
position: relative;
padding: 20px;
border-left: 1px dotted;
border-right: 1px dotted;
}
/*Reset margins inside all paragraphs within the container.*/
.criss-cross p {
margin: 6px 0px;
}
/*The Caption element which slides down. This element is a DIV and can contain any type of content, including paragraphs, links, and even images. A CSS transition is set for the transform and opacity properties. The initial animation state sets a vertical translate (offset) of -600px and opacity to zero (totally transparent). The element is absolutely positioned with a bottom position of 10px.*/
.criss-cross .caption {
transition: transform ease-out 1s, opacity linear 1s;
transform: translateY(-600px);
opacity: 0;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
padding: 0px 10px;
color: inherit;
font-size: 140%;
}
/*SCS will set the class of this element to running when the criss-cross element is hovered over or tapped, which will trigger the animation. Offset (translateY) will rest the vertical position of the element to zero and opacity will be set to 1 (fully opaque). When your cursor moused off the element (or when it is tapped again), the animation will reverse.*/
.running .caption {
transform: translateY(0px);
opacity: 1;
}
/*The image inside the container is set to animate the transform and opacity properties: the same properties used for the caption animation.*/
.criss-cross img {
transition: transform ease-out 1s, opacity ease .5s;
transform: translateY(0);
opacity: 1;
border-radius: 5px;
display: block;
}
/*When SCS assigns the running class, the image will translate vertically upwards (-600px) and opacity will cause it to fade out to zero (fully transparent).*/
.criss-cross.running img {
transform: translateY(-600px);
opacity: 0;
}
/*When SCS is assigned to the criss-cross container, a class of scs-noscript is automatically assigned. This class allows you to make your animated content acessible in browsers that do not support JavaScript and also to make sure your content is easily editable in Dreamweaver Design View.*/
.criss-cross.noscript,
.criss-cross.scs-noscript .caption,
.criss-cross.scs-noscript img {
position: static;
}

3. Set up the SCS Effect

Open the SCS UI:

Make sure the Trigger Element is <div class="criss-cross">

Assign your SCS options exactly as they appear in the above screen capture.

Click OK

Demo

Mouse over or tap the image below to see the effect.