Vertical Scroller Magic

By PVII

Scrolling its way into your heart.

Project Seven Development

8/31/2007
 PVII Vertical Scroller Magic 2

PVII VERTICAL SCROLLER MAGIC

Vertical Scroller Magic automates the process of building vertical scrolling user interface ( UI )
components. Scrollers can be operated with manual control buttons or played automatically in
one of 4 different modes. Mouse wheel scrolling is also supported in modern browsers.

Vertical Scroller Magic is engaging, standards-based, accessible, user-friendly, and search

engine friendly.

We hope you enjoy using this product as much as we did making it.

Al Sparber & Gerry Jacobsen

PVII

2 ©2007 Project Seven Development

 PVII Vertical Scroller Magic 3

PVII Vertical Scroller Magic ....................................................................................................................................2

Install the extension(s) .............................................................................................................................................6

Work in a Defined Dreamweaver Web Site ..................................................................................................6

Assets folders ..........................................................................................................................................................7

PVII Vertical Scroller Magic Highlights.................................................................................................................8

Interface modes ...................................................................................................................................................8

Insertion ...................................................................................................................................................................8

Keyboard Navigation ..........................................................................................................................................9

Play and Pause .....................................................................................................................................................9

Mouse Wheel Support .......................................................................................................................................10

Drag Bar Support ................................................................................................................................................10

Scrolling Speeds ..................................................................................................................................................11

Scroller Control Behavior ..................................................................................................................................11

Scroller Remove system ....................................................................................................................................11

Inserting a New Vertical Scroller .........................................................................................................................11

Modifying an Existing Vertical Scroller ..............................................................................................................13

Managing the User Interface Items ...................................................................................................................14

Mode .....................................................................................................................................................................14

Scroller Operation ..............................................................................................................................................14

Scroller Box Height ..............................................................................................................................................16

Content Starting Position ..................................................................................................................................16

Scrolling Speed....................................................................................................................................................17

Pause on Mouse Over .......................................................................................................................................18

Auto Start on Page Load ..................................................................................................................................18

Auto Start Delay ..................................................................................................................................................18

3 ©2007 Project Seven Development

 PVII Vertical Scroller Magic 4

Include Show All Link .........................................................................................................................................18

Disable Drag Button ...........................................................................................................................................19

Scroller Style Type ...............................................................................................................................................19

The Interface Control Buttons .........................................................................................................................20

PVII Vertical Scroller Magic -Control Behavior ...............................................................................................21

Overview ...............................................................................................................................................................21

PVII Vertical Scroller Magic - Remove ..............................................................................................................25

Overview ...............................................................................................................................................................25

Style Themes ............................................................................................................................................................28

Chili .........................................................................................................................................................................28

Goldleaf ................................................................................................................................................................31

Carbon ..................................................................................................................................................................34

Vista Aero .............................................................................................................................................................37

Silverstone .............................................................................................................................................................40

L'Orange ...............................................................................................................................................................43

Minimalist ..............................................................................................................................................................46

Questions and Answers .........................................................................................................................................49

Which CSS rules can I safely edit? .................................................................................................................49

How do I set font styles for my scroller's content? .....................................................................................49

My font styles are not showing up, what do I do? ....................................................................................50

Can I remove the beveled background in the Chili scroller box? .......................................................50

Can I change or set a background color for the scroller box? ............................................................50

Can I change the border color or style for my Scroller? .........................................................................51

Can I move my Minimalist control links to the left edge of the scroller? ............................................51

Can I hide the control links in my Minimalist scroller? ...............................................................................51

4 ©2007 Project Seven Development

 PVII Vertical Scroller Magic 5

Can I remove gaps between images in a Carousel scroller? ...............................................................51

Can my looping scroller be "seamless"? ......................................................................................................51

I put my scroller inside a Tab Panel. Why won't it start automatically?...............................................52

I put my scroller inside an Accordion Panel. Why won't it work right in IE? ........................................52

Support and Contact info ....................................................................................................................................53

PVII Knowledge Base .........................................................................................................................................53

5 ©2007 Project Seven Development

 Install the extension(s) 6

INSTALL THE EXTENSION(S)

Look for the extension installer file p7_VSC_105.mxp in the root of the zip archive you
downloaded. Double-click the file to install the extension. Dreamweaver's Extension Manager will
open and you will be prompted to complete the installation. Restart Dreamweaver once the
installation is complete.

OS X users : If, upon double-clicking the installer, Extension Manager does not properly launch,
you have a file association issue. To remedy the problem locate the installer file from inside a
Finder window and double-click it.

WORK IN A DEFINED DREAMWEAVER WEB SI TE

Before you begin, make sure you are working inside a defined Dreamweaver web site - on a
page that is saved within that site. This is necessary so that Dreamweaver knows how to link
required assets to your page. If you are new to Dreamweaver or need to learn how to define a
web site, please see this tutorial: Defining a Dreamweaver Web Site.

6 ©2007 Project Seven Development

 Install the extension(s) 7

ASSETS FOLDERS

When you create your scroller(s), the system generates 2 new folders: Fireworks and p7vscroller .

The Fireworks folder contains 7 editable image documents, each corresponding to one of the 7
included style themes. The file name indicates the style theme number it is used for.

The second folder, p7vscroller , contains a single copy of the system Javascript file
(p7vscscripts.js ) in its root. It also contains up to 7 sub-folders, named s1-s7, that contain the CSS
files and image folders for each theme.

The system will create these folders in the same folder that contains the page in which you
created your scroller(s). Keep that in mind as it is a powerful tool that enables you to create
multiple testing folders in which to play , but you must be mindful of where your relevant assets
folder is when you ultimately publish your page or when you edit assets.

DO I NEED TO UPLOAD THESE FOLDERS TO MY WEB SERVER?

When you publish your page, you need to upload the entire p7vscroller folder. The Fireworks
folder should remain on your local drive only.

7 ©2007 Project Seven Development

 PVII Vertical Scroller Magic Highlights 8

PVII VERTICAL SCROLLER MAGIC HIGHLIGHTS

