Horizontal Scroller Magic: by Pvii

Horizontal Scroller Magic
By PVII
Making Dreamweaver Magic
Project Seven Development
12/12/2007
PVII Horizontal Scroller Magic 2
PVII HORIZONTAL SCROLLER MAGIC
HORIZONTAL SCROLLER Magic automates the process of building horizontal 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.
HORIZONTAL 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 Horizontal Scroller Magic.......................................................................................................................... 2
Install the extension(s) ...................................................................................................................................... 6
Work in a Defined Dreamweaver Web Site ............................................................................................. 6
Assets folders .................................................................................................................................................. 7
PVII HORIZONTAL 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 HORIZONTAL SCROLLER .....................................................................................................11
Modifying an Existing HORIZONTAL SCROLLER........................................................................................... 13
Managing the User Interface Items ............................................................................................................. 14
Mode ............................................................................................................................................................. 14
Scroller Operation ....................................................................................................................................... 14
Content Starting Left Position .................................................................................................................... 16
Scrolling Speed ............................................................................................................................................ 17
Pause on Mouse Over ................................................................................................................................ 18
Auto Start on Page Load ........................................................................................................................... 18
Auto Start Delay ........................................................................................................................................... 18
Include Show All Link ................................................................................................................................... 18

Disable Drag Button .................................................................................................................................... 19
Scroller Style Type ........................................................................................................................................ 19
The Interface Control Buttons .................................................................................................................. 20
PVII HORIZONTAL SCROLLER Magic -Control Behavior ............................................................................ 21
Overview ....................................................................................................................................................... 21
PVII HORIZONTAL SCROLLER Magic - Remove .......................................................................................... 25
Overview ....................................................................................................................................................... 25
Style Themes .....................................................................................................................................................28
Aero ................................................................................................................................................................28
Goldleaf ........................................................................................................................................................ 31
Carbon .......................................................................................................................................................... 34
Chilli ................................................................................................................................................................ 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 hide the control links in my Minimalist scroller? ........................................................................... 51
Can I remove gaps between images in a Carousel scroller? ............................................................ 51
How do I add images in my scroller? ...................................................................................................... 51

Can my looping scroller be "seamless"? ................................................................................................. 51
I’m using a layout table. Why is my scroller in the vertical middle? ................................................. 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

Install the extension(s) 6
INSTALL THE EXTENSION(S)
Look for the extension installer file p7_HSM_103.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.
*Note: In the event an update was issued before release, the actual MXP name might reflect a higher version number. For example,
instead of p7_HSM_103.mxp the file name might be p7_HSM_10 4.mxp (or higher).
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 SITE
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.

