eZeeScroler Dreamweaver Extension

eZeeScroller Show Controls

Overview and instructions

Interface access

This Behavior is accessed from the "eZee Controls" option of the "4Level ezeeScroller" category of the Behaviors Panel. This behavior will be dimmed and inaccessible if there is not a scroller currently in the document.

Quick links to the interface options.

Horizontal

Left
Right
Reset Left
Reset Right
Ticker
Page Left
Page Right
Reset Left ( smooth scroll )

This interface allows you to make changes to any of the mouse events that the scroller places in by default. It also allows for you to create your own controls.

The Scroller Controls interface

The Vertical Interface shown here

note: There must be a Scroller on the page to access and use this helper extension.

note: Some options will be dimmed and inaccessible when certain "Direction" options are selected. If an option is dimmed then it does not apply to the current direction option chosen. This make the interface easier to use especially when using the "Offsets".

Below are the options described that are available from the Direction and Speed lists.

Direction Vertical		Direction Horizontal

Up - Scrolls the content layer in the up direction.
Down - Scrolls the content layer in the down direction.
Reset Top - Snaps the content to the top starting location.
Reset Bottom - Snaps the content to the content layer bottom end position.
Ticker - Using this option the scroller will scroll ( loop ) continuously. Normally applied to the <body> tag with an "onLoad" event.
Page Up - Advances the content layer in the UP direction the height of the scroller with each mouse event.
Page Down - Advances the content layer in the DOWN direction the height of the scroller with each mouse event.
Reset Top ( smooth ) - Resets the content layer to its default load position but in a quick smooth scrolling fashion.

Left - Scrolls the content layer in the left direction.
Right - Scrolls the content layer in the right direction.
Reset Left - Snaps the content to the left starting position.
Reset Right - Snaps the content to the right content layer end position.
Ticker - Using this option the scroller will scroll ( loop ) continuously. Normally applied to the <body> tag with an "onLoad" event.
Page Left - Advances the content layer in the LEFT direction the height of the scroller with each mouse event.
Page Right - Advances the content layer in the RIGHT direction the height of the scroller with each mouse event.
Reset Left ( smooth ) - Resets the content layer to its default load position but in a quick smooth scrolling fashion.

Speed

Scroller Speed Selection List

The Paging plus 6 various speeds

The Offsets

The Up Offset and Down Offsets are used to tell the scroller where to stop the scroller once it has reached the end of the content that is in the content layers. Normally the value used is the height of the Vertical scroller or the width of the Horizontal scroller. The "Main Setup" interface that inserts the scroller onto the page uses this method by default when it creates the controls for you. You can change the values to whatever you want with this "Scroller Controls" interface if you wish.

( Up control ) Vertical Scroller

Scrolls the content layer in the up direction.

For the Up control the only offset that is applicable is the "Up Offset". The Down Offset will be dimmed and inaccessible as it is not needed when the "Up" option is selected.

The value for the Up Offset for the Up control is by default set to 0 ( zero ). This will return the content layers to the "starting point" or the absolute top of the scroller. If your scroller is 200 pixels high and you enter 100 in this field the stopping point will be 100 pixels below the starting point of the top of the scroller. If 200 is entered then the stopping point for the UP control will be the very bottom of the scroller. ( just out of view ).

( Right control ) Horizontal Scroller

Scrolls the content layer in the right direction.

For the Right control the only offset that is applicable is the "Right Offset". The Left Offset will be dimmed and inaccessible as it is not needed when the "Right" option is selected.

The value for the Right Offset for the Right control is by default set to 0 ( zero ). This will return the content layers to the "starting point" or the absolute left of the scroller. If your scroller is 200 pixels wide and you enter 100 in this field the stopping point will be 100 pixels from the starting point of the left of the scroller. If 200 is entered then the stopping point for the Right control will be the very left of the scroller. ( just out of view ).

( Down control ) Vertical Scroller

Scrolls the content layer in the down direction.

For the Down control the only offset that is applicable is the "Down Offset". The Up Offset will be dimmed and inaccessible as it is not needed when the "Down" option is selected.

The value for the Down Offset for the Down control is by default set to the height of the scroller. This will stop the scroller when the it reaches the end ( or bottom ) of the content. If your scroller is 200 pixels high and you enter 100 in this field the scroller will go past the end of the content and stop half way up in the scroller viewport. If 0 is entered then it will continue scrolling until the end of the content reaches the top of the scroller. ( just out of view at the top ).

( Left control ) Horizontal Scroller

Scrolls the content layer in the left direction.

For the Left control the only offset that is applicable is the "Left Offset". The Right Offset will be dimmed and inaccessible as it is not needed when the "Left" option is selected.

The value for the Left Offset for the Left control is by default set to the height of the scroller. This will stop the scroller when the it reaches the end ( or left ) of the content. If your scroller is 200 pixels wide and you enter 100 in this field the scroller will go past the end of the content and stop half way across in the scroller viewport. If 0 is entered then it will continue scrolling until the end of the content reaches the left of the scroller. ( just out of view at the left ).

( Reset Top ) Vertical Scroller

Snaps the content to the top default location.

When this item is selected from the "Direction" menu all of the other fields will dim and become inaccessible. They are not needed and the only item needed to be selected is the "Reset Top" itself.

( Reset Left ) Horizontal Scroller

Snaps the content to the left default location.

When this item is selected from the "Direction" menu all of the other fields will dim and become inaccessible. They are not needed and the only item needed to be selected is the "Reset Left" itself.