Vertical Scroller Magic is rich in features, usable, accessible, and based on valid web standards.
When deploying with default options, your scroller will not only be visually engaging and
interactive to able-bodied visitors, but it will also pass major accessibility guidelines and be
suitable for those incapable of using a mouse, as well as for those dependent on assistive
technologies.

INTERFACE MODES

The Vertical Scroller user interface is designed to automatically open to the correct mode based
on your current insertion point in the document. If your insertion point is inside an existing Vertical
Scroller component the user interface will open in the Modify mode for that Vertical Scroller. If
your insertion point is not within an existing Vertical Scroller component the user interface will
open in the Create mode .

INSERTION

You simply click in the page area where you wish to create the scroller and click the Vertical
Scroller icon to open the interface. Alternatively, you can choose Insert > Studio VII > Vertical
Scroller Magic by PVII . You can insert the scroller into any area of your page. The scroller will
automatically adapt to its location, even when placed inside flexible DIVs or table cells. You can
insert as many individual Vertical Scroller components as you like on your page. Each scroller
can be optioned independently to set different modes and features. Scrollers on a single page
can share the same style theme or be set to separate style themes. Each scroller can contain
any content that you like. The entire content panel is directly editable in Dreamweaver Design
View using normal Dreamweaver editing techniques.

While the height for the scroller view port is managed in the user interface, the scroller is
designed to adapt to the width of the element into which you insert it — even when that
element is set to a fluid width.

8 ©2007 Project Seven Development

 PVII Vertical Scroller Magic Highlights 9

KEYBOARD NAVIGATION

Scrollers have full support for keyboard operation. Simply bring focus to any of the controls,
either with the Tab key or a mouse click, and the keyboard controls are activated.

SCROLLER KEYBOARD KEY OPERATION:

 Up -Up Arrow key

 Down -Down Arrow key
 Next Panel -Right Arrow, Page Up, or Spacebar keys
 Previous Panel -Left Arrow, Page Down, or Shift-Spacebar keys
 Starting Position -Home key
 Ending Position -End key

PLAY AND PAUSE

The system includes a Play/Pause button that allows the user to Start, Resume or Pause the
scroller at any time. The Play/Pause button is keyboard activated by placing focus on the
button, either with the Tab key or a mouse click, and pressing the Enter key. Pressing the Play
button on a paused scroller will automatically resume the Play Mode at the scroller's current
position.

9 ©2007 Project Seven Development

 PVII Vertical Scroller Magic Highlights 10

MOUSE WHEEL SUPPORT

The system includes full mouse wheel support in modern browsers. Simply hover over the scroller
view port and roll the mouse wheel to move the scroller up or down. If the Pause on Mouse Over
option is turned on (default) then the scroller will resume Play mode when the user moves his
cursor away from the scroller — unless the scroller was paused prior to the mouse wheel being
used.

DRAG BAR SUPPORT

The system includes automated Drag Bar support just like the ones that come on ordinary
Windows or Mac scroll bars. Click and hold down the Drag button and move it up or down to
scroll. You can also click on the drag channel, above or below the drag button, to move the
scroller up or down one panel at a time.

The Drag Bar can also be used as a progress indicator in styles that come with a horizontal
toolbar below the content. In this case, the dragging action is simply turned off, while the drag
button remains visible and will move along the drag channel as you scroll — acting to meter
how much content is left to be scrolled.

10 ©2007 Project Seven Development

 Inserting a New Vertical Scroller 11

SCROLLING SPEEDS

The scroller contains two separate speed settings. One for use in the Play mode and the other for
use with the Control buttons. This allows a slower Play mode setting with faster response on the
control buttons. The speeds can be independently set for each scroller component on the page
and can be fine-tuned for your specific application.

SCROLLER CONTROL BEHAVIOR

In addition to the pre-defined style type choices, the system also includes a Scroller Control
Behavior that allows you to attach scroller actions to other page elements, such as links or
images.

SCROLLER REMOVE SYSTEM

The system includes an easy facility to remove an existing Vertical Scroller component from your
page.

INSERTING A NEW VERTICAL SCROLLER

-Establish the insertion point for your new Vertical Scroller component by clicking in the area of
the page where you would like the component to be created.

Note: The interface is sensitive to the insertion point. If your cursor is currently inside an existing Vertical Scroller component then the
Modify interface will open instead.

11 ©2007 Project Seven Development

 Inserting a New Vertical Scroller 12

Click the Vertical Scroller Magic icon in the Common Section of Dreamweaver's Insert Bar or
choose Insert > Studio VII > Vertical Scroller Magic by PVII .

The Vertical Scroller Magic user interface will open in the Create New Vertical Scroller mode.

You can create more than one Vertical Scroller component on your page. Add as many as you
like.

Note : When you insert a scroller, the content will be visible and fully expanded in Dreamweaver and all scroll control buttons will be hidden
until the page is viewed in a browser.

12 ©2007 Project Seven Development

 Modifying an Existing Vertical Scroller 13

MODIFYING AN EXISTING VERTICAL SCROLLER

You can modify any of the existing Vertical Scroller components on your page at any time.

-Click inside the Vertical Scroller component that you wish to modify.

-Click the Vertical Scroller Magic icon in the Common Section of Dreamweaver's Insert Bar or
choose Modify > Studio VII > Modify Vertical Scroller Magic by PVII

The Vertical Scroller Magic User Interface will open in the Modify Existing Scroller mode .

13 ©2007 Project Seven Development

 Managing the User Interface Items 14

MANAGING THE USER INTERFACE ITEMS

MODE

This displays the current operational Mode for the user interface: either Create or Modify . When
in Modify mode, this will also display the id of the Vertical Scroller component being modified.

SCROLLER OPERATION

This controls how the scroller will behave when using the Play button or when the scroller is
running automatically on page load. The Play button will change to Pause while the contents
are scrolling and then change to Play when the scroller stops. The scroller can be restarted by
simply clicking the Play button again.

