blog-tutorial-post-template

Tutorials

Setup

After adding the stack to the editor, select it and in the Toggle Actions > Type setting select either the “Show / Hide” or “Opacity / Visibility” option.

Note that the stack has two possible states. The first and default state is “Disabled”. This is the active state when the toggle is set to the left.

The second state is “Enabled”. This is the active state when the toggle is set to the right.

In the editor you will see two “Drop stacks here” sections. Each sections is controlled by an opposite state.

When using the Show / Hide action: Anything placed into the “Disabled” section will only be visible when the toggle is in the disabled state. Likewise, anything placed into the “Enabled” section will only be visible when the toggle is in the enabled state. If you only wish to display content when the toggle is in the enabled state, do not place any stack content into the “Disabled” section.

When using the Opacity / Visibility action: Anything placed into the “Disabled” section will be visible when the toggle is disabled and anything in the “Enabled” section will only be partially visible. When the toggle is enabled the opposite will be true. The opacity of the inactive state can be set in the Toggle Actions > Opacity setting. If you only wish to change the opacity of a single section of content, do not place any stack content into the “Disabled” section.

By default the toggle will be in the disabled state when the page is loaded. You can choose to have the toggle in the enabled state by turning on the Toggle Styles > Start enabled option.

For information about styling the toggle see the Toggle Styles section below.

Toggle Styles

Size: This setting adjust the over all size of the toggle graphic.

Type: Choose from 5 different toggle types. Each type functions the same and this setting only adjust the appearance of the toggle.

Style: Choose from 3 different styles. Each style modifies the appearance of the toggle based on the selected toggle type.

Shape: Adjust the rounding of the toggle.

Align: Change the alignment of the toggle based on the available space to the left and right.

High contrast: Turn this on to adjust the contrast of the shadows. This should be enabled if you are using a dark color background or dark color toggle background. This setting is only available when using the “Detailed” Style option.

Show labels: Turn this on to add text labels or images to the left and right of the toggle.

Start enabled: Turn this on to change the default state of the toggle to enabled.

Colors:

Actions by Class

The Toggle Actions > Type setting’s “Show / Hide” and “Opacity / Visibility” options are an easy way setup up content that is directly below the toggle. If you want to place the toggle somewhere away from the content use the “Show / Hide by Class” or “Opacity / Visibility by Class” options.

When these options are selected there will not be any sections for you to add the disabled and enabled content to. Instead you will need to define the content by adding classes. In the Toggle Actions > Class setting you can define a custom class name for both the enable and disabled states. These class names should be unique and cannot contain any spaces or special characters other than dashes and underscores.

Examples of usable class names:

my-unique-class-on
my-unique-class-off

my_unique_class_on
my_unique_class_off

myUniqueClassOn
myUniqueClassOff

After creating a class name for each state you can then add them to relevant stacks content. If you are using Stacks 4, select any stack you want to apply the toggle action to and add the class name to the HTML > CSS classes setting.

Alternatively, you can download this free class stack that will allow you to define a class name to any stacks content placed inside of it.

When using the Show / Hide by Class action: Any stack or element with the defined “Enabled” class (my-unique-class-on in this example) will only show when the toggle is in the enabled state. Likewise, Any stack or element with the defined “Disabled” class (my-unique-class-off in this example) will only show when the toggle is in the disabled state.

When using the Opacity / Visibility by Class action: Any stack or element with the defined “Enabled” class (my-unique-class-on in this example) will be visible when the toggle is disabled and any stack or element with the defined “Disabled” class (my-unique-class-off in this example) will only be partially visible. When the toggle is enabled the opposite will be true.

Adding a Class by Class

The Toggle Actions > Type setting “Adding a Class by Class” option will allow you to use the toggle to modify the appearance of any element on your stacks page. This setting is useful for those who are familiar with CSS and want to define custom styles, animations, or effects based on the toggle state.

In the Toggle Actions > Target class field you will need to add the class name of the stacks or elements you want to apply the style, animation, or effect to. Below that in the Add class field you will need to define the class name to be added to those target stacks or elements. This class will be added based on the current state of the toggle. In the enabled state the class will be added and in the disabled state the class will be removed.

.my-unique-class {
  height: 0;
  overflow: hidden;
  transition: all 300ms linear;
}
.my-unique-class.enabled {
  height: 500px;
}

Adding the CSS above to the Page Inspector > HTML > CSS section will make any element with the class name “my-unique-class” collapse or expand into view based on the toggle state.

Custom jQuery/Javascript (Advanced)

The Toggle Actions > Type setting “Custom jQuery/Javascript” option is only meant for users who are familiar with jQuery or Javascript. There are two definable functions that are executed when the toggle is enabled or disabled. When the page is loaded the function related to the default state will execute.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software