Manual de Utilizare

PVII Horizontal Glider Magic
A PVII Web Widget for Dreamweaver
PVII Widgets are programmed from the ground up to do one job

and do it as good as it can be done. Horizontal Glider Magic is the
ultimate glider/carousel widget. We hope you enjoy using this
product as much as we did making it.
Al Sparber & Gerry Jacobsen

PVII Horizontal Glider Magic 2
TABLE OF CONTENTS
PVII Horizontal Glider Magic ..........................................................................................................................................7
Installation .....................................................................................................................................................................7
Before you begin ...........................................................................................................................................................7
Work in a Defined Dreamweaver Web Site ...............................................................................................................7
Overview ........................................................................................................................................................................8
Inserting a New Horizontal Glider ...........................................................................................................................10
Asset Folders........................................................................................................................................................12
Modifying an Existing Horizontal Glider ..................................................................................................................13
Managing the User Interface Items .........................................................................................................................14
Mode ...................................................................................................................................................................14
Panels...................................................................................................................................................................14
Control Position Options .....................................................................................................................................15
Trigger Text ..........................................................................................................................................................16
Link Path / Browse... ............................................................................................................................................16
Trigger Image / Browse........................................................................................................................................17
Alt Text .................................................................................................................................................................17
2
Options ....................................................................................................................................................................17
Panel Dimensions ................................................................................................................................................17
Page Load.............................................................................................................................................................18
Current Marking ..................................................................................................................................................18
Trigger Action ......................................................................................................................................................19
Animation ............................................................................................................................................................19
Auto Play ..............................................................................................................................................................20
Image Swap Options ............................................................................................................................................21
Style Theme .........................................................................................................................................................21
The Interface Control Buttons .............................................................................................................................22
Select Action Dialog: Modify Existing Glider or Create Nested Glider .........................................................................23
Choose an Action .................................................................................................................................................23
Image File Naming Convention ....................................................................................................................................24
Horizontal Glider Default Naming Convention: ...................................................................................................24
Changing the image naming convention .............................................................................................................25
Removing a Glider Widget from your page .................................................................................................................27
Open the Remove PVII Horizontal Glider interface .................................................................................................27
What will be Removed .........................................................................................................................................28
What will Not be Removed ..................................................................................................................................28
The Interface Control Buttons .................................................................................................................................28
Remove ................................................................................................................................................................28
Cancel ..................................................................................................................................................................28
Help......................................................................................................................................................................28
3
Behaviors - Control Actions .........................................................................................................................................29
Creating a new Control Actions behavior ................................................................................................................29
Modifying an existing Control Actions behavior ......................................................................................................29
The Interface............................................................................................................................................................29
The Interface Items ..............................................................................................................................................30
The Interface Control Buttons .............................................................................................................................31
CSS Analysis .................................................................................................................................................................32
Background Images .....................................................................................................................................................44
Questions and Answers ...............................................................................................................................................46
Why does my Glider overflow past the right edge of my table? .............................................................................46
My Glider Sometimes Hangs in IE7 or IE8 with “1 Item Remaining” on the Status Bar. What can I do to fix this? 47
How do I use or manage Widgets in different folders? ...........................................................................................48
Can I Revert back to a default Style Theme CSS file? ..............................................................................................49
How can I re-position my Next/Previous arrows? ...................................................................................................49
My font styles/colors are not showing up, what do I do? .......................................................................................50
Can I use Horizontal Glider Magic on the same with other PVII widgets? ..............................................................51
Can I place another PVII widget inside an HGM widget, or vice versa? ..................................................................51
How do I set the width of my widget and center it? ...............................................................................................51
My Image Swaps are not working or are showing broken images. What's wrong? ................................................52
My Trigger Link Text has reverted back to the default "Trigger Text" What happened to my custom labels or
images? ....................................................................................................................................................................52
Is there a place on the PVII site where I can find more examples or tweaks? ........................................................52
4
Addendum: Advanced Current Marker Utility .............................................................................................................53
Opening the Advanced Current Marker ..................................................................................................................53
Modifying the Advanced Current Marker ................................................................................................................55
Removing the Advanced Current Marker ................................................................................................................56
Advanced Current Marker "Folder:Text Match" Option .............................................................................................57
Select the Current Marker Option ...........................................................................................................................58
Define the Folder Name :: Link Text Pairs................................................................................................................59
Specify the Folder Name......................................................................................................................................59
Specify the Link Text ............................................................................................................................................59
Adding another Folder Name :: Link Text Pair .........................................................................................................60
Using a Compound Folder Name .............................................................................................................................61
Ordering the Defined Pairs ......................................................................................................................................61
Deleting a Defined Pair ............................................................................................................................................62
Finished ....................................................................................................................................................................62
Advanced Current Marker "Link Text" Option .............................................................................................................62
Select the Link Text ..................................................................................................................................................64
Finished ....................................................................................................................................................................64
5
Advanced Current Marker URL Match Option ............................................................................................................65
Select the URL to Match ..........................................................................................................................................67
Finished ....................................................................................................................................................................67
Advanced Current Marker "None - Disable All" ..........................................................................................................68
Finished ....................................................................................................................................................................70
Support and Contact info ............................................................................................................................................71
PVII Knowledge Base ...............................................................................................................................................71
Newsgroup forum communities ..........................................................................................................................71
RSS News Feeds ...................................................................................................................................................72
Before you Contact us .........................................................................................................................................72
Snail mail..............................................................................................................................................................72
6
PVII HORIZONTAL GLIDER MAGIC
Horizontal Glider Magic is a panel widget. Hidden content panels are made to glide horizontally through a
viewport. Panel gliding can be operated by clicking trigger links and various other available controls or can be
set to play automatically, like a slide show. Unlike generic scripts, Horizontal Glider Magic is programmed
from the ground up to do one job and do it as well as it can be done.
INSTALLATION
Look for the extension installer file p7_HGM_125.mxp (or higher) 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 installation has completed.
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.
BEFORE YOU BEGIN
WORK IN A DEFINED DREAMWEAVER WEB SITE
Before you begin, make sure you are working inside a defined Dreamweaver web site. This is necessary so
that Dreamweaver knows how to link required assets. 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.
7
Overview 8
OVERVIEW
HGM installs into Dreamweaver, giving you a fully automated graphical user interface from which you can
create and manage Horizontal Glider widgets. You can add multiple widgets to a page and each one can
contain as many content panels as you need. Content panels can contain text, images, links, forms, or tables
and are editable in Dreamweaver Design View at all times. Each widget can have its own styling or widgets
can share the same styles—the choice is yours.
Create or Modify -with Nesting Support
The user interface is designed to open to the correct mode, CREATE or MODIFY, based on your current
insertion point in the document:
If your insertion point is not within an existing Horizontal Glider widget the user interface will open in
CREATE mode.
If your insertion point is inside an existing Horizontal Glider widget a dialog box will open allowing you
to choose whether to MODIFY the existing widget or CREATE a new one. This allows you to easily add
new Horizontal Glider widgets into the content panels of existing Horizontal Glider widgets, a process
called nesting.
User Definable Control Configuration -The Horizontal Glider system includes support for 5 different types of
control sets. The user interface allows you choose which control sets will be used and whether to position
them above or below the content panel. The 5 control sets can be added in any combination. These are the
available sets:
 Panel Previous and Next buttons

 Panel Trigger Buttons
 Paginator Boxes
 VCR Control Button bar
 Text-Based Control Bar
User Definable Trigger Action - Horizontal Gliders can be set to work on CLICK or on MOUSE OVER. These
actions can be set individually for each Horizontal Glider widget on the page.
Auto Width and Auto Height Support - By default, an HGM Widget automatically adapts to the width of the
page element into which you insert it. By default, an HGM Widget automatically adapts to the height of each
content panel. An interface option allows you to set a fixed height for the panel viewport. If you set a fixed
height, the viewport will display a vertical scrollbar when, or if, necessary.
8
Overview 9
Dreamweaver Template Support: The system is 100% Dreamweaver Template compatible. You can insert
one or more widgets into a template (.dwt) page at any time. You can also insert one or more widgets into a
template-based page. The system will automatically detect the template and adjust to allow insertion into
an editable region.
Current Link Marking and Auto Panel Opening: The system includes an optional feature that looks for links
in the Glider that match the current page URL (address). When a match is found, the link is highlighted and
the panel that contains the link automatically opens. The system assigns a special style class named current_
mark to this link and also to its parent panel heading. This provides a visual YOU ARE HERE indicator. This
feature can easily be turned on or off for each widget on your page directly from the user interface.
Image Support: The system supports using images for the panel triggers and automatically handles
preloading, swapping, multiple state management and current marking. This automation requires that you
follow the image file name convention. The system supports up to 4 different image states.
External Linking and Bookmark Support: An opener detection system is included that allows you to set up
links with special parameters that will load a page and also trigger a specific panel in an HGM widget on that
page. The opener will look for the HGM widget number, an underscore, and the HGM content panel number.
There are 2 methods available:
 Anchor Method: The system will look for "#hgm" plus a panel reference after the anchor. The