In all operational modes, the Up and Down buttons (as well as the Drag Bar button, mouse
wheel , and keyboard keys ) will always function to move the scroller independently of the
operational mode and will place the scroller into Pause mode. The scroller will resume its
automatic mode when the Play button is clicked.

0-NORMAL OPERATION

When the Play button is clicked, or if the scroller is set to start on page load, the system will scroll
the contents up until the end of the content is reached then automatically stop. The scroller can
be restarted by simply clicking the Play button again.

1 -AUTO REVERSE

When the Play button is clicked, or if the scroller is set to start on page load, the system will scroll
the contents up until the end of the content is reached and then reverse direction — scrolling
down until the beginning is reached and then changing direction again. The scroller will move
up and down continuously unless interrupted by one of the control buttons, mouse wheel, or
keyboard keys. Clicking the Play button will resume the scrolling from its current position.

14 ©2007 Project Seven Development

 Managing the User Interface Items 15

2 -LOOPING

When the Play button is clicked, or if the scroller is set to start on page load, the system will scroll
the contents up until the end of the content scrolls out of view — at which point the content will
begin scrolling up from the bottom. The scroller will loop continuously unless interrupted by one
of the control buttons, mouse wheel, or keyboard keys. Clicking the Play button will resume the
scrolling from its current position.

3 -CAROUSEL

When the Play button is clicked, or if the scroller is set to start on page load, the system will scroll
the contents up by the number of pixels specified in the Carousel Scroll Amount box and then
pause for the amount of time specified in the Pause Time box. It will continue this pattern until
the end of the content is reached. If the cycle pattern is interrupted by one of the control
buttons, mouse wheel, or keyboard keys, clicking the Play button will resume the cycle pattern
form its current position.

4 -CAROUSEL WITH AUTO REVERSE

When the Play button is clicked, or if the scroller is set to start on page load, the system will scroll
in the Carousel pattern until the end of the content is reached and then it will change direction.
The scroller will scroll in the cycle pattern up and down continuously unless interrupted by one of
the control buttons, mouse wheel, or keyboard keys. Clicking the Play button will resume the
cycle pattern from its current position.

CAROUSEL SCROLL AMOUNT

This box is only active when the Scroller Operation mode is set to 3-Carousel or 4-Carousel with
Auto Reverse , and determines the number of pixels that the system will scroll during each cycle.
Setting the Carousel Scroll Amount to the same value as the Scroller Box Height will scroll one full
panel with each Carousel cycle.

Note : The Carousel cycle pause will only be evident if the actual rendered height of the scroller content is more than twice the Scroll Box
Height. When the height is less than that, you will simply see a normal scroll.

15 ©2007 Project Seven Development

 Managing the User Interface Items 16

CAROUSEL PAUSE TIME

This box is only active when the Scroller Operation mode is set to 3-Carousel or 4-Carousel with
Auto Reverse , and determines the amount of time that the system will pause between scroll
cycles. The value is entered in milliseconds (ms).

Tip : One second is equal to one thousand milliseconds (ms), enter 5000 to pause for 5 seconds, enter 2500 to pause for 2 and 1/2 seconds.

SCROLLER BOX HEIGHT

This determines the height of the scroller view port in pixels. You must enter a number greater
than zero. If you are using a style theme that includes a complete set of scroll bar controls such
as Chili, Goldleaf, Carbon, or Aero, be sure that you set the Scroller Box Height to be higher than
the total height of the Up, Down, Play/Pause, and drag bar control buttons.

Note : While the height of the view port is set in the interface, the width of the scroller will always be the width of the page element into
which you insert it. Be sure that this page element has sufficient width to display the scroller.

CONTENT STARTING POSITION

Enter the starting top position for the scrolling content. The default is zero and in the vast majority
of cases should not be changed.

16 ©2007 Project Seven Development

 Managing the User Interface Items 17

SCROLLING SPEED

The system allows for two independent scrolling speeds — one for the Auto Scrolling mode and
one for the Control buttons. This allows you to set faster speeds for the control buttons without
affecting the auto play mode speed. The Frame rate and Delay settings supplied by default
have been chosen as a best fit value across many different browsers and operating systems. The
operating system and browser have a large affect on the scrolling speed and what can appear
to be optimal settings on a certain system can be too fast or too slow on others. If you change
from the default, be sure to test in various browsers.

Tip : The Control button speed should remain at default as it emulates the action of conventional scroll bar controls. The Auto Scrolling speed is
affected by the amount and type of content you are scrolling and the purpose of your scroller. If your scroller contains plain text, the default
setting should be fine. If your scroller contains images, you might want to increase the speed. If you are running in Carousel mode, you might
want to set the speed to the same rate as the Control button speed.

The scrolling speed is determined by two factors:

FRAME RATE

The Frame Rate determines how many pixels the content moves per millisecond delay. The
larger the Frame Rate the faster the scroller will appear to move. Set this number very low if you
wish to have slow, smooth scrolling. The default for Auto Scrolling mode is 1, while the default for
the Control button speed is 10.

DELAY

The Delay determines how long the system pauses between pixel moves. The larger the Delay,
the slower the speed will be. However, when the delay is set longer than about 30 milliseconds
you will see choppiness in the faster browsers. Set this number between 4 and 30 for smoothest
scrolling, with 10 being the sweet spot in most current modern browsers. The default for Auto
Scrolling mode is 10, and the default for the Control button speed is also 10.

17 ©2007 Project Seven Development

 Managing the User Interface Items 18

PAUSE ON MOUSE OVER

Check this box if you want the scroller to pause whenever the user moves the mouse over the
scrolling content. This allows for easy clicking of links inside the scrolling content and is
considered a usability feature. It is turned on by default. Un-check this box if you do not want this
feature.

AUTO START ON PAGE LOAD

With this box checked the system will automatically start the Play mode of the scroller when the
page first loads into the browser.

AUTO START DELAY

Enter the amount of time (in milliseconds) that the system should wait before auto-starting the
scroller when the page first loads.

Tip : One second is equal to one thousand milliseconds (ms), enter 5000 to pause for 5 seconds, enter 2500 to pause for 2 and 1/2 seconds.

INCLUDE SHOW ALL LINK

This will place a Show All text link just before the scroller to serve as an accessibility aid. When this
link is clicked (activated) the system will reveal all of the scroller content and hide the scroller
control buttons, making it very easy for keyboard users or assistive device users to view the
contents of the scroller. The system automatically changes the text of the link to Restore Scroller
— which, when clicked, will restore the scroller back to its normal configuration. This feature is
turned on by default. Un-check the box if you do not wish to use this feature.

18 ©2007 Project Seven Development

 Managing the User Interface Items 19

DISABLE DRAG BUTTON

The Drag Bar and Drag Button can be used as a "you are here" feature — a kind of progress
gauge or indicator . When used in this manner, you should select the disable the Drag Button
feature. This will turn off all interactive Drag bar and Drag channel functionality — but the Drag
button will remain visible in the browser and will move as content is scrolled, serving as a
reference point for how much content remains.

SCROLLER STYLE TYPE

Vertical Scroller Magic comes with seven pre-defined style type themes. Choose a theme that
best approximates the desired look. This will act a starting point from which you can later make
edits to the style sheet to fully customize the look and feel as desired. You can change to a
different style type at any time without affecting the content of the scroller.

The box below the Scroller Style Type provides a preview of the selected Style Type. This preview
will change whenever you select a different Style Type.

19 ©2007 Project Seven Development

 Managing the User Interface Items 20

THE INTERFACE CONTROL BUTTONS

OK

When you are done setting your desired options, click the OK button to build the Vertical
Scroller. The system will verify your selections and alert you to any problems that need your
attention. If there are no problems, the interface will close and a Vertical Scroller will be added
to your page or updated — depending on whether you are in Create mode or Modify mode .
You can then preview in a browser to operate the Vertical Scroller and check its functionality.

Tip : To make further changes, click inside a Vertical Scroller to open the Vertical Scroller Magic interface and begin your modifications.

CANCEL

Click the Cancel button to completely abort the current Vertical Scroller Magic operation. This
will close the interface and no changes will be made to your page.

HELP

Click the Help button to open the associated Help File in your browser. This page can remain
open for easy reference while you continue working with the Vertical Scroller Magic interface

20 ©2007 Project Seven Development

 PVII Vertical Scroller Magic -Control Behavior 21

PVII VERTICAL SCROLLER MAGIC -CONTROL BEHAVIOR

OVERVIEW

The Vertical Scroller Magic system includes a Control Behavior that can be used to trigger
actions on the scroller. These behaviors can be applied to any link on your page, including text
or image links.

The Control Behavior is designed to emulate a click on any one of the control buttons used in
the Scroller, including the drag bar. You can attach these behaviors to your own custom images
or to text links anywhere on the page.

The available Control Behavior actions:

 Pause Scroller
 Play or Resume
 Scroll Down
 Scroll Up
 Panel Down
 Panel Up
 Go To Start
 Go To End
 Go To Pixel Position
 Go To Element ID

CREATING A NEW SCROLLER CONTROL BEHAVIOR

1. Open the Behaviors Panel (Window > Behaviors or Shift + F4 )

2. Select a text link or image to act as the behavior trigger.
3. Click the plus sign (+ ) on the Behaviors panel.
4. Choose Studio VII > Vertical Scroller Magic > Vertical Scroller Magic -Control to open the
interface.
5. Select the ID of the scroller that you wish to apply the action to.
6. Select the action to apply and enter other data as needed.
7. Click OK to apply the behavior.

Tip : When you create a trigger link, set the link to an href value of javascript:; ("javascript" is followed by a colon and a semicolon).

21 ©2007 Project Seven Development

 PVII Vertical Scroller Magic -Control Behavior 22

MODIFYING AN EXISTING TRIGGER PANEL BEHAVIOR

1. Select the element that contains an existing Vertical Scroller Magic Control behavior.
2. Double-click the Vertical Scroller Magic- Control behavior listed in the Behaviors panel to
open the interface.
3. Make sure that the scroller that you wish to apply the action to is selected.
4. Select the action to apply and enter other data as needed.
5. Click OK to apply the updated behavior.

THE INTERFACE

The Vertical Scroller Magic -Control interface.

SCROLLING BOX

This is a listing of all of the Vertical Scroller components on the page, by scroller ID. Select the
scroller to which you wish to apply the behavior action to.

Tip : If you are unsure about which scroller relates to which ID, click the Cancel button and switch to Code View. In Code View, locate all IDs
that begin with p7VSCB . The Scrolling Box DIV tags look like this: <div id="p7VSCb_1" class="p7VSC_scrollbox">

22 ©2007 Project Seven Development

 PVII Vertical Scroller Magic -Control Behavior 23

ACTION

Select the desired action for this behavior:

PIXEL AMOUNT

Some actions require that a Pixel Amount entry be made. If this is the case, the Pixel Amount box
will become active to allow the entry. If the Action you've selected does not require a Pixel
Amount, the box will remain disabled (grayed out). If applicable, enter the number of pixels you
wish the scroller to move for this action. A negative number will move the content up and a
positive number will move the content down.

ELEMENT ID

This entry field is used for the GoTo Element ID action and will be enabled if your action requires
an entry. Enter the ID of the element that you wish the scroller to move to. The element must be
within the scrolling content area and its html markup should have the ID attribute assigned like
this <a id="myAnchor">, or <p id="anchor1">, or <div id="myanchor">.

Tip : To keep your scroller accessible, it's a good idea to use the target ID as the href attribute on the link that you are assigning the
Control Behavior to — as if you were linking to an ordinary named anchor. If you are targeting the element <p id="anchor1"> then set the link
on the trigger element to #anchor1 . That way, if script is disabled and all content is visible, your trigger will still work.

23 ©2007 Project Seven Development

 PVII Vertical Scroller Magic -Control Behavior 24

THE INTERFACE CONTROL BUTTONS

OK

When you have made your selection, click the OK button to apply the behavior. By default, the
behavior will be applied to the onclick event of the text link or image. You can change the
event by selecting the desired event in the Behaviors panel to, for example, onMouseDown .

CANCEL

Click the Cancel button to completely abort the current operation. This will close the interface
and no changes will be made to your page.

HELP

Click the Help button to open the associated Help File in your browser. This page can remain
open for easy reference while you continue working with the Vertical Scroller Magic interface.

24 ©2007 Project Seven Development

 PVII Vertical Scroller Magic - Remove 25

PVII VERTICAL SCROLLER MAGIC - REMOVE

OVERVIEW

The Vertical Scroller Magic system includes a Remove feature that allows you to quickly remove
an existing Vertical Scroller Magic component from your page. This feature allows for easy
removal when simply prototyping pages or when a total redesign is necessary.

OPEN THE REMOVE PVII VERTICAL SCROLLER MAGIC INTERFACE

-Open a page that contains one or more Vertical Scroller Magic components.

-Choose Commands > Studio VII > Remove Vertical Scroller Magic.. . to open the Remove
interface.

Note : The Remove option will be unavailable (grayed out) in the menu if there is no Vertical Scroller Magic component on the page.

25 ©2007 Project Seven Development

 PVII Vertical Scroller Magic - Remove 26

The Remove Vertical Scroller Magic interface will open.

The interface will provide a listing of all of the Vertical Scrollers on your page. The list will display
the ID of each Vertical Scroller.

-Select the Vertical Scroller that you wish to remove from the listing. You can only remove one
Vertical Scroller at a time.

Tip : If you are unsure about which scroller relates to which ID, click the Cancel button and switch to Code View. In Code View, locate all IDs
that begin with p7VSC . The opening DIV tag for a scroller component looks like this: <div id="p7VSC_1" class="p7VSC01">

WHAT WILL BE REMOVED

The system will completely remove the html markup for the selected Vertical Scroller. If there are
other Vertical Scroller components on the page they will not be affected. The system will also
remove the link to the Vertical Scroller CSS file if no other scroller on the page is using the same
style theme.

If there are no remaining Vertical Scroller components on your page, the system will also remove
the link to the Vertical Scroller JavaScript file.

WHAT WILL NOT BE REMOVED

The system will not remove the p7vscroller folder, which contains the Vertical Scroller-related
assets (images, JavaScript file, and CSS files). This ensures that you will not lose any assets you
may have modified and that any other pages that depend on those modified assets will
continue to look and behave as expected.

26 ©2007 Project Seven Development

 PVII Vertical Scroller Magic - Remove 27

THE INTERFACE CONTROL BUTTONS

REMOVE

Click the Remove button. The selected Vertical Scroller Magic component will be removed from
the page

CANCEL

Click the Cancel button to completely abort the current Remove Vertical Scroller Magic
operation. This will close the interface and no changes will be made to your page.

HELP

Click the Help button to open the associated Help File in your browser. This page can remain
open for easy reference while you continue working with the Vertical Scroller Magic interface.

27 ©2007 Project Seven Development

 Style Themes 28

STYLE THEMES

Vertical Scroller Magic ships with 7 style themes. Let's discuss each one...

CHILI

ASSETS

CSS file: p7vscroller/s1/p7VSC01.css

Fireworks editable images: Fireworks/p7VSC01.png

CHILI IMAGES

Chili is optimized for a black background. The entire page does not need to be black, just the
element in which you insert the scroller. If you'd like to optimize Chili for use on a different color
background, open the p7VSC01.png Fireworks file and change the color(s), then export the
images back to your p7vscroller/s1/img folder to overwrite the original images.

28 ©2007 Project Seven Development

 Style Themes 29

EXPORTING THE EDITED IMAGE

Choose File > Export to open the Export dialog

Browse to thep7vscroller/s1/img folder that was generated when you created your scroller.

Leave the File name as it is (it is actually irrelevant since you are exporting slices)

Make sure Export is set to Images Only

HTML is set to None

Slices is set to Export Slices

Selected slices only , Current frame ONLY and Include areas without slices are all unchecked

Current page only is checked

29 ©2007 Project Seven Development

 Style Themes 30

Click Save

You should get an overwrite warning.

Click OK

Note : If you want to edit other image attributes please make sure you keep your images and your image slices the same size. To see your
slices, click the eyeball icon next to the Web Layer entry in your Fireworks Layers panel.

EDITING CHILI CSS

Chili's style sheet file (p7VSC01.css) can be edited directly or with Dreamweaver's built-in CSS
editing tools.

FONT STYLING

Assign all font styles, to the root DIV class .p7VSC01

Assign content padding to the content DIV class .p7VSC01 .p7VSC_content

Assign content border and/or background properties to the scrolling box wrapper or the
scrolling box classes .p7VSC01 .p7VSC_scrollbox_wrapper and .p7VSC01 .p7VSC_scrollbox

Note : Additional rules should not be edited unless you are proficient with CSS. If you need advice on how to style your scroller and it's not
apparent in this user guide, please contact PVII Support.

30 ©2007 Project Seven Development

 Style Themes 31

GOLDLEAF

ASSETS

CSS file: p7vscroller/s2/p7VSC02.css

Fireworks editable images: Fireworks/p7VSC02.png

GOLDLEAF IMAGES

Goldleaf is optimized for a white background. If you'd like to optimize it for use on a different
color background, open the p7VSC02.png Fireworks file and change the color(s), then export
the images back to your p7vscroller/s2/img folder to overwrite the original images.

31 ©2007 Project Seven Development

 Style Themes 32

EXPORTING THE EDITED IMAGE

Choose File > Export to open the Export dialog

Browse to thep7vscroller/s2/img folder that was generated when you created your scroller.

Leave the File name as it is (it is actually irrelevant since you are exporting slices)

Make sure Export is set to Images Only

HTML is set to None

Slices is set to Export Slices

Selected slices only, Current frame only and Include areas without slices are all unchecked.

Current page only is checked

Click Save

32 ©2007 Project Seven Development

 Style Themes 33

You should get an overwrite warning.

Click OK

Note : If you want to edit other image attributes please make sure you keep your images and your image slices the same size. To see your
slices, click the eyeball icon next to the Web Layer entry in your Fireworks Layers panel.

EDITING GOLDLEAF CSS

Goldleaf's style sheet file (p7VSC02.css) can be edited directly or with Dreamweaver's built-in
CSS editing tools.

FONT STYLING

Assign all font styles, to the root DIV class .p7VSC02

Assign content padding to the content DIV class .p7VSC02 .p7VSC_content

Assign content border and/or background properties to the scrolling box wrapper or the
scrolling box classes .p7VSC02 .p7VSC_scrollbox_wrapper and .p7VSC02 .p7VSC_scrollbox

Note : Additional rules should not be edited unless you are proficient with CSS. If you need advice on how to style your scroller and it's not
apparent in this user guide, please contact PVII Support.

33 ©2007 Project Seven Development

 Style Themes 34

CARBON

ASSETS

CSS file: p7vscroller/s3/p7VSC03.css

Fireworks editable images: Fireworks/p7VSC03.png

CARBON IMAGES

Carbon is optimized for a white background. If you'd like to optimize it for use on a different color
background, open the p7VSC03.png Fireworks file and change the color(s), then export the
images back to your p7vscroller/s3/img folder to overwrite the original images.

34 ©2007 Project Seven Development

 Style Themes 35

EXPORTING THE EDITED IMAGE

Choose File > Export to open the Export dialog

Browse to thep7vscroller/s3/img folder that was generated when you created your scroller.

Leave the File name as it is (it is actually irrelevant since you are exporting slices)

Make sure Export is set to Images Only

HTML is set to None

Slices is set to Export Slices

Selected slices only, Current frame only and Include areas without slices are all unchecked.

Current page only is checked

Click Save

35 ©2007 Project Seven Development

 Style Themes 36

You should get an overwrite warning.

Click OK

Note : If you want to edit other image attributes please make sure you keep your images and your image slices the same size. To see your
slices, click the eyeball icon next to the Web Layer entry in your Fireworks Layers panel.

EDITING CARBON CSS

Carbon's style sheet file (p7VSC03.css) can be edited directly or with Dreamweaver's built-in CSS
editing tools.

FONT STYLING

Assign all font styles, to the root DIV class .p7VSC03

Assign content padding to the content DIV class .p7VSC03 .p7VSC_content

Assign content border and/or background properties to the scrolling box wrapper or the
scrolling box classes .p7VSC03 .p7VSC_scrollbox_wrapper and .p7VSC03 .p7VSC_scrollbox

Note : Additional rules should not be edited unless you are proficient with CSS. If you need advice on how to style your scroller and it's not
apparent in this user guide, please contact PVII Support.

36 ©2007 Project Seven Development

 Style Themes 37

VISTA AERO

ASSETS

CSS file: p7vscroller/s4/p7VSC04.css

Fireworks editable images: Fireworks/p7VSC04.png

AERO IMAGES

Aero is optimized to work with any background color. If, however, you'd like to change the
button colors in any way, open the p7VSC04.png Fireworks file and make your edits, then export
the images back to your p7vscroller/s4/img folder to overwrite the original images.

37 ©2007 Project Seven Development

 Style Themes 38

EXPORTING THE EDITED IMAGE

Choose File > Export to open the Export dialog

Browse to thep7vscroller/s4/img folder that was generated when you created your scroller.

Leave the File name as it is (it is actually irrelevant since you are exporting slices)

Make sure Export is set to Images Only

HTML is set to None

Slices is set to Export Slices

Selected slices only, Current frame only and Include areas without slices are all unchecked.

Current page only is checked

Click Save

38 ©2007 Project Seven Development

 Style Themes 39

You should get an overwrite warning.

Click OK

Note : If you want to edit other image attributes please make sure you keep your images and your image slices the same size. To see your
slices, click the eyeball icon next to the Web Layer entry in your Fireworks Layers panel.

EDITING AERO CSS

Aero's style sheet file (p7VSC04.css) can be edited directly or with Dreamweaver's built-in CSS
editing tools.

FONT STYLING

Assign all font styles, to the root DIV class .p7VSC04

Assign content padding to the content DIV class .p7VSC04 .p7VSC_content

Assign content border and/or background properties to the scrolling box wrapper or the
scrolling box classes .p7VSC04 .p7VSC_scrollbox_wrapper and .p7VSC04 .p7VSC_scrollbox

Note : Additional rules should not be edited unless you are proficient with CSS. If you need advice on how to style your scroller and it's not
apparent in this user guide, please contact PVII Support.

39 ©2007 Project Seven Development

 Style Themes 40

SILVERSTONE

ASSETS

CSS file: p7vscroller/s5/p7VSC05.css

Fireworks editable images: Fireworks/p7VSC05.png

SILVERSTONE IMAGES

Silverstone is optimized to work with any background color. If, however, you'd like to change the
button colors in any way, open the p7VSC05.png Fireworks file and make your edits, then export
the images back to your p7vscroller/s5/img folder to overwrite the original images.

40 ©2007 Project Seven Development

 Style Themes 41

EXPORTING THE EDITED IMAGE

Choose File > Export to open the Export dialog

Browse to thep7vscroller/s5/img folder that was generated when you created your scroller.

Leave the File name as it is (it is actually irrelevant since you are exporting slices)

Make sure Export is set to Images Only

HTML is set to None

Slices is set to Export Slices

Selected slices only, Current frame only and Include areas without slices are all unchecked.

Current page only is checked

Click Save

41 ©2007 Project Seven Development

 Style Themes 42

You should get an overwrite warning.

Click OK

Note : If you want to edit other image attributes please make sure you keep your images and your image slices the same size. To see your
slices, click the eyeball icon next to the Web Layer entry in your Fireworks Layers panel.

EDITING SILVERSTONE CSS

Silverstone's style sheet file (p7VSC05.css) can be edited directly or with Dreamweaver's built-in
CSS editing tools.

FONT STYLING

Assign all font styles, to the root DIV class .p7VSC05

Assign content padding to the content DIV class .p7VSC05 .p7VSC_content

Assign content border and/or background properties to the scrolling box wrapper or the
scrolling box classes .p7VSC05 .p7VSC_scrollbox_wrapper and .p7VSC05 .p7VSC_scrollbox

Note : Additional rules should not be edited unless you are proficient with CSS. If you need advice on how to style your scroller and it's not
apparent in this user guide, please contact PVII Support.

42 ©2007 Project Seven Development

 Style Themes 43

L'ORANGE

ASSETS

CSS file: p7vscroller/s6/p7VSC06.css

Fireworks editable images: Fireworks/p7VSC06.png

L'ORANGE IMAGES

L'Orange is optimized to work with any background color. If, however, you'd like to change the
button colors in any way, open the p7VSC06.png Fireworks file and make your edits, then export
the images back to your p7vscroller/s6/img folder to overwrite the original images.

43 ©2007 Project Seven Development

 Style Themes 44

EXPORTING THE EDITED IMAGE

Choose File > Export to open the Export dialog

Browse to thep7vscroller/s6/img folder that was generated when you created your scroller.

Leave the File name as it is (it is actually irrelevant since you are exporting slices)

Make sure Export is set to Images Only

HTML is set to None

Slices is set to Export Slices

Selected slices only, Current frame only and Include areas without slices are all unchecked.

Current page only is checked

Click Save

44 ©2007 Project Seven Development

 Style Themes 45

You should get an overwrite warning.

Click OK

Note : If you want to edit other image attributes please make sure you keep your images and your image slices the same size. To see your
slices, click the eyeball icon next to the Web Layer entry in your Fireworks Layers panel.

EDITING L'ORANGE CSS

L'Orange's style sheet file (p7VSC06.css) can be edited directly or with Dreamweaver's built-in
CSS editing tools.

FONT STYLING

Assign all font styles, to the root DIV class .p7VSC06

Assign content padding to the content DIV class .p7VSC06 .p7VSC_content

Assign content border and/or background properties to the scrolling box wrapper or the
scrolling box classes .p7VSC06 .p7VSC_scrollbox_wrapper and .p7VSC06 .p7VSC_scrollbox

Note : Additional rules should not be edited unless you are proficient with CSS. If you need advice on how to style your scroller and it's not
apparent in this user guide, please contact PVII Support.

45 ©2007 Project Seven Development

 Style Themes 46

MINIMALIST

ASSETS

CSS file: p7vscroller/s7/p7VSC07.css

Fireworks editable images: Fireworks/p7VSC07.png

MINIMALIST IMAGE

Minimalist uses a single image: the progress indicator (or meter ) dot that glides up and down the
left edge of the box as it's scrolled. If you'd like to change its color, open the p7VSC07.png
Fireworks file and make your edit, then export the image back to your p7vscroller/s7/img folder
to overwrite the original image.

46 ©2007 Project Seven Development

 Style Themes 47

EXPORTING THE EDITED IMAGE

Choose File > Export to open the Export dialog

Browse to thep7vscroller/s7/img folder that was generated when you created your scroller.

Leave the File name as it is (it is actually irrelevant since you are exporting slices)

Make sure Export is set to Images Only

HTML is set to None

Slices is set to Export Slices

Selected slices only, Current frame only and Include areas without slices are all unchecked.

Current page only is checked

Click Save

47 ©2007 Project Seven Development

 Style Themes 48

You should get an overwrite warning.

Click OK

Note : If you want to edit other image attributes please make sure you keep your images and your image slices the same size. To see your
slices, click the eyeball icon next to the Web Layer entry in your Fireworks Layers panel.

EDITING MINIMALIST CSS

Minimalist's style sheet file (p7VSC07.css) can be edited directly or with Dreamweaver's built-in
CSS editing tools.

FONT STYLING

Assign all font styles, to the root DIV class .p7VSC07

Assign content padding to the content DIV class .p7VSC07 .p7VSC_content

Assign content border and/or background properties to the scrolling box wrapper or the
scrolling box classes .p7VSC07 .p7VSC_scrollbox_wrapper and .p7VSC07 .p7VSC_scrollbox

Note : Additional rules should not be edited unless you are proficient with CSS. If you need advice on how to style your scroller and it's not
apparent in this user guide, please contact PVII Support.

48 ©2007 Project Seven Development

 Questions and Answers 49

QUESTIONS AND ANSWERS

The following questions and answers should prove helpful as you build your Vertical Magic
Scrollers.

WHICH CSS RULES CAN I SAFELY EDIT?

The following rules can be edited without breaking anything (the red X is a number between 1
and 7 depending on the style relevant theme):

 .p7VSC0X (except for position property)

 .p7VSC_showall
 .p7VSC_showall:hover, .p7VSC_showall:focus
 .p7VSC0X .p7VSC_scrollbox_wrapper (except for margin)
 .p7VSC0X .p7VSC_scrollbox (except for position and width properties)
 .p7VSC0X .p7VSC_content

For the Minimalist style theme you may edit the following rules, in addition to the ones listed
above:

 .p7VSC07 .p7VSCtoolbar (except for the display property)

 .p7VSC07 .p7VSCtoolbar a (except for the display property)
 .p7VSC07 .p7VSCtoolbar a:hover

HOW DO I SET FONT STYLES FOR MY SCROLLER'S CONTENT?

Add all font properties to the .p7VSC0 X rule.

49 ©2007 Project Seven Development

 Questions and Answers 50

MY FONT STYLES ARE NOT SHOWING UP, WHAT DO I DO?

Chances are there are rules in other style sheets attached to your page. If, for example, your
scroller was inserted into a DIV that has an ID of maincontent and a corresponding CSS rule, and
that rule contains competing font properties, you will need to make your scroller's CSS rule more
specific. You do that by adding the ID of the element your scroller is inside of to the beginning of
the .p7VSC0 X rule so that it becomes #maincontent .p7VSC0 X. If that does not work, then you
can add an !important notation to the affected properties, like this:

#maincontent .p7VSC0 X {
color: #CCCCCC !important;
Font-size: 11px !important;
}

Note: Your page link styles will apply to links inside the scroller.

CAN I REMOVE THE BEVELED BACKGROUND IN THE CHILI SCROLLER BOX?

Locate this style rule:

.p7VSC01 .p7VSC_scrollbox {
position: relative;
width: 100%;
background-image: url(img/p7sc1_contentbg.jpg);
background-repeat: repeat-x;
background-color: #000000;
}

Remove the background-image and background-repeat properties.

CAN I CHANGE OR SET A BACKGROUND COLOR FOR THE SCROLLER BOX?

Locate the .p7VSC0 X .p7VSC_scrollbox rule and add a background color (or image) of your
choice.

50 ©2007 Project Seven Development

 Questions and Answers 51

CAN I CHANGE THE BORDER COLOR OR STYLE FOR MY SCROLLER?

Locate the .p7VSC0 X .p7VSC_scrollbox_wrapper rule and change the border property (but do
not edit the margin property!)

CAN I MOVE MY MINIMALIST CONTROL LINKS TO THE LEFT EDGE OF THE

SCROLLER?

Locate the .p7VSC07 .p7VSCtoolbar rule and change the text-align value from right to left .

CAN I HIDE THE CONTROL LINKS IN MY MINIMALIST SCROLLER?

Locate the .p7VSC07 .p7VSCtoolbar rule and change the display property to none .

CAN I REMOVE GAPS BETWEEN IMAGES IN A CAROUSEL SCROLLER?

Locate the .p7VSC0 X .p7VSC_content rule and set padding to 0 . If you've inserted your images
into paragraphs, then you must zero the margins on those tags, too. Create this new rule:

.p7VSC0 X .p7VSC_content p {margin: 0;}

CAN MY LOOPING SCROLLER BE "SEAMLESS"?

Two objects cannot be in the same place at the same time. Make your scrolling box shorter, by
reducing its height in the Vertical Scroller Magic modify window, to mitigate this issue.

51 ©2007 Project Seven Development

 Questions and Answers 52

I PUT MY SCROLLER INSIDE A TAB PANEL. WHY WON'T IT START

AUTOMATICALLY?

If you insert your scroller, with auto-start enabled, into a hidden Tab Panel Magic content panel,
the scroller's dimensional properties are not available. You can solve this by using the Vertical
Scroller Magic Control Behavior to assign a Play action to the relevant tab's DIV tag. Switch to
code view and locate the tab that triggers the content panel your scroller is in. In this example,
we'll assume it's the second tab:

<div id="p7tpb1_2"><a href="javascript:;">Scroller Inside</a></div>

Place your cursor inside the opening DIV tag between div and id

1. Open the Behaviors Panel (Window > Behaviors or Shift + F4 )

2. Click the plus sign (+ ) on the Behaviors panel
3. Choose Studio VII > Vertical Scroller Magic > Vertical Scroller Magic -Control
4. Select the ID of the scroller that you wish to apply the action to
5. Select the Play or Resume action to apply.
6. Click OK to apply the behavior.

Make sure your Behavior is set to onclick. The DIV tag should now look like this:

<div id="p7tpb1_2" onclick="P7_VSCctrl('play','p7VSCb_X')"><a href="javascript:;">Scroller

Inside</a></div>

I PUT MY SCROLLER INSIDE AN ACCORDION PANEL. WHY WON'T IT WORK RIGHT

IN IE?

This is caused by a CSS rendering quirk in IE6 and IE7. To fix it you simply need to set the content
panel wrappers in your Accordion Panel Magic component to position relative. The panel
wrapper DIVs in your Accordion are named p7ABw X_ Y, where "X" is the component number and
"Y" is the content panel number within that component. So if your scroller is inside the second
content panel of the only Accordion component on your page, the relevant ID would be
p7ABw1_2 . Create a new rule in your Accordion Panel style sheet:

#p7ABw1_2 {position: relative;}

That's it!

52 ©2007 Project Seven Development

 Support and Contact info 53

SUPPORT AND CONTACT INFO

PVII quality does not end with your purchase - it continues with the best customer support in the
business.

PVII KNOWLEDGE BASE

The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech
Notes, tips, and techniques relating to our products, as well as to general web development
issues.

Open the Knowledge Base | View the 10 Most Recent Additions

NEWSGROUP FORUM COMMUNITIES

The Project VII Newsgroup community is available 24 hours a day. Choose from the following
newsgroups:

1. The PVII Webdev Newsgroup (post support issues here)

2. The PVII Dreamweaver Newsgroup (general Dreamweaver discussions)
3. The PVII Fireworks Newsgroup (general Fireworks discussions)
4. The PVII CSS Newsgroup (general CSS discussions)

Use a news reader program such as Outlook Express, Windows Mail, Thunderbird, or Entourage to
set up a new news account pointing to our news server: forums.projectseven.com

If you are not sure how to do this, the following links will help you:

 Setting up a new newsgroup account in Outlook Express (or Windows Vista Mail)
 Setting up a new newsgroup account in Mozilla Thunderbird
 Setting up a new newsgroup account in Entourage

If you have another newsgroup-capable program that you are using, please see its
documentation to learn how to add a new newsgroup account.

Note : PVII newsgroups are private and have nothing to do with Usenet feeds that may be provided by your ISP. That is, you will not find our
newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our news server as a new account.

53 ©2007 Project Seven Development

 Support and Contact info 54

RSSNEWS FEEDS

Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you
are not sure how to subscribe, please check this page:

PVII RSS Info

BEFORE YOU CONTACT US

Before making a support inquiry, please be certain to have read the documentation that came
with your product. Please include your Dreamweaver version, as well as your computer
operating system type in all support correspondence.

E-Mail: [email protected]

Phones: 330-650-3675 | 336-374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.

SNAIL MAIL

Project Seven Development

339 Cristi Lane
Dobson, NC 27017

54 ©2007 Project Seven Development