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.

Horizontal Scroller by PVII

The Horizontal Scroller by PVII is a dedicated extension designed to smoothly scroll a layer from left to right… or from right to left. The script senses the user's Operating System and optimizes speed and frame rate. Additionally, the scrolling layer's precise width is calculated on the fly so your content always scrolls to its end.

Download the Horizontal Scroller by PVII extension

Overview

While the Horizontal scroller will scroll any layer on your page, it is usually best to scroll a layer that is contained within a parent layer (a nested layer). The parent layer should have a clipping rectangle defined that will act as the "viewport" for the scrolling layer.

Creating a Horizontal Scroller by PVII behavior

  1. Select (click) an image or null link that will act as the trigger for the behavior.
  2. Click the plus button (+) on the Behaviors Panel.
  3. Choose Studio VII - Horizontal Scroller by PVII to open the interface.
  4. Select a layer that you wish to act on.
  5. Select and set the options to define the scroller action.
  6. Click OK to apply the behavior.

Modifying an existing Horizontal Scroller by PVII behavior

  1. Select the button, link or event that contains an existing Horizontal Scroller behavior.
  2. Double-click the Horizontal Scroller behavior in the Behavior Panel to open the user interface.
  3. Select and set the options to redefine the scroller action.
  4. Click OK to apply the revised behavior.

The Interface:

The Horizontal Scroller by PVII interface allows you to set the direction and speed of the scroller as well as applying all of the scroller attributes at any time.

Horizontal Scroller User Interface

Layer Name

Select the layer you want to scroll. All layers on your page will be shown and any layer can be selected. When a nested layer is selected, the movement will always be relative to that layer's parent.

Scrolling Boundaries

There are two position entries that you must make. The scroller works with these two positions to identify the leftmost and rightmost scrolling limits. When the scrolling layer hits these positions it will automatically stop. Think of the positions as the viewing boundary. When using the scrolling layer as a nested layer whose parent has a clipping rectangle defined, then the two positions would usually correspond to the left and right clip values of the parent layer.

1. Left Starting Position

The Left Starting position should typically be the Scrolling Layer's default Left Position (as defined in the layer's style properties). The layer will not scroll beyond this position. When a nested layer is selected, the position and movement will always be relative to that layer's parent.

2. Ending Offset

This is the distance measured between the Start Position and the point where scrolling ends. When the Scrolling Layer's right edge hits this position it will stop moving. If this value is set to zero, the layer will scroll until its right edge hits the Start Position- in other words, all the content in the Scroller will disappear just beyond the left boundary. If, for example, the Ending Offset is set to 400, the layer will scroll until its right edge is 400px from the Start Position- revealing 400 pixels of its content. When a nested layer is selected, the position and movement will always be relative to that layer's parent.

Scroll Direction

Select the desired scrolling direction. The layer will scroll in that direction until the target position is reached or, until another Horizontal Scroller event changes the action. The left and right direction methods correspond to the action you normally see on your Operating System scrollbars.

Note: In Window or Mac OS: When you hold down the right pointing scrollbar control, the content appears to move to the left. What is actually happening is this: the content remains where it's at and the view port shifts to the right revealing more and more content. We think this is the best and most intuitive approach and that's the way we set up our scrollers. You are, however, free to make a paradigm shift based on your personal preferences

Left

This method will start the selected layer moving towards the right direction. This is usually placed on the left facing arrow button or the Left link. The scroller will continue to move in this direction until another Horizontal Scroller event is run that sets a new method (direction change) or until its left edge hits the defined Start Position.

Right

This method will start the selected layer moving towards the left direction. This is usually placed on the right facing arrow button or the Right link. The scroller will continue to move in this direction until another Horizontal Scroller event is run that sets a new method (direction change) or until its right edge hits the defined Ending Offset position.

Stop

This method is used to instantly stop the scrolling movement of the selected layer. The Start Position, Ending Offset and Scroll Speed settings are ignored when the Stop method is selected.

Reset

Select the Reset setting when you want to instantly move the scroller to its start position, or any other position. There will be no movement animation, the layer is immediately placed at the Start Position you specify. The Ending Offset and Scroll Speed settings are ignored when the Stop method is selected.

Scroll Speed

This sets the scrolling speed of the selected layer. The Horizontal Scroller will automatically adjust the speed settings based on the user's Operating System, adjusting for the inherent running speed of the OS to assure that scrolling speed will be somewhat equivalent regardless of the OS.

Select one of these speeds:

Slow

Select the Slow speed when you want to allow the user to read (or view) the contents without having to stop and restart the scroller. This would be useful if you set your scroller to start automatically with a <body> onLoad event.

Medium

This is the default speed setting that appears when you open the Horizontal Scroller window. Medium is usually best for most scrolling situations

Fast

Select this speed when you are using the scroller to perform an animation. For example, use a fast scroll in place of the Reset function to produce an animated effect. This speed is not recommended for normal scrolling

Warp

Select the Warp setting when you want to instantly move the scroller to its end or start position. There will be no movement animation, the layer will instantly move in the Direction you specify until it's starting or ending point is reached. Warp is handy if you want to have a "Go to End" control as it can be used to achieve the direct opposite of the Reset function.

Horizontal Scroller | back to main listing