anchor, index.htm#hgm1_4, will trigger panel 4 in the first HGM Widget on the page.
 URL Parameter Method: The system will look for "hgm=" in the URL parameter. A URL
parameter, index.htm?hgm=2_4, will trigger panel 4 in the second HGM Widget on the page.
You can then give out the link so people can go directly to your specific content panel.
Included Dreamweaver Behavior: The system also includes a Control Actions Behavior that can be used to
create Glider actions on links located anywhere on your page.
Removal: A handy Remove Horizontal Glider command is included that can be used to quickly and
thoroughly remove any Glider widget from your page.
9
Overview 10
INSERTION
Horizontal Glider Magic widgets can be inserted anywhere on your page, even into the content panel of an
existing Horizontal Glider. Once you have established your insertion point, click the Horizontal Glider icon
to open the interface. Alternatively, you can choose Insert > Studio VII > Horizontal Glider Magic by
PVII. The Horizontal Glider width will adapt to its location—even when placed inside flexible DIVs or table
cells. You can insert as many individual Horizontal Glider widgets as you like on your page. Each one can be
configured independently to set different options and features. Horizontal Glider widgets on a single page
can share the same style theme or be set to separate style themes. Each widget can contain any type of
content. Content panels are directly editable in Dreamweaver Design View using normal Dreamweaver
editing techniques.
INSERTING A NEW HORIZONTAL GLIDER
-Establish the insertion point for your new Horizontal Glider widget by clicking in the area of the page where
you would like the widget to be created.
-Click the HORIZONTAL GLIDER MAGIC icon in the COMMON Section of Dreamweaver's Insert Bar or
choose Insert > Studio VII > Horizontal Glider Magic by PVII.
CLASSIC DREAMWEAVER INSERT BAR
DREAMWEAVER CS4 INSERT PANEL
Dreamweaver CS4 Users: We highly recommend switching to Classic Workspace mode, which allows for a conventional Insert Bar
across the top of your Design View window.
10
Overview 11
The Horizontal Glider Magic user interface will open in the Create New Horizontal Glider mode.
You can create more than one Horizontal Glider widget on your page. Add as many as you like.
Tip: When you insert a Horizontal Glider, all content will be visible and fully expanded in Dreamweaver to make adding and editing content a
simple task. The Horizontal Glider functionality can be tested by previewing in your browser.
11
Overview 12
ASSET FOLDERS
When you create a Horizontal Glider Magic widget, the system creates an assets folder named p7hgm at the
same level as the page that contains your widget. This folder will contain a JavaScript file, relevant CSS file
(or files), as well as an img sub-folder that contains the background images used by the CSS. A Fireworks
folder will be created at the same level as the p7hgm folder and will contain editable versions of all
necessary background images. THE FIREWORKS FOLDER DOES NOT NEED TO BE UPLOADED TO YOUR
WEB SERVER.
When you publish your site, make sure you upload the entire p7HGM folder.
12
Overview 13
MODIFYING AN EXISTING HORIZONTAL GLIDER
You can modify any of the existing Horizontal Glider widgets on your page at any time.
-Click inside the Horizontal Glider widget that you wish to modify.
-Click the HORIZONTAL GLIDER MAGIC icon in the COMMON Section of Dreamweaver's Insert Bar or
choose Modify > Studio VII > Modify Horizontal Glider Magic by PVII
Note: If you use a Macintosh computer, Apple bugs will sometimes cause the Modify menu to be inactive (grayed out). If this
happens to you, use the icon to launch the interface. You can also launch the interface from the Insert menu.
SELECT ACTION DIALOG
The SELECT ACTION dialog box will be displayed to allow you to choose whether to create a new Glider
widget nested inside of the existing Glider, or to Modify the existing Glider widget.
Note: This dialog only appears when your insertion point is inside of another Glider system. If your insertion point is not inside a
Glider widget the interface will open directly to the main Glider interface in Create mode.
13
Overview 14
The Horizontal Glider Magic User Interface will open in the Modify Existing Horizontal Glider mode.
MANAGING THE USER INTERFACE ITEMS
MODE
Displays the current operational Mode for the user interface: either CREATE or MODIFY. When in Modify
mode, the id of the Horizontal Glider widget being modified will also be displayed.
PANELS
This box displays the text for each panel in the Horizontal Glider, one line for each panel or external link.
Select (click) the line you wish to act on.
ADD
Click the Add button to add a new content panel. A new line will be created with the default text "Trigger
Text". The new line will be created immediately after the currently selected line.
14
Overview 15
DELETE
Click the Delete button to remove the currently selected line. The content panel will be removed.
UP
The Up button will move the selected line in the Panels list up one row. Successive clicks will keep moving
the line upwards, one row per click, until the line is at the top of the list.
DOWN
The Down button will move the selected line in the Panels list down one row. Successive clicks will keep
moving the line down, one row per click, until the line is at the bottom of the list.
CONTROL POSITION OPTIONS
The Horizontal Glider includes support for 5 different control sets. The user interface allows you choose
which control sets will be used and also allows a choice of position, above or below the content panel. You
can choose to use one control set, no control sets, all control sets, or any combination. Each of the Controls
(except the Prev/Next buttons) can be set by selecting the Display Option from the associated drop down
listing:
 None -The feature will NOT be displayed

 Above Panel -The control bar will be displayed ABOVE the viewport panel.
 Below Panel -The control bar will be displayed BELOW the viewport panel.
PREV/NEXT
These are the PREVIOUS and NEXT arrow buttons that appear to the left and right of the Glider viewport.
Check the Show box to display these buttons.
TRIGGER LINKS
The Trigger Links bar will display text or image link for each of the content panels in a horizontally oriented
list. These links act as triggers to display their associated content panel.
Choose the display option from the drop down list.
Note: If you set an existing set of Trigger Links to None, and then click OK to close the interface, any text that you had in the listing
will be lost and the default "Trigger Text" will appear when you next open the Modify interface.
15
Overview 16
PAGINATOR BAR
The Paginator Bar will create a series of numbered boxes, one for each content panel, in a horizontally
oriented list. These will act as trigger links to display the associated panel. Choose the display option from
the drop down list. You can also choose to have a fully functional text-based Pause/Play link displayed at the
end of the Paginator Bar by checking the Pause/Play box.
VCR BUTTON BAR
The VCR Button Bar is an image-based control set that features First, Previous, Pause/Play, Next, and Last
buttons. Choose the display option from the drop down list.
VCR TEXT BAR
The VCR Text Bar is a text based control set that features First, Previous, Pause/Play, Next, and Last buttons.
Choose the display option from the drop down list.
TRIGGER TEXT
The Trigger Text box will always display the text of the currently selected line in the PANELS list. The system
will display TRIGGER TEXT as the default text when first adding a new content panel. Enter or edit the text
that you wish to display for this panel heading. THE BOX CANNOT BE LEFT BLANK. If you choose not to have
the Trigger Link Bar displayed simply accept the default text.
Note: If an image has been assigned, this box will be disabled (grayed out) and contain the file name of the assigned image.
Removing the Image Path will re-enable this box.
LINK ONLY -NO ASSOCIATED CONTENT PANEL

Check this box if you wish to have the selected Trigger Text serve as a normal page link with no content
panel associated with it.
LINK PATH / BROWSE...