( Reset Bottom ) Vertical Scroller

Snaps the content to the top default location.

When this item is selected from the "Direction" menu all of the other fields will dim and become inaccessible. They are not needed and the only item needed to be selected is the "Reset Bottom" itself.

( Reset Right ) Horizontal Scroller

Snaps the content to the left default location.

When this item is selected from the "Direction" menu all of the other fields will dim and become inaccessible. They are not needed and the only item needed to be selected is the "Reset Right" itself.

( Ticker )

Using this option the scroller will scroll ( loop ) continuously. Normally applied to the <body> tag with an "onLoad" event.

When this item is selected from the "Direction" menu the interface will look for the current height of the scroller and populate the "Up Offset" and "Down Offset" fields with the actual height of the scroller. This is so the ticker will start out of view and scroll the entire length of the content layer out of view as well. The scroller will then begin the process all over again.

The same applies to the Horizontal Scroller but the scroller width is calculated instead and the "Left Offset" and "Right Offset" fields are populated with this value.

You may change either of the offsets to whatever value you wish if you want the scroller to start midway, or end the ticking cycle before or after the content scrolls out of view. It is just a matter of preference.

Tip:

Vertical Scroller

A value larger than the scroller height in the "Up Offset" will invoke a delay when the ticker first starts displaying.
A value larger than the scroller height in the "Down Offset" will invoke a delay to start again after it has reached the end of the cycle.

Horizontal Scroller

A value larger than the scroller width in the "Left Offset" will invoke a delay when the ticker first starts displaying.
A value larger than the scroller width in the "Right Offset" will invoke a delay to start again after it has reached the end of the cycle.

( Page Up ) Vertical Scroller

Advances the content layer in the UP direction the height of the scroller with each mouse event.

When this item is selected from the "Direction" menu all of the other fields will dim and become inaccessible. They are not needed and the only item needed to be selected is the "Page Up " itself.

( Page Left ) Horizontal Scroller

Advances the content layer in the LEFT direction the height of the scroller with each mouse event.

When this item is selected from the "Direction" menu all of the other fields will dim and become inaccessible. They are not needed and the only item needed to be selected is the "Page Left " itself.

( Page Down ) Vertical Scroller

Advances the content layer in the DOWN direction the height of the scroller with each mouse event.

When this item is selected from the "Direction" menu all of the other fields will dim and become inaccessible. They are not needed and the only item needed to be selected is the "Page Down " itself.

( Page Right ) Horizontal Scroller

Advances the content layer in the RIGHT direction the height of the scroller with each mouse event.

When this item is selected from the "Direction" menu all of the other fields will dim and become inaccessible. They are not needed and the only item needed to be selected is the "Page Right" itself.

( Reset Top (smooth) ) Vertical Scroller

Resets the content layer to its default load position but in a quick smooth scrolling fashion.

( Reset Left (smooth) ) Horizontal Scroller

Resets the content layer to its default load position but in a quick smooth scrolling fashion.

Creating your own controls

You have the option of using the included controls which are inserted as and images or text. You can also build your own controls.

Images.

Method 1

Probably the best way to use your own images would be to check the "images" checkbox in the interface as your building your scroller and allow the scroller to insert the default images into the page. By doing this a folder will be created in the root of your site named "scroller_images". This folder will be filled with all of the common control images necessary for the scroller operation, both for the horizontal and vertical scroller. Then replace the default images in this folder with your own but with the same name as the originals.

These images are named appropriately for the function it was designed. All image dimensions are 18pixels x 18 pixels.

Vertical images

up.gif - scroll up
down.gif - scroll down
pause.gif - pauses the scroller
resettop.gif - resets the scroller to the top position
resetbottom.gif - resets the scroller to the bottom position
resetsmooth_v.gif - resets the scroller to the top position "smoothly"
pageup.gif - advances the scroller up at a predetermined length
pagedown.gif - advances the scroller down at a predetermined length

Horizontal images

left.gif - scroll left
right.gif - scroll right
pause.gif - pauses the scroller
resetleft.gif - resets the scroller to the left position
resetright.gif - resets the scroller to the right position
resetsmooth_h.gif - resets the scroller to the left position "smoothly"
pageleft.gif - advances the scroller left at a predetermined length
pageright.gif - advances the scroller right at a predetermined length

If you name the images the same as the default images they will be automatically and properly linked to the scroller controls the extension inserts.

The extension will insert the images in a control layer and the dimensions will be 18pixels x 18 pixels. If your images are smaller or larger than this you can reset them to their proper size in the Dreamweaver Property Inspector after insertion.

Resetting the images actual dimensions.

First select the image with your mouse. Then press the "Reset Size" button. That's it.

The "Reset Size" button is a little different across different versions of Dreamweaver but they are all located in the Property Inspector. See below...

DW4 and MX - Located at the right next to the "Edit" button.

MX2004 - Located at the left next to the W and H fields. The actual blue reset button will not appear in MX2004 unless the image is "not" of its actual dimensions. The dimensions that are not correct will also be bolded as in the example below.

Method 2

The same applies for this method of checking the "images" checkbox and insert your scroller. Then if you do not wish to rename your images the same as the default images in the "scroller_images" folder you can simply select the default control image you wish to change that was inserted by the Scroller Setup interface and browse to your own image using the Dreamweaver Property Inspectors "src" field.

The stock image will be replaced by your own. Your own image need not be inside the "scroller_images" folder, it can be anywhere in your sites folders.