Install the extension(s) 7
ASSETS FOLDERS
When you create your scroller(s), the system generates 2 new folders: Fireworks and p7hscroller .
The Fireworks folder contains up to 7 editable image documents, each corresponding to one of
the 7 included style themes. The Fireworks documents are only added to the folder when you
create a horizontal scroller using its associated style theme. The file name indicates the style
theme number it is associated with:
1. p7HSC01.png
2. p7HSC02.png
3. p7HSC03.png
4. p7HSC04.png
5. p7HSC05.png
6. p7HSC06.png
7. p7HSC07.png
The second folder, p7hscroller , contains a single copy of the system Javascript file
(p7hsmscripts.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 p7hscroller folder. The Fireworks
folder should remain on your local drive only.

PVII HORIZONTAL SCROLLER Magic Highlights 8
PVII HORIZONTAL SCROLLER MAGIC HIGHLIGHTS
HORIZONTAL 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 HORIZONTAL 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 HORIZONTAL SCROLLER component the user interface will open in the Modify mode for
that HORIZONTAL SCROLLER. If your insertion point is not within an existing HORIZONTAL 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
HORIZONTAL SCROLLER icon to open the interface. Alternatively, you can choose Insert >
Studio VII > HORIZONTAL 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 HORIZONTAL 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.
The scroller is designed to adapt to the width of the element it’s inserted into — even when that
element is set to a fluid width. Height is calculated automatically, based on the tallest content
inside your scroller.

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:
 Left - Right: Left or Right Arrow key

 Next Panel : Down Arrow, Page Up, or Spacebar keys
 Previous Panel : Up 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.

MOUSE WHEEL SUPPORT
The system includes mouse wheel support in most modern browsers. Simply hover over the
scroller view port and roll the mouse wheel down to move the scroller right or roll up to scroll left.
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 ordinary Windows or Mac scroll bars.
Click and hold down the Drag button and move it left or right to scroll. You can also click on the
drag channel, to the left or right of the drag button to move the scroller one panel at a time.
The Drag Bar is used as a progress indicator in some style themes. 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 — serving to indicate how much content remains to be scrolled.

Inserting a New HORIZONTAL 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 HORIZONTAL SCROLLER component
from your page.
INSERTING A NEW HORIZONTAL SCROLLER
-Establish the insertion point for your new HORIZONTAL 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 HORIZONTAL SCROLLER
component then the Modify interface will open instead.

Inserting a New HORIZONTAL SCROLLER 12
Click the HORIZONTAL SCROLLER Magic icon in the Common Section of Dreamweaver's Insert Bar
or choose Insert > Studio VII > HORIZONTAL SCROLLER Magic by PVII .
The HORIZONTAL SCROLLER Magic user interface will open in the Create New HORIZONTAL
SCROLLER mode.
You can create more than one HORIZONTAL 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.

Modifying an Existing HORIZONTAL SCROLLER 13
MODIFYING AN EXISTING HORIZONTAL SCROLLER
You can modify any of the existing HORIZONTAL SCROLLER components on your page at any
time.
-Click inside the HORIZONTAL SCROLLER component that you wish to modify.
-Click the HORIZONTAL SCROLLER Magic icon in the Common Section of Dreamweaver's
Insert Bar or choose Modify > Studio VII > Modify HORIZONTAL SCROLLER Magic by PVII
The HORIZONTAL SCROLLER Magic User Interface will open in the Modify Existing Scroller mode .

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 HORIZONTAL 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 Left and Right 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 right 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
the contents until the end of the content is reached and then reverse direction — scrolling until
the beginning is reached and then changing direction again. The scroller will move left and right
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.

2 -LOOPING
the contents until the end of the content scrolls out of view — at which point the content will
begin scrolling in from the right. 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
the contents 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
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 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 width of the scroller content is more than twice the Scroll
Box width. When the width is less than that, you will simply see a normal scroll.

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.
CONTENT STARTING LEFT POSITION
Enter the starting position for the scrolling content. The default is zero and in the vast majority of
cases should not be changed.

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.

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.

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

THE INTERFACE CONTROL BUTTONS
OK
When you are done setting your desired options, click the OK button to build the HORIZONTAL
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 HORIZONTAL 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 HORIZONTAL SCROLLER and check its
functionality.
Tip : To make further changes, click inside a HORIZONTAL SCROLLER to open the HORIZONTAL SCROLLER Magic interface and
begin your modifications.
CANCEL
Click the Cancel button to completely abort the current HORIZONTAL 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 HORIZONTAL SCROLLER Magic
interface

PVII HORIZONTAL SCROLLER Magic -Control Behavior 21
PVII HORIZONTAL SCROLLER MAGIC -CONTROL BEHAVIOR
OVERVIEW
The HORIZONTAL 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 Left
 Scroll Right
 Panel Left
 Panel Right
 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 > HORIZONTAL SCROLLER Magic > HORIZONTAL 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).

MODIFYING AN EXISTING TRIGGER PANEL BEHAVIOR
1. Select the element that contains an existing HORIZONTAL SCROLLER Magic Control
behavior.
2. Double-click the HORIZONTAL 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 HORIZONTAL SCROLLER Magic -Control interface.
SCROLLING BOX
This is a listing of all of the HORIZONTAL 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 p7HSMb . The Scrolling Box DIV tags look like this: <div id="p7HSMb_1" class="p7HSM_vp">

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 left and a
positive number will move the content right.
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.

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

PVII HORIZONTAL SCROLLER Magic - Remove 25
PVII HORIZONTAL SCROLLER MAGIC - REMOVE
OVERVIEW
The HORIZONTAL SCROLLER Magic system includes a Remove feature that allows you to quickly
remove an existing HORIZONTAL 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 HORIZONTAL SCROLLER MAGIC INTERFACE
-Open a page that contains one or more HORIZONTAL SCROLLER Magic components.
-Choose Commands > Studio VII > Remove HORIZONTAL SCROLLER Magic.. . to open the Remove
interface.
Note : The Remove option will be unavailable (grayed out) in the menu if there is no HORIZONTAL SCROLLER Magic component
on the page.

The Remove HORIZONTAL SCROLLER Magic interface will open.
The interface will provide a listing of all of the HORIZONTAL SCROLLERs on your page. The list will
display the ID of each HORIZONTAL SCROLLER.
-Select the HORIZONTAL SCROLLER that you wish to remove from the listing. You can only remove
one HORIZONTAL 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 p7HSM . The opening DIV tag for a scroller component looks like this: <div id="p7HSM_1"
class="p7HSM01">
WHAT WILL BE REMOVED
The system will completely remove the html markup for the selected HORIZONTAL SCROLLER. If
there are other HORIZONTAL SCROLLER components on the page they will not be affected. The
system will also remove the link to the HORIZONTAL SCROLLER CSS file if no other scroller on the
page is using the same style theme.
If there are no remaining HORIZONTAL SCROLLER components on your page, the system will also
remove the link to the HORIZONTAL SCROLLER JavaScript file.
WHAT WILL NOT BE REMOVED
The system will not remove the p7hscroller folder, which contains the HORIZONTAL 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.

REMOVE
Click the Remove button. The selected HORIZONTAL SCROLLER Magic component will be
removed from the page
CANCEL
Click the Cancel button to completely abort the current Remove HORIZONTAL SCROLLER Magic
operation. This will close the interface and no changes will be made to your page.
HELP
interface.

Style Themes 28
STYLE THEMES
HORIZONTAL SCROLLER Magic ships with 7 style themes. Let's discuss each one...
AERO
ASSETS
CSS file: p7hscroller/s1/p7HSM01.css

Fireworks editable images: Fireworks/p7HSC01.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 p7HSC01.png Fireworks file and make your edits, then export
the images back to your p7hscroller/s1/img folder to overwrite the original images.

Style Themes 29
EXPORTING THE EDITED IMAGE
Choose File > Export to open the Export dialog
Browse to the p7hscroller/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

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 AERO CSS
Aero's style sheet file (p7HSM01.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 .p7HSM01
Assign content padding to the content DIV class .p7HSM01 .p7HSM_content
Assign content border and/or background properties to the root class .p7HSM01 or the scrolling
box viewport wrapper class .p7HSM01 .p7HSM_vp_wrapper
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.

Style Themes 31
GOLDLEAF
ASSETS

Fireworks editable images: Fireworks/p7HSC02.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 p7HSC02.png Fireworks file and change the color(s), then export

Style Themes 32
HTML is set to None
Selected slices only, Current frame only and Include areas without slices are all unchecked.
Click Save

Style Themes 33
Click OK
EDITING GOLDLEAF CSS
Goldleaf's style sheet file (p7HSM02.css) can be edited directly or with Dreamweaver's built-in
CSS editing tools.
FONT STYLING

Style Themes 34
CARBON
ASSETS

Fireworks editable images: Fireworks/p7HSM03.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 p7HSM03.png Fireworks file and change the color(s), then export the
images back to your p7hscroller/s3/img folder to overwrite the original images.

Style Themes 35
HTML is set to None
Click Save

Style Themes 36
Click OK
EDITING CARBON CSS
Carbon's style sheet file (p7HSM03.css) can be edited directly or with Dreamweaver's built-in CSS
editing tools.
FONT STYLING

Style Themes 37
CHILLI
ASSETS

AERO IMAGES
Chilli is optimized for a black background. If you'd like to optimize it for use on a different color
background, open the p7HSC04.png Fireworks file and change the color(s), then export the
images back to your p7hscroller/s4/img folder to overwrite the original images.

Style Themes 38
HTML is set to None
Click Save

Style Themes 39
Click OK
EDITING CHILLI CSS
Chilli's style sheet file (p7HSM04.css) can be edited directly or with Dreamweaver's built-in CSS
editing tools.
FONT STYLING

Style Themes 40
SILVERSTONE
ASSETS

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 p7HSM05.png Fireworks file and make your edits, then export

Style Themes 41
HTML is set to None
Click Save

Style Themes 42
Click OK
EDITING SILVERSTONE CSS
Silverstone's style sheet file (p7HSM05.css) can be edited directly or with Dreamweaver's built-in
CSS editing tools.
FONT STYLING

Style Themes 43
L'ORANGE
ASSETS

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 p7HSM06.png Fireworks file and make your edits, then export

Style Themes 44
HTML is set to None
Click Save

Style Themes 45
Click OK
EDITING L'ORANGE CSS
L'Orange's style sheet file (p7HSM06.css) can be edited directly or with Dreamweaver's built-in
CSS editing tools.
FONT STYLING

Style Themes 46
MINIMALIST
ASSETS

MINIMALIST IMAGE
Minimalist uses a single image: the progress indicator (p7HSM07_dbdrag.gif) dot that glides back
and forth along the bottom edge of the box as it's scrolled. If you'd like to change its color, open
the p7HSM07.png Fireworks file and make your edit, then export the image back to your
p7hscroller/s7/img folder to overwrite the original image.

Style Themes 47
Browse to thep7hscroller/s7/img folder that was generated when you created your scroller.
HTML is set to None
Click Save

Style Themes 48
Click OK
EDITING MINIMALIST CSS
Minimalist's style sheet file (p7HSM07.css) can be edited directly or with Dreamweaver's built-in
CSS editing tools.
FONT STYLING

Questions and Answers 49
QUESTIONS AND ANSWERS
The following questions and answers should prove helpful as you build your Horizontal 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 relevant style theme. The black X relates to the component number of
your scroller (if you have more than 1 scroller on your page):
 .p7HSM0X
 .p7HSM_showall
.p7HSM_showall:hover
 .p7HSM0X .p7HSM_vp_wrapper
 .p7HSM0X .p7HSM_content
 .p7HSM0X .p7HSM_content p
For the Minimalist style theme you may edit the following rules, in addition to the ones listed
above:
 .p7HSM07 .p7HSMtoolbar (except for the display property)

 .p7HSM07 .p7HSMtoolbar a (except for the display property)
 .p7HSM07 .p7HSMtoolbar a:hover
HOW DO I SET FONT STYLES FOR MY SCROLLER'S CONTENT?
Add all font properties to the .p7HSM0 X rule.

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 with a corresponding CSS rule that
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
.p7HSM0 X rule so that it becomes #maincontent .p7HSM0 X. If that does not work, then you can
add an ―!important” notation to the affected properties, like this:
#maincontent .p7HSM0 X {
color: #CCCCCC !important;
Font-size: 11px !important;
}
CAN I REMOVE THE BEVELED BACKGROUND IN THE CHI LI SCROLLER BOX?
Locate this style rule:
.p7HSM04 .p7HSM_vp {
position: relative;
width: 100%;
background-image: url(img/p7HSM04_contentbg.jpg);
background-repeat: repeat-x;
}
Remove the background-image and background-repeat properties.
CAN I CHANGE OR SET A BACKGROUND COLOR FOR THE SCROLLER BOX?
Locate the .p7HSM0 X .p7HSM_vp_wrapper rule and add a background color (or image) of your
choice.

CAN I CHANGE THE BORDER COLOR OR STYLE FOR MY SCROLLER?
Borders are assigned via the .p7HSM0X rule or the .p7HSM0 X .p7HSM_vp_wrapper rule.
CAN I HIDE THE CONTROL LINKS IN MY MINIMALIST SCROLLER?
Locate the .p7HSM07 .p7HSMtoolbar rule and add an !important notation to the display :none
declaration .
CAN I REMOVE GAPS BETWEEN IMAGES IN A CAROUSEL SCROLLER?
Locate the .p7HSM0 X .p7HSM_content rule and set padding to 0 .
HOW DO I ADD IMAGES IN MY SCROLLER?
Insert your images adjacent to each other. That is, do not press enter between them to create a
new line – simply place your cursor just to the right of an existing image and insert your new one.
CAN MY LOOPING SCROLLER BE "SEAMLESS"?
Two objects cannot be in the same place at the same time. The content inside your scroller must
reach the end before it can loop.
I’M USING A LAYOUT TABLE. WHY IS MY SCROLLER IN THE VERTICAL MI DDLE?
The natural vertical position of content in a table is middle. Set your table cells, via CSS to align
top: #my-table {vertical-align: top ;}.
Alternatively, you can select a table cell <td> in Dreamweaver Design View and use the
Property Inspector to set vertical alignment.

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
HORIZONTAL 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 > HORIZONTAL SCROLLER Magic > HORIZONTAL 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_HSMctrl('play','p7HSMb_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!

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.

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: support@projectseven.com
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

Horizontal Scroller Magic: by Pvii

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Horizontal Scroller Magic: by Pvii

Uploaded by

Copyright:

Available Formats

Horizontal Scroller Magic

Making Dreamweaver Magic

Project Seven Development

PVII HORIZONTAL SCROLLER MAGIC

HORIZONTAL SCROLLER Magic is engaging, standards-based, accessible, user-friendly, and

Al Sparber & Gerry Jacobsen

2 ©2007 Project Seven Development

PVII Horizontal Scroller Magic.......................................................................................................................... 2

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

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

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

PVII HORIZONTAL SCROLLER Magic Highlights .............................................................................................8

Interface modes ............................................................................................................................................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 HORIZONTAL SCROLLER .....................................................................................................11

Modifying an Existing HORIZONTAL SCROLLER........................................................................................... 13

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

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

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

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

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

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

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

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

3 ©2007 Project Seven Development

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

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

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

PVII HORIZONTAL SCROLLER Magic -Control Behavior ............................................................................ 21

PVII HORIZONTAL SCROLLER Magic - Remove .......................................................................................... 25

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

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 change the border color or style for my Scroller? ..................................................................... 51

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

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

How do I add images in my scroller? ...................................................................................................... 51

4 ©2007 Project Seven Development

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

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

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

5 ©2007 Project Seven Development

INSTALL THE EXTENSION(S)

WORK IN A DEFINED DREAMWEAVER WEB SITE

6 ©2007 Project Seven Development

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

7 ©2007 Project Seven Development

PVII HORIZONTAL SCROLLER MAGIC HIGHLIGHTS

8 ©2007 Project Seven Development

SCROLLER KEYBOARD KEY OPERATION:

 Left - Right: Left or Right Arrow key

PLAY AND PAUSE

9 ©2007 Project Seven Development

MOUSE WHEEL SUPPORT

DRAG BAR SUPPORT