The Link box is activated whenever the Link Only box is checked. Enter the path to the linked page for this
panel heading or use the Browse button to open the SELECT FILE TO LINK dialog box. If no entry is made,
the system will automatically supply a "javascript:;" null link.
16
Overview 17
TRIGGER IMAGE / BROWSE...
Note: The Image Path box is only used if you are using images for your headings. For text-based headings this box should be left
empty.
Enter the path to your image, or use the Browse button to open the SELECT IMAGE SOURCE dialog box. You
can change the image at any time by selecting the trigger item in the Panels list and clicking the "Browse..."
button. Valid image types are: .gif, .jpg, and .png.
The image you select must always be the default state image. The system will automatically handle image
preloading for over, down, and overdown images based on the Image Swap Option you select. Your default
state image file names can be anything you like. However, you must follow a naming convention for the
swap images. This naming convention is user-definable so you can adapt it to your workflow.
ALT TEXT
Enter a description (Alt Text) for the related image. If the text on the image is "Products" then PRODUCTS
would be a good choice for the description.
OPTIONS
These settings are applied to the current Horizontal Glider widget. Other Horizontal Glider components on
the same page can have different Options.
PANEL DIMENSIONS
You can choose to have the Horizontal Glider run with fully automated dimensions, where the Glider will
adapt to the width of the page element into which you insert it.
FIXED PANEL HEIGHT
By default the system is designed to fully display each content panel. The viewport will change height to fully
reveal the contents of each panel. You can choose to set a fixed height so that the viewport will never
change height by checking the FIXED PANEL HEIGHT option box and entering the height amount (in pixels)
into the amount box. The system will then set this fixed height for all of the panels, and will automatically
display a vertical scroll bar for any panel whose content height is longer than the assigned height.
17
Overview 18
PAGE LOAD
You can choose the Horizontal Glider startup configuration when the page first loads into the browser.
START WITH PANEL
Enter the number of the panel which you would like as the current panel when the page first loads.
START WITH RANDOM PANEL
Select this option if you wish to have the system randomly select a panel to open. Each time the page loads
into the browser a random panel will be selected.
CURRENT MARKING
These settings control the operation of the included automatic Current Marking system.
ENABLE
Check this box to enable automatic current marking (highlighting) of links in your Horizontal Glider. The
system looks for links in the Horizontal Glider that match the current page URL (address). When a match is
found, the link is highlighted and the panel that contains the link is set to be the currently active panel. The
system assigns a special style class named current_ mark to this link and also to its associated Trigger Link (if
available). This provides a visual “you are here” indicator.
Note: This box must be checked in order to use the Advanced Current Marker features for the widget.
INCLUDE URL PARAMETERS IN MATCH
This option controls whether the automatic current marking feature will include any URL parameters in the
page's address when looking for a matching link in the widget. Check this box if you wish to have your URL
parameters included in the match criteria.
18
Overview 19
TRIGGER ACTION
ENABLE MOUSE OVER ON TRIGGERS
Check this box to allow mouse over activation of the Trigger Panel links. The associated panel will open
whenever the user moves his mouse over the Trigger link. The click behavior to open the panel will still
remain enabled.
ENABLE MOUSE OVER ON PAGINATORS
Check this box to allow mouse over activation of the Paginator Bar links. The associated panel will open
whenever the user moves his mouse over a Paginator link. The click behavior to open the panel will still
remain enabled.
ANIMATION
You can select one of four different animation options:
 0-None -Choose this option to disable animation.

 1-Glide-Normal - This setting will glide the panels open or closed based on a timed duration. The
more content you have in a panel, the faster the animation will appear to be. You can adjust the
Duration setting to increase or decrease animation speed.
 2-Glide-Gradual Stop -This setting will smoothly glide the panels open or closed—slowing to a
gradual stop as the animation ends. Glide speed automatically adjusts to the width and height of
the content panel.
 3-Fixed Rate Glide - The animation will run at a fixed rate, regardless of viewport width.
 4-Fade -This provides a pleasing cross-fade when switching panels. If the Enable Auto Height box
is checked then the system will provide a Glide animation to the necessary height for each panel.
DURATION
This option allows you to control speed for the Normal and Fixed Rate Glide animations. This option has no
effect on the Glide -Gradual Stop animation. DURATION defines the total amount of time that the
animation will run, in milliseconds, regardless of a content panel's dimensions. The default 250 (a quarter of
a second) is fine in most cases. Lower the DURATION setting and the animation will be faster. Raise the
setting to make the animation slower.
19
Overview 20
AUTO PLAY
The Horizontal Glider includes an automated panel rotator system that will display each panel in succession,
starting with the currently active panel.
PLAY ON STARTUP
Check this box if you want to have the panel rotator start automatically when the page first loads.
SHOW EACH PANEL FOR
This controls the amount of time each panel is displayed during the rotation, in milliseconds. The default is
5000ms (5 seconds). To display each panel for 8 seconds, for example, enter 8000 into the box.
LOOP
The Panel Rotator will normally stop when it reaches the last panel. With the Loop option enabled the
Rotator will switch back to the first panel and continue playing after the last panel has been displayed.
AUTO REVERSE
The Panel Rotator will normally stop when it reaches the last panel. With the Auto Reverse option enabled
the Rotator will switch to the previous panel and continue playing in reverse order until it reaches the first
panel. Then it will reverse again, advancing to the last panel—and so on.
PAUSE AUTO PLAY ON MOUSE OVER
Check this box is you wish to have the Auto Play rotator stop whenever the user moves his mouse over the
content panel. The Auto Play will continue automatically once the user moves his mouse away from the
content panel.
PAUSE AUTO PLAY ON CONTROL ACTIONS
The Horizontal Glider is set to shift into Pause mode whenever one of the control links is clicked. Uncheck
this box if you wish to continue in Play mode even when a control link is clicked.
20
Overview 21
IMAGE SWAP OPTIONS
The system supports using images for any of the Trigger links and is designed to automatically handle
preloading, swapping, maintaining states, and assigning a current marker. This automation requires that you
follow the image file name convention. The system supports up to 4 different image states. Select the Swap
Option that you would like to use:
 Single Image Only -Choose this option if you are using just a single image and do not want any
image swap actions on any of the trigger states.
 Normal and Over - Choose this option if you are using two images: one normal image and one
for the over (hover) state. The over state image will also be used as the open (down) state and
current mark images.
 Normal, Over and Open Images - Choose this option if you are using three images: one normal
image, one for the over (hover) state, and one for the open (down) state. The open state image
will be used for the current marker images.
 Normal, Over, Open and Mark - Choose this option if you are using four images: one normal
image, one for the over (hover) state, one for the open (down) state, and one for the current
marker state.
Note: Be sure to choose the option carefully to match the number of image states you are using. The system will pre-load the various
state images based on this selection.
ROLLOVER OPEN STATE
This controls the swap action when the trigger link is in its open state. The system will swap to the over
image if the trigger link is in the open state. Uncheck the box if you want to disable this swap action.
ROLLOVER MARK STATE
This controls the swap action taken when the trigger link is in its CURRENT MARKED state. The system will
swap to the over image on rollover if the trigger link is in the CURRENT MARKED state. Uncheck this box if
you want to disable this feature.
STYLE THEME
Horizontal Glider Magic comes with a variety of pre-defined CSS style themes. Choose a theme that best
approximates the look you desire. This will act a starting point from which you can later make edits to the
style sheet to fully customize your Horizontal Glider(s). You can change to a different style type at any time
without affecting the contents of the Horizontal Glider widget.
A preview of the selected Style Theme is displayed to the right of the Style Theme select list. This Preview
will change whenever you select a different Style Theme.
21
Overview 22
THE INTERFACE CONTROL BUTTONS
OK
When you are done, click the OK button to build the Horizontal Glider. 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 Glider will be added to your page or updated—depending on whether you were in CREATE
MODE or MODIFY MODE. You can then preview in a browser to operate the Horizontal Glider and check its
functionality.
Tip: To make further changes, click inside a Horizontal Glider to open the interface.
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 Horizontal Glider Magic interface.
22
Select Action Dialog:
23
Modify Existing Glider or Create Nested Glider
SELECT ACTION DIALOG:

MODIFY EXISTING GLIDER OR CREATE NESTED GLIDER
The Horizontal Glider user interface is designed to open to the correct mode, CREATE or MODIFY, based on
your current insertion point in the document:
If your insertion point is NOT within an existing Horizontal Glider widget the user interface will
open in CREATE mode. If your insertion point is INSIDE AN EXISTING Horizontal Glider widget the
SELECT ACTION dialog box will open allowing you to choose whether to MODIFY the existing
widget or CREATE a new one. This allows you to easily add new Horizontal Glider widgets into the
content panels of existing Horizontal Glider widgets—a process known as NESTING.
Whenever your current insertion point is inside of an existing Horizontal Glider, the SELECT
ACTION interface will open.
CHOOSE AN ACTION
MODIFY EXISTING GLIDER
Click this button to launch the MODIFY interface. The system will open the MODIFY interface for the existing
Glider.
CREATE NESTED GLIDER

Click this button to launch CREATE mode. The system will create the new Glider at the current insertion
point inside of the existing Glider.
23
Image File Naming Convention 24
IMAGE FILE NAMING CONVENTION
Horizontal Glider Magic supports the use of image-based trigger links with preloading, swapping, multiple
state management and current marking automatically handled. The system supports up to 4 different image
states:
 Normal - the base image

 Over - appears on mouse hover
 Open - appears when the menu item's related sub menu is open
 Mark (see note below) - appears when the menu item has been CURRENT MARKED
Note: Horizontal Glider Magic allows you to designate trigger links as links to other pages instead of being panel Triggers. When you
click a trigger link that links to another page, and that page loads, the system detects that the current page matches the link and that
link is highlighted if the Current Marking option has been selected in the HGM User Interface.
The system automatically loads the appropriate image based on the Image Swap option chosen in the User
Interface. When you choose an image in the HGM User Interface, you only choose the Normal (base) image.
The system will look at your Swap Options and, if additional images are required, it will look for those images
in the folder that contains your Normal image.
This automation requires that you follow an image file naming convention. Your base (normal state) image
file name can be anything you like, but you must follow a naming convention for the "Over", "Open" and
"Mark" state images. For example, if you name your base image myButton.gif, the following conventions
must be used for your additional state images:
 The image that displays when users mouse over the base image would be named:
myButton_over.gif
 The image that displays when its associated panel is showing would be named:
myButton_overdown.gif
 The image that displays when its link is a link to another page, and that page has been loaded,
would be: myButton_down.gif.
HORIZONTAL GLIDER DEFAULT NAMING CONVENTION:
 Normal Image: myButton.gif

 Over Image: myButton_over.gif
 Open Image: myButton_overdown.gif
 Mark Image: myButton_down.gif
The default naming convention is designed to work with the default Fireworks (CS4) naming convention for
exporting multiple state images. Our naming convention is user-definable to allow you to match your image
editor's capabilities or your own requirements.
24
CHANGING THE IMAGE NAMING CONVENTION
The basic image name must be the same for all four button images, but the appendage you use to
differentiate the over, open and mark state images can be anything you like.
1. Open the p7HGMscripts.js file located in the p7pmm folder. Near the top of the file you will see 3 lines
(not counting the comments):
// define the image swap file naming convention
// rollover image for any image in the normal state

var p7HGMover='_over';
// image for any trigger that has an open sub menu -no rollover
var p7HGMopen='_overdown';
// image to be used for current marker -no roll over

var p7HGMmark='_down';
2. To change the naming convention simply change the assigned text that follows the equal (=) sign in each
of the three lines.
For example, if you want to change the naming convention to use the appendages _over, _open, and
_marked, change the assignments so they look like this:
// define the image swap file naming convention
// rollover image for any image in the normal state

var p7HGMover='_over';
// image for any trigger that has an open sub menu -no rollover
var p7HGMopen='_open';
// image to be used for current marker -no roll over

var p7HGMmark='_marked';
25
3. Save and close the file.
Now the Horizontal Glider system will use this revised naming convention to locate the over, open and mark
state images. The image file names, using this customized naming convention, would look like:
 Normal Image: myButton.gif

 Over Image: myButton_over.gif
 Open Image: myButton_open.gif
 Mark Image: myButton_marked.gif
As you can see, any naming convention will work by managing the text assignment for each image state in
the scripts file.
Note: If you create a system in another folder or site, and you want to use a revised naming convention, you will need to update the
script file in that folder.
26
Removing a Glider Widget from your page 27
REMOVING A GLIDER WIDGET FROM YOUR PAGE
The Horizontal Glider system includes a Remove command that allows you to quickly remove an existing
Horizontal Glider widget from your page.
OPEN THE REMOVE PVII HORIZONTAL GLIDER INTERFACE
-Open a page that contains one or more Horizontal Glider widgets.
-Choose Commands > Studio VII > Remove Horizontal Glider... to open the Remove interface.
Note: The Remove option will be unavailable (grayed out) if there is no Horizontal Glider widget on the page.
The Remove Horizontal Glider interface will open.
The interface will provide a listing of all of the Horizontal Glider widgets on your page. The list will display the
root ID of each widget.
-Select the widget that you wish to remove from the listing (you can only remove one widget at a time).
Tip: If you are unsure about which widget relates to which ID, click the Cancel button and switch to Code View. In Code View, locate all IDs
that begin with p7HGM. The opening DIV tag for a Horizontal Glider widget looks like this: <div id="p7HGM_1" class="p7HGM01">
27
Removing a Glider Widget from your page 28
WHAT WILL BE REMOVED
The system will completely remove the html markup for the selected widget from your page, along with any
widgets that are nested inside. If there are other Horizontal Glider widgets on the page they will not be
affected. The system will also remove the link to the relevant CSS file IF NO OTHER WIDGET ON THE PAGE
IS USING THE SAME STYLE THEME.
If there are no remaining Horizontal Glider widgets on your page, the system will also remove the link to the
Horizontal Glider JavaScript file.
WHAT WILL NOT BE REMOVED
The system will not remove the p7HGM folder, which contains the widget-related assets (images, JavaScript
file, and CSS files). This ensures that you will not lose any assets you may have modified and 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 Glider widget will be removed from the page
CANCEL
Click the Cancel button to completely abort the current Remove Horizontal Glider 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 Glider interface.
28
Behaviors - Control Actions 29
BEHAVIORS - CONTROL ACTIONS
The Control Behavior allows you to configure a link anywhere on your page to remotely operate any
Horizontal Glider widget on your page.
CREATING A NEW CONTROL ACTIONS BEHAVIOR
1. Select (click) a text link or image to act as the behavior Control.

2. Open your Behaviors panel (Shift + F4)
3. Click the plus sign (+) on the Behaviors panel.
4. Choose Studio VII > Horizontal Glider > Control Actions to open the interface.
5. Select the widget you wish to act on.
6. Select the action.
7. Click OK to apply the behavior.
MODIFYING AN EXISTING CONTROL ACTIONS BEHAVIOR
1. Select the element that contains an existing Horizontal Glider Control behavior.
2. Double-click the Horizontal Glider Magic- Control Actions behavior in the Behaviors panel to
open the interface.
3. Select the widget you wish to act on.
4. Select the action.
5. Click OK to apply the revised behavior.
THE INTERFACE
The Horizontal Glider Magic -Control Actions interface allows you to select an action to apply.
29
THE INTERFACE ITEMS
HORIZONTAL GLIDER
The interface contains a listing of all of the Horizontal Glider widgets on your page. The list will display the ID
of each widget. Select the Horizontal Glider you want to control.
Tip: If you are unsure about which widget relates to which ID, click the Cancel button and switch to Code View. In Code View, locate all IDs
that begin with p7HGM. The opening DIV tag for a Horizontal Glider widget looks like this: <div id="p7HGM_1" class="p7HGM01">
ACTION
Select the action you want to apply.
FIRST PANEL
This will display the First panel in the widget.
PREVIOUS PANEL
This will display the panel that is previous to the currently displayed panel.
PLAY
This will Start (resume) the Auto Play Mode.
PAUSE
This will Stop (or pause) the running Auto Play mode.
NEXT PANEL
This will display the panel that is next to the currently displayed panel.
LAST PANEL
This will display the last panel in the widget.
30
OPEN PANEL NUMBER...
This allows you to select the exact panel to be displayed by entering a Panel Number.
PANEL NUMBER
This box is active only when the Open Panel Number action is selected. Enter the number of the panel you
wish to display.
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.
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 Horizontal Glider Magic interface.
31
CSS Analysis 32
CSS ANALYSIS
The look of your Glider widget is controlled by CSS. Each Style Theme you choose has an associated CSS file:
 01 Blue Mist: p7hgm01.css

 02 Ebony: p7hgm02.css
 03 Teal: p7hgm03.css
 04 Basic: p7hgm04.css
 05 Image-Based: p7hgm05.css
All of the style sheets have a similar structure. The analysis below is based on the Basic style sheet
(p7hgm04.css), but the notes will apply to all HGM style sheets.
The Root or Main DIV. Use this rule to assign font attributes for the entire widget. You can also assign
padding and a border to create a boxed-in look for your entire widget.
.p7HGM04 {
padding: 0px;
zoom: 1;
}
The Outer Wrapper for the sliding content.

.p7HGM04 .p7HGM_viewport_wrapper {
position: relative;
border: 1px solid #666;
}
The content Panels

Use this rule to set font and padding for your content panels.
Do not set margins or borders on this rule.
.p7HGM04 .p7HGM_panel_content {
font-size: 13px;
line-height: 1.5em;
padding: 20px;
}
32
CSS Analysis 33
THE TRIGGER LINKS
The Trigger Links outer wrapper…

Overflow hidden clears the floated list items and must not be edited. Zoom is a fix for older versions of IE.
Use this rule if you would like to set a particular font or font size to your trigger links.
In the Teal and Blue Mist CSS this rule also assigns a background image and borders.
.p7HGM04 .p7HGMtrig {
overflow: hidden;
font-size: 14px;
zoom: 1;
margin-bottom: 6px;
}
Exception rules for Triggers when positioned at bottom.

.p7HGM04 .p7HGMtrig.trigbottom {
margin-bottom: 0px;
margin-top: 6px;
}
Trigger Links unordered list tag.

Do not edit.
.p7HGM04 .p7HGMtrig ul {
margin: 0px;
padding: 0px;
overflow: hidden;
}
Trigger Links list tags.

Do not edit list-style-type or float properties.
Use this rule to set margins between the individual trigger links.
.p7HGM04 .p7HGMtrig li {
list-style-type: none;
float: left;
margin-right: 6px;
}
33
CSS Analysis 34
The Trigger link styles…

Do not change display: block.
You may edit any other properties to customize your Trigger links.
You can also add background properties if you wish your Trigger links to have a background in their default
state.
.p7HGM04 .p7HGMtrig a {
display: block;
padding: 10px 16px;
color: #000;
text-decoration: none;
}
The Trigger Links hover state.

.p7HGM04 .p7HGMtrig a:hover {
color: #CCC;
background-color: #000;
}
The Trigger Links open or selected state.

This special class is assigned to a Trigger link when that trigger's panel is open.
.p7HGM04 .p7HGMtrig .panel_open {
color: #CCC;
}
34
CSS Analysis 35
The Control arrows…

These are the arrows that can optionally be placed to the left and right of the viewport
and which contain Previous and Next behaviors.
Control Arrows wrapper DIV.

This DIV must be absolutely positioned.
To center the arrows vertically, a top value of 50% is used and a negative top margin value equal to half the
DIV height.
The height and width values must always be set to the height and width of the Control Arrow images.
Z-index is set high to ensure the arrows appear on top of your panels.
If your panels are different heights and you do not want your arrows to move as the height of the viewport
changes, remove the margin-top property and change the top value from 50% to a fixed value in pixels.
.p7HGM04 .p7HGM_controls div {
position: absolute;
top: 50%;
z-index: 9999;
margin-top: -20px;
height: 35px;
width: 18px;
display: none;
}
This rule sets the left position of the left (Previous) arrow, placing it 24px to the left of the Viewport.
You can adjust this to suit.
.p7HGM04 .p7HGM_controls div.p7HGM_prev {
left: -24px;
}
This rule sets the right position of the right (Next) arrow, placing it 24px past the right edge of the Viewport.
You can adjust this to suit.
.p7HGM04 .p7HGM_controls div.p7HGM_next {
right: -24px;
}
This rule ensures that images within the Control DIVs have no borders. The Control DIVs contain special
transparent images and so we must set their height and width to match the background images used.
.p7HGM04 .p7HGM_controls div img {
border: 0;
width: 18px;
height: 35px;
}
35
CSS Analysis 36
The following rule sets the background image of the “Previous” control to a left-facing arrow image.
We also set the link to display as a block, which must not be changed.
.p7HGM04 .p7HGM_controls div.p7HGM_prev a {
background-image: url(img/p7hgmBasic_CTRLPrev.gif);
background-repeat: no-repeat;
display: block;
}
The flowing rule sets the background image of the Next control to a right-facing arrow image.
We also set the link to display as a block, which must not be changed.
.p7HGM04 .p7HGM_controls div.p7HGM_next a {
background-image: url(img/p7hgmBasic_CTRLNext.gif);
display: block;
}
The previous and next background images are comprised of 3 vertical sections, each 35px tall.
The first section is the default state, the middle section is the hover state and the bottom is the off (grayed
out) state. On hover, we move the background image up by 35px to reveal the hover state.
.p7HGM04 .p7HGM_controls a:hover {
background-position: 0px -35px;
}
We move the background image up by 70px to reveal the off (grayed out) state.
For this state we also set a default cursor.
.p7HGM04 .p7HGM_controls a.off, .p7HGM04 .p7HGM_controls a.off:hover {
cursor: default;
}
36
CSS Analysis 37
The PAGINATOR LINKS

The Paginator Links are optional and added to your page depending on the options you choose in our
interface.
They can be used in place of conventional trigger links or to augment them.
The root Paginator container…

Overflow hidden should not be edited. You can adjust font-size to suit.
Tip: if you would like the Paginator to act as a progress indicator, you can set the font-size to 1px and then in
the link styles that follow set color to match the background, effectively hiding the Paginator numbers. The
Paginator links will then appear as simple boxes.
.p7HGM04 .p7HGMpaginator {
overflow: hidden;
font-size: 12px;
margin-bottom: 6px;
zoom: 1;
}
Paginator Links unordered list tag.

Do not edit.
.p7HGM04 .p7HGMpaginator ul {
margin: 0;
padding: 0px;
overflow: hidden;
}
EXCEPTION RULE FOR PAGINATOR WHEN POSITIONED AT BOTTOM

.p7HGM04 .p7HGMpaginator.pagbottom {
margin-top: 6px;
}
Paginator Links list tags.

Do not edit list-style-type or float properties.
Use this rule to set margins between the individual trigger links.
.p7HGM04 .p7HGMpaginator li {
float: left;
margin-right: 6px;
}
37
CSS Analysis 38
The Paginator link styles…

Do not change display: block.
You may edit any other properties to customize your Paginator links.
You can also add background properties if you wish your Paginator links to have a background in their
default state.
.p7HGM04 .p7HGMpaginator a {
display: block;
padding: 2px 6px;
color: #000;
}
The Paginator Hover styles

.p7HGM04 .p7HGMpaginator a:hover {
color: #CCC;
}
The Paginator Links open or selected state.

This special class is assigned to a Paginator link when that link's associated panel is showing.
.p7HGM04 .p7HGMpaginator .panel_open {
color: #CCC;
}
The VCR-Style Navigation Controls - Background Image Method

The VCR-Style Navigation Controls are optional and added to your page depending on the options you
choose in our interface. They contain a full complement of multimedia controls: First, Previous, Play/Pause,
Next, and Last.
.p7HGM04 .p7HGMvcr {
overflow: hidden;
margin-top: 12px;
}
The VCR-Controls Unordered List…

Do not remove overflow hidden. Use padding to adjust white space above and below the bar.
.p7HGM04 .p7HGMvcr ul {
margin: 0;
width: 148px;
padding: 0;
overflow: hidden;
}
38
CSS Analysis 39
VCR Controls list tags.

Do not edit this rule at all.
.p7HGM04 .p7HGMvcr li {
float: left;
}
EXCEPTION RULES FOR VCR CONTROLS WHEN POSITIONED AT TOP

.p7HGM04 .p7HGMvcr.vcrtop {
margin-bottom: 12px;
}
.p7HGM04 .p7HGMvcr.vcrtop li {
margin: 0;
}
VCR Controls images tag.

Do not edit this rule.
.p7HGM04 .p7HGMvcr img {
border: 0;
}
VCR Controls default link style.

Do not edit this rule unless you edit your control image height.
.p7HGM04 .p7HGMvcr a {
display: block;
height: 30px;
}
VCR Controls "First" button background image...

.p7HGM04 .p7HGMvcr .p7HGM_first a {
background-image: url(img/p7hgmBasic_First.gif);
}
.p7HGM04 .p7HGMvcr .p7HGM_first img {

width: 26px;
height: 30px;
}
39
CSS Analysis 40
VCR Controls "Previous" button background image.

.p7HGM04 .p7HGMvcr .p7HGM_prev a {
background-image: url(img/p7hgmBasic_Prev.gif);
}
.p7HGM04 .p7HGMvcr .p7HGM_prev img {
width: 26px;
height: 30px;
}
VCR Controls "Play" button background image.

.p7HGM04 .p7HGMvcr .p7HGM_play a {
background-image: url(img/p7hgmBasic_Play.gif);
}
.p7HGM04 .p7HGMvcr .p7HGM_play img, .p7HGM04 .p7HGMvcr .p7HGM_play .pause img {
width: 32px;
height: 30px;
}
VCR Controls "Pause" button background image.

The Pause and Play images are the same. We just change background position to reveal the "Pause" part of
the image.
.p7HGM04 .p7HGMvcr .p7HGM_play .pause {
background-image: url(img/p7hgmBasic_Play.gif);
background-position: 0px -60px !important;
}
VCR Controls "Next" button background image.

.p7HGM04 .p7HGMvcr .p7HGM_next a {
background-image: url(img/p7hgmBasic_Next.gif);
}
.p7HGM04 .p7HGMvcr .p7HGM_next img {

width: 26px;
height: 30px;
}
40
CSS Analysis 41
VCR Controls "Last" button background image.

.p7HGM04 .p7HGMvcr .p7HGM_last a {
background-image: url(img/p7hgmBasic_Last.gif);
}
.p7HGM04 .p7HGMvcr .p7HGM_last img {
width: 28px;
height: 30px;
}
VCR Controls hover state…

We change background position to reveal the hover part of the image
.p7HGM04 .p7HGMvcr a:hover {
}
VCR Controls hover state for Pause button.

We change background position to reveal the hover part of the pause image
.p7HGM04 .p7HGMvcr .p7HGM_play .pause:hover {
background-position: 0px -90px !important;
}
VCR Controls off state.

We change background position to reveal the off (grayed out) part of the image.
We also set cursor to default.
.p7HGM04 .p7HGMvcr a.off {
cursor: default;
}
41
CSS Analysis 42
The VCR-Style Navigation Controls - Text Method

The VCR-Style Navigation Controls are optional and added to your page depending on the options you
choose in our interface.
They contain a full complement of multimedia controls in plain text: First, Previous, Play/Pause, Next, and
Last.
The VCR-Controls (Text Method) Unordered List…

Do not remove overflow hidden. Use the first padding value to adjust white space above and below the bar.
Set your font-size to one that suits you.
.p7HGM04 .p7HGMvcrtext {
font-size: 12px;
margin-top: 6px;
zoom: 1;
}
EXCEPTION RULE FOR VCR TEXT CONTROLS WHEN POSITIONED AT TOP

.p7HGM04 .p7HGMvcrtext.vcrtext_top {
margin-bottom: 6px;
}
.p7HGM04 .p7HGMvcrtext ul {
margin: 0;
padding: 0;
overflow: hidden;
}
VCR Controls (Text Method) list tags.

Edit only the margin-right value to provide or alter space between links.
.p7HGM04 .p7HGMvcrtext li {
float: left;
margin-right: 6px;
}
VCR Controls (Text Method) default link style.

Edit any property EXCEPT display block.
.p7HGM04 .p7HGMvcrtext a {
padding: 4px 8px;
display: block;
color: #000;
}
42
CSS Analysis 43
VCR Controls (Text Method) hover link style…

.p7HGM04 .p7HGMvcrtext a:hover {
color: #CCC;
}
VCR Controls (Text Method) off (grayed out) state…

.p7HGM04 .p7HGMvcrtext a.off, .p7HGM04 .p7HGMvcrtext a.off:hover {
color: #7D7D7D;
cursor: default;
background-color: #CCC;
border-color: #CCC;
}
CURRENT MARKER STYLES…

The Current marker class is automatically assigned to links that match the address of the current page. Think
of it as a "you are here" indicator.
The Current marker for the Triggers…

.p7HGM04 .p7HGMtrig .current_mark {
font-weight:bold;
}
The Current marker for links in the content panels…

.p7HGM04 .p7HGM_panel_content .current_mark {
color:#000;
font-weight:bold;
}
43
Background Images 44
BACKGROUND IMAGES
Each style theme uses background images for control buttons. Some themes use background images for the
main Triggers, as well. When you create an HGM widget, the system will create a Fireworks folder at the
same level as your page and in that folder will be Fireworks documents for each style theme. Use these
documents to edit the background images for a theme. These are the Fireworks documents:
 p7HGM_Basic.png
 p7HGM_BlueMist.png
 p7HGM_Ebony.png
 p7HGM_Teal.png
 p7HGM_Image-Based.png
The Fireworks documents are added to your folder only when you choose its associated style theme.
It is highly recommended that unless you are proficient with both image editing and CSS that you limit your edits to simple color
changes.
44
Background Images 45
Once you've edited the images inside a Fireworks document, you need to export the images back to your
Web site's p7hgm/img folder. In Fireworks, use these export settings:
Note: The File name box is irrelevant since you are exporting slices.
45
Questions and Answers 46
QUESTIONS AND ANSWERS
The following questions and answers should prove helpful as you build and manage your widgets.
WHY DOES MY GLIDER OVERFLOW PAST THE RIGHT EDGE OF MY TABLE?
HGM uses modern, advanced DOM scripting methods to do things that no other widget of its kind, including
jQuery-based widgets, can ever hope to achieve. Table-based layouts are not fully exposed to a browser’s
document object model and so dimensions for child elements are not easy to retrieve when tables are used.
If you must use tables, the workaround for this is to assign an explicit width to the root HGM DIV and to set
overflow hidden. If you are using left and right arrows for previous and next functionality, then you also
need to set left and right padding to 20px to leave room for the arrows. Each HGM widget on your page is
assigned an ID, so you can use that ID to create a CSS rule. Locate the opening DIV tag for your widget. It will
look like this:
<div id="p7HGM_1"…
The “_1” means his is the first HGM widget on your page. The second HGM widget on your page would have
“_2” in its name.
Create a CSS rule targeting this DIV:
# p7HGM_1 {
width: 500px;
overflow: hidden;
padding: 0 20px;
}
Set the width to the value you need. If you are not using previous/next arrow controls, you can omit the
padding.
46
MY GLIDER SOMETIMES HANGS IN IE7 OR IE8 WITH “1 ITEM REMAINING”

ON THE STATUS BAR. WHAT CAN I DO TO FIX THIS?
This is a known bug in IE7 and IE8. No one knows why it happens and it’s impossible to predict when it will
happen and on what kind of page it will happen.
The only foolproof fix is to include a script initializer just before your page’s closing body tag. Locate your
closing body tag:
</body>
Make a new line just above it and add this code:
<script type="text/javascript">
P7_initHGM();
</script>
Note: If you are using Dreamweaver’s Template features, you’ll need to add an Editable Region in your DWT file – Just above your
closing </body> tag. This will allow you to add the above code block, as needed, to any page based on your Template.
Your page will now be bulletproof.
47
HOW DO I USE OR MANAGE WIDGETS IN DIFFERENT FOLDERS?
When you create a widget, the system writes a folder named p7hgm in the folder that contains the page you
are working on - and uses that folder to store style sheets, images, and scripts. This allows for easy and safe
prototyping. If you create a widget on page1.htm, in a folder named tutorials, and edit the CSS for that
widget, your changes are restricted to that folder. Make another page in that folder and create a widget
using the same STYLE THEME and it will use the same style sheet you edited while working on page1. If you
create a widget on a page in a new folder, the system will create a new P7HGM folder inside that folder and
populate it with default style sheets, scripts, and images. This allows you to test and prototype with
complete freedom - without affecting finalized pages in other folders.
There may, however, be times when you want widgets in different folders to use the same style sheets. To
do that, create your widgets first. Then decide which p7hgm assets folder you want to use for all your pages.
You'll need to set the paths for all CSS files, and the JavaScript file, to point to the p7hgm assets folder you
want to use. For a page with a Blue Mist widget, the CSS and script links look like this:
<link href="p7hgm/p7hgm01.css" rel="stylesheet" type="text/css" media="all" />

<script type="text/javascript" src="p7hgm/p7HGMscripts.js"></script>
You can change the path to CSS or script files visually in Dreamweaver by displaying Head Content in a
toolbar at the top of your design window. To turn this feature on, choose View > Head Content.
Click the appropriate icon and your Property Inspector will change to reflect your choice, easily enabling you
to browse to the location of the assets folder you want to use.
48
CAN I REVERT BACK TO A DEFAULT STYLE THEME CSS FILE?
Should you ever make a large error and need to revert back to a default and working CSS file, do this:
1. Delete the bad CSS file from your p7hgm folder

2. Open a page in that folder that contains a widget that uses that bad style sheet. Your widget will
appear unstyled. Don't worry, that's expected, given the circumstances
3. Place your cursor inside the widget
4. Open the HGM UI in MODIFY Mode
5. Make no changes in the UI - simply click the OK button
6. The system will create a new version of the appropriate CSS file
Depending on your DW version, you might not see the changes at first. If that be the case, save and close the
file, then re-open it.
HOW CAN I RE-POSITION MY NEXT/PREVIOUS ARROWS?
To change vertical positioning, edit the .p7HGM_controls div rule in your style sheet. To change horizontal
positioning, edit the .p7HGM_controls div.p7HGM_prev and .p7HGM_controls div.p7HGM_next rules in
your CSS file to change the horizontal position. These rules are covered in greater detail in the CSS Analysis
section of this guide.
If your arrows do not have sufficient room to display because, for instance, your widget spans the entire
browser window, you can assign left and right padding or margins to the root HGM container. That would be
the first rule in your widget style sheet.
49
MY FONT STYLES/COLORS 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 widget 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 widget's CSS rule more specific. You do that by
adding the ID of the element your widget is inside of to the beginning of the HGM rule. For instance, if you
have a rule in your page style sheet that sets font color for links, such as:
#maincontent a {
color: #FF0;
}
And that rule causes all links in your Glider to be #FF0, then you can change the selector name(s) of the
affected rules in your HGM style sheet to be prefaced with #maincontent:
#maincontent .p7HGM04 .p7HGMtrig a {

display: block;
padding: 6px 10px;
color: #000;
padding: 6px 10px;
}
You can also add an !important notation:
.p7HGM04 .p7HGMtrig a {
display: block;
padding: 6px 10px;
color: #000 !important;
border: 1px solid;
padding: 6px 10px;
}
50
CAN I USE HORIZONTAL GLIDER MAGIC ON THE SAME WITH OTHER PVII WIDGETS?
Yes. You can use HGM and any other PVII Widget on the same page.
CAN I PLACE ANOTHER PVII WIDGET INSIDE AN HGM WIDGET, OR VICE VERSA?
Yes. You can insert PVII Accordion, Elevator, or Tab Panel widgets inside the content panels of an HGM
widget. You can also insert HGM widgets inside the content panels of an Accordion, Elevator, or Tab Panel
widget.
HOW DO I SET THE WIDTH OF MY WIDGET AND CENTER IT?
HGM widgets are designed to automatically conform to the width of the container in which they are placed,
even if that container is a flexible width. If, however, there is a need to constrain the widget to a specific
width, use the root HGM CSS rule (it will be the first rule in your widget style sheet). For example, the root
rule for Blue Mist (Style Theme 01) is:
.p7HGM01 {
padding: 0px;
zoom: 1;
}
Assign a width and, if you want to center the widget, also assign a margin (with left and right set to auto):
.p7HGM01 {
padding: 0px;
zoom: 1;
width: 300px;
margin: 0 auto;
}
51
If you have more than 1 widget on your page, using the same style theme, you may not want to assign a
width to both. In that case, instead of editing the root CSS rule in your style sheet, create a new rule, using
the ID of a specific widget as your selector name. You can locate the ID by looking in the markup. The root
DIV for a widget looks like this: <div id="p7HGM_1" class="p7HGM01">. To assign a width to just this
widget, create this rule:
#p7HGM_1 {
width: 300px;
}
If you’d also like to center the widget, create this rule:
#p7HGM_1 {
width: 300px;
margin: 0 auto;
}
MY IMAGE SWAPS ARE NOT WORKING OR ARE SHOWING BROKEN IMAGES. WHAT'S
WRONG?
Make sure you are using the correct image naming convention and all required images are in the same
folder—and that you have set the appropriate Image Swap Options in the HGM interface.
MY TRIGGER LINK TEXT HAS REVERTED BACK TO THE DEFAULT "TRIGGER TEXT"
WHAT HAPPENED TO MY CUSTOM LABELS OR IMAGES?
If you have existing Trigger Links with custom labels (or images) and you set the TRIGGER LINKS Control
Position option to None, then click OK to close the interface, any text that you had in the listing will be lost,
and the default "Trigger Text" will appear when you next open the interface. There is no way around this—
you will simply need to re-type your custom labels in this case.
IS THERE A PLACE ON THE PVII SITE WHERE I CAN FIND MORE EXAMPLES OR TWEAKS?
Yes. Go to the HGM Home Page. All new content will be linked from there.
52
Addendum: Advanced Current Marker Utility 53
ADDENDUM: ADVANCED CURRENT MARKER UTILITY
The Horizontal Glider system includes a built-in feature that applies a Current Marker to a link in the widget
that matches the current page's URL. The system sets this link to a special style class named current_mark.
This provides a visual trail to the current page in the widget—a YOU ARE HERE indicator. This feature can be
turned on or off by checking the Enable box for CURRENT MARKING in the user interface for each widget on
the page.
This DEFAULT Current Marker feature works automatically, without user intervention—but it does rely on
matching the current page's URL to the hyperlinks contained in the widget. In most cases this will work just
fine. However, when the current page is not reflected as a link in the widget, the current marker will not be
able to find a match and no marker is applied. Fortunately, Horizontal Glider includes an Advanced Current
Marker system to allow you to handle these exceptions so that even pages that DO NOT APPEAR AS LINKS
IN THE WIDGET can have a specified link CURRENT MARKED.
Note: Use the Advanced Current Marker ONLY when the page does NOT appear as a link within the widget system. In other words,
the Advanced Current Marker is designed to handle the exceptions that go beyond the capabilities of the DEFAULT CURRENT
MARKING FEATURE.
The Advanced Current Marker system is designed to be 100% Dreamweaver Template friendly. It can be
applied to any template or template-based page. The system will detect the page type and process
accordingly.
OPENING THE ADVANCED CURRENT MARKER
To open the interface:
-Click inside the Horizontal Glider widget that you wish to act on.
-Choose Commands > Studio VII > Horizontal Glider Magic by PVII > Advanced Current Marker Options...
Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Horizontal Glider html markup on the page
or if you have not clicked on the widget you wish to act on.
53
The Advanced Current Marker user interface will open.
The interface allows you to manage each of four options and also allows you to remove an existing Advanced
Current Marker.
To activate the Advanced Current Marking feature you simply click the radio button next to the option you
wish to use:
1. Using the None Option

2. Using the Text Link Option
3. Using the URL Match Option
4. Using the Folder/Text Option
54
MODIFYING THE ADVANCED CURRENT MARKER
The system also includes the ability to modify the parameters of a page that already has one of the
Advanced Current marker options applied.
On a page that already contains an Advanced Current Marker...
-Click inside the widget that you wish to act on.
-Choose Commands > Studio VII > Horizontal Glider by PVII > Advanced Current Marker...
The interface will open in Modify mode.
Note: When the Advanced Current Marker interface is in Modify mode, a Remove button appears in the column of command buttons
on the right edge of the interface window.
In this example, the interface opens with the URL option selected. The system will detect which option is
being used on the page and set the interface accordingly.
55
REMOVING THE ADVANCED CURRENT MARKER
The Advanced Current Marker system includes a handy Remove utility that allows you to quickly remove an
existing Advanced Current Marker from any page. If the system detects an Advanced Current Marker on your
page, it will open in Modify mode - in which case, a Remove button will be present below the OK button.
-Click the Remove button.
The system will completely remove the Advanced Current Marker settings from your page.
56
Advanced Current Marker "Folder:Text Match" Option 57
ADVANCED CURRENT MARKER "FOLDER:TEXT MATCH" OPTION
The FOLDER:TEXT MATCH option is designed to allow you to handle large numbers of current marker
EXCEPTIONS and is typically used as a global option applied to every page. Use this option when you have a
large number of pages that are not represented in the widget.
This option allows you to specify a series of folder names and link text values that the system will use for
determining the current marked link in the widget. For example, you can specify that any page which
contains the folder "support" in its URL will be matched to the specific text link "Information". This is
referred to as a Folder Name :: Link Text pair.
You can specify as many of these Folder Name :: Link Text pairs as you like. The system will test each pair
until it finds a match. If a match is found it will apply the current marker style class, current_mark, to the
widget link to provide the "YOU ARE HERE TRAIL" in the widget. You can use this system to automatically
handle current marking for all of your site's pages without having to edit any of them individually.
This feature should only be used on pages that are NOT linked in the widget. The ADVANCED Current
Marker is designed to address current marking only for those pages that are not represented in the widget. If
the page does have a corresponding link in the widget then that link will be used by the DEFAULT Current
Marker instead.
57
The interface has four options from which to choose. The radio button to the left of each option determines
which option is currently active. The default setting is always the second option.
SELECT THE CURRENT MARKER OPTION
-Click on the fourth radio button to select the Folder Name :: Link Text option.
The interface allows you to add as many Folder Name :: Link Text pairs as you like. The first pair is always
pre-defined and ready for editing.
58
DEFINE THE FOLDER NAME :: LINK TEXT PAIRS
This example will work with a widget system that resembles the structure of the projectseven.com web site
menu. You have an Extensions link that links to a main extensions page, but there are quite a few pages that
are related to EXTENSIONS and stored in a folder named EXTENSIONS. Naturally, all of these pages do not
appear in your widget. A Folder Name :: Link Text rule can be defined to apply the current marker to the
EXTENSIONS link for any page that contains "extensions" in the page's URL.
SPECIFY THE FOLDER NAME
The folder name is case sensitive and should match the actual folder name as used in your site.
-Enter the folder name extensions into the IF URL CONTAINS THIS FOLDER NAME box.
SPECIFY THE LINK TEXT

The MARK THIS LINK TEXT list is an alphabetized listing of all of the links in the widget.
-Select the Extensions link text.
The interface now reflects your changes. The first Folder Name :: Link Text pair is defined.
The system will apply the current marker to the Extensions widget item whenever the page contains the
extensions folder in its address (URL).
59
ADDING ANOTHER FOLDER NAME :: LINK TEXT PAIR
The site contains many pages that relate to the PRODUCTS section but are not represented as links in the
widget. To handle these pages you can add another Folder Name :: Link Text pair.
-Click the Add button. A new Folder Name :: Link Text line item is created in the interface. The values are
preset to default values, ready for editing.
-Enter the folder name, products, into the IF URL CONTAINS THIS FOLDER NAME box.
-Select the Products link text in the MARK THIS LINK TEXT drop down.
The interface now reflects your changes. Two Folder Name :: Link Text pairs are defined.
60
USING A COMPOUND FOLDER NAME
The site also contains sub-folders in the PRODUCTS area. You can define a compound folder name to allow a
set of pages to current mark a more specific link.
-Click the Add button.
A new Folder Name :: Link Text line item is created in the interface.
-Enter the folder name, products/menusystems into the IF URL CONTAINS THIS FOLDER NAME box.
This will instruct the system to apply the current mark to the widget Systems link item whenever the page
contains products/menusystems in its URL.
ORDERING THE DEFINED PAIRS
The system will apply the current mark to the first match it finds. It will search in the same order as the pairs
are listed in the interface. In this case it will always find the products match before it finds the compound
products/menusystens match since the page URL contains the word products and the products pair is listed
before the products/menusystems pair.
-With the products/menusystems pair selected, click the Up button.
The system moves the selected item up one line. Now the search for the compound folder name will be
made before the search for the products folder name. You can move any selected line Up or Down. Each
time the button is clicked the selected item will move one line.
61
Advanced Current Marker "Link Text" Option 62
DELETING A DEFINED P AIR
You can delete an existing defined Folder Name :: Link Text pair at any time. Select the Folder Name :: Link
Text pair you wish to delete and simply click the Delete button.
FINISHED
-Click the OK button to apply the selected Advanced Current Marker to the current page.
-You can preview and test the widget now.
Note: If your preferences are set to PREVIEW USING TEMPORARY FILE, this feature will not work locally. To preview locally, turn
off the PREVIEW USING TEMPORARY FILE option in Dreamweaver Preferences.
ADVANCED CURRENT MARKER "LINK TEXT" OPTION
The Link Text option allows you to select the text of any one of the existing links in your Horizontal Glider
widget as the TARGET for the current marker. When the page loads, the system will look for this text in the
widget markup. If a match is found it will apply the current marker style class (current_mark) to the widget
link.
This feature should only be used on pages that are NOT linked in the widget. The Advanced Current Marker
is designed to address CURRENT MARKING only for those pages that are not represented in the widget. If
the page does have a corresponding link in the widget then that link will be used by the DEFAULT CURRENT
MARKER instead.
62
63
-Click on the second radio button to select the Link Text option.
SELECT THE LINK TEXT
The Link Text option includes a drop down listing of all of the links in your widget.
For this example, let's assume that you want to highlight the root trigger link that contains PAGE THREE as
its text.
-Select Page Three from the drop down list.
This tells the system to look for the item in the widget that contains Page Three as its text. When found, the
system will apply the special CURRENT MARKER style class to it.
FINISHED
64
Advanced Current Marker URL Match Option 65
ADVANCED CURRENT MARKER URL MATCH OPTION
The URL Match option allows you to select the link value (the href) of any one of the existing links in the
Horizontal Glider system as the TARGET for the current marker. When the page loads, the system will look
for this link value in the widget markup. If a match is found it will apply the current marker style class
(current_mark) to the widget link.
The simplest and most direct method for Advanced Current Marking is to use the Text Option. However,
there may be occasions where you have duplicate text values in the widget. In these cases you can use the
URL match option to target a specific link for CURRENT MARKING.
This feature should only be used on pages that are NOT linked in the widget. The Advanced Current Marker
is designed to address CURRENT MARKING only for those pages that are not represented in the widget. If
the page does have a corresponding link in the widget then that link will be used by the DEFAULT CURRENT
MARKER instead.
65
-Click on the third radio button to select the URL Match option.
66
SELECT THE URL TO MATCH
The URL Match option includes a drop down listing of the link values (href) for all of the links in your widget.
For this example, let's assume that you have a page that pertains to the "Products" section of your site, but
this page is not represented as a link in the widget. Your products section is represented in the widget with a
link (href) value of page_three.htm.
-Select page_three.htm in the listing.
This tells the system to look for the link value (href) in the widget that contains page_three.htm. When it's
found, the special CURRENT MARKER style class is assigned to it.
FINISHED
67
Advanced Current Marker "None - Disable All" 68
ADVANCED CURRENT MARKER "NONE - DISABLE ALL"
The None - Disable All option allows you to completely turn off all current marking for this widget on this
page only. This is a special override that allows you to have the widget working with current marking turned
off on a specific page while it is enabled on other pages.
-Click inside the Horizontal Glider widget you wish to act on.
or if you have not clicked inside the widget you wish to act on.
68
-Click on the first radio button to select the None -Disable All Current Marking option.
69
FINISHED
70
Support and Contact info 71
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 our primary support vehicle and is available 24 hours a day. Point
your news reader at our server: forums.projectseven.com and choose from the following newsgroups:
1. The PVII Webdev Newsgroup

2. The PVII Dreamweaver Newsgroup
3. The PVII Fireworks Newsgroup
4. The PVII CSS Newsgroup
5. The PVII Issues Newsgroup
If you are not familiar with setting up Newsgroup access, use the links below to learn how to do so in the
most popular news-capable email clients:
 Setting up a new newsgroup account in Windows Mail (Vista)

 Setting up a new newsgroup account in Outlook Express
 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.
71
Support and Contact info 72
RSS NEWS 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
72

Manual de Utilizare

Uploaded by

Document Information

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

Manual de Utilizare

Uploaded by

Copyright:

Available Formats

PVII Horizontal Glider Magic

A PVII Web Widget for Dreamweaver

PVII Widgets are programmed from the ground up to do one job

Al Sparber & Gerry Jacobsen

PVII Horizontal Glider Magic ..........................................................................................................................................7

Before you begin ...........................................................................................................................................................7

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

Inserting a New Horizontal Glider ...........................................................................................................................10

Modifying an Existing Horizontal Glider ..................................................................................................................13

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

Control Position Options .....................................................................................................................................15

Trigger Text ..........................................................................................................................................................16

Link Path / Browse... ............................................................................................................................................16

Trigger Image / Browse........................................................................................................................................17

Alt Text .................................................................................................................................................................17

Panel Dimensions ................................................................................................................................................17

Current Marking ..................................................................................................................................................18

Trigger Action ......................................................................................................................................................19

Auto Play ..............................................................................................................................................................20

Image Swap Options ............................................................................................................................................21

Style Theme .........................................................................................................................................................21

The Interface Control Buttons .............................................................................................................................22

Choose an Action .................................................................................................................................................23

Image File Naming Convention ....................................................................................................................................24

Horizontal Glider Default Naming Convention: ...................................................................................................24

Changing the image naming convention .............................................................................................................25

Removing a Glider Widget from your page .................................................................................................................27

Open the Remove PVII Horizontal Glider interface .................................................................................................27

What will be Removed .........................................................................................................................................28

What will Not be Removed ..................................................................................................................................28

The Interface Control Buttons .................................................................................................................................28

Behaviors - Control Actions .........................................................................................................................................29

Creating a new Control Actions behavior ................................................................................................................29

Modifying an existing Control Actions behavior ......................................................................................................29

The Interface Items ..............................................................................................................................................30

The Interface Control Buttons .............................................................................................................................31

CSS Analysis .................................................................................................................................................................32

Background Images .....................................................................................................................................................44

Questions and Answers ...............................................................................................................................................46

How do I use or manage Widgets in different folders? ...........................................................................................48

Can I Revert back to a default Style Theme CSS file? ..............................................................................................49

How can I re-position my Next/Previous arrows? ...................................................................................................49

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

How do I set the width of my widget and center it? ...............................................................................................51

Addendum: Advanced Current Marker Utility .............................................................................................................53

Opening the Advanced Current Marker ..................................................................................................................53

Modifying the Advanced Current Marker ................................................................................................................55

Removing the Advanced Current Marker ................................................................................................................56

Advanced Current Marker "Folder:Text Match" Option .............................................................................................57

Opening the Advanced Current Marker ..................................................................................................................57

Select the Current Marker Option ...........................................................................................................................58

Define the Folder Name :: Link Text Pairs................................................................................................................59

Specify the Folder Name......................................................................................................................................59

Specify the Link Text ............................................................................................................................................59

Adding another Folder Name :: Link Text Pair .........................................................................................................60

Using a Compound Folder Name .............................................................................................................................61

Ordering the Defined Pairs ......................................................................................................................................61

Deleting a Defined Pair ............................................................................................................................................62

Advanced Current Marker "Link Text" Option .............................................................................................................62

Opening the Advanced Current Marker ..................................................................................................................63

Select the Current Marker Option ...........................................................................................................................64

Select the Link Text ..................................................................................................................................................64

Advanced Current Marker URL Match Option ............................................................................................................65

Opening the Advanced Current Marker ..................................................................................................................65