eZeeScroler Dreamweaver Extension

eZeeScroller Setup

Instructions for inserting the scroller Interface options explained

Scroller Main Setup

The scroller setup interfaces are accessed from the and icons in the 4Level category of the Objects Panel in DW4 and the 4Level tab of the Insert Panel in Dreamweaver MX and MX2004.

Launch the Scroller Setup interface, make your selections from the options and click the OK button and the complete scroller will be inserted into the page. If you do not make any changes to the options a fully functional scroller will be inserted into your page with all of the default values.

Most likely you will want something different then the defaults. You can at any time after the initial insertion launch the interface and and make any changes you wish to any of the options. You can change the position, color, size, add/remove content layers etc... You can do this as many times as you need until your scroller is exactly as you want it.

The Scroller Setup interface

The Vertical Interface is shown here

The interface options

The eZeeVScroller interface shown above. The eZeeHScroller interface is identical except for the description in the title bar.

Width/Height

These fields determine the width and the height of the scroller in pixel dimensions.

Left/Top

These fields determine the position of the scroller in pixels in relation to the top/left of the browser viewport.

Content Layers

Determines the quantity of content layers to insert in the scroller.

Show Content Layer controls

If more than one content layer is used this option allows for the optional insertion of a layer containing links to switch the visibility of the content layers. This layer of links may be added or removed at any time, during the initial insertion of the scroller or after the scroller has already been inserted.

Bg Color- (checked by default)

Determines the background color of the scroller itself. You may use the included colorpicker to select the desired color or enter in the hexadecimal value into the text field.

Border Size/Color - (checked by default)

Determines the color of the scroller border. The border is optional and a background color must be selected as well in order to use the border option.

Scroller z-index

The z-index, or "stacking order" of the scroller layer.

Use included stylesheet - (checked by default)

The document must be saved into a defined site in order to use this option.

If checked, a folder named "scroller_styles" will be created into the site root of the current page. Inside of this folder is a custom stylesheet named "lvlscroller.css" just for the scroller. It contains some simple text formatting and psuedoclass link styles. You may change the values of this stylesheet via the Dreamweaver CSS Panel.

Mouse Trigger

This is the mouse event that will trigger the scroller. There are 3 from which to choose.

onMouseDown
onMouseover
onClick

Each has a different effect.

The onMouseDown event will activate the scroller only as long as the mouse button is in the down position. When released the scroller will stop.

The onMouseOver will activate the scroller when the users mouse rolls over the control button. The scroller will continue to scroll until the mouse is rolled off of the trigger control.

The onClick event will activate the scroller when the mouse clicks the control button. The scroller will continue to scroll until it reaches the end of the scrolling layer or until the "Pause" button is clicked.

Preserve controls current positioning

If the "Preserve controls current positioning" is checked the control layers position will not be adjusted by the extension interface and will remain where you have moved it.

This option will appear dimmed if there is currently no scroller inserted into the page. The scrollers will automatically position the controls to the bottom right of the scroller. If the scroller is made a different size by subsequent passes through the interface the controls position will readjust accordingly. If another location is desired for the controls location you can select the controls by placing your mouse on the edge of the controls and selecting it. Once selected you can drag it about you page to where you want it. You can also select the controls layer from the Layers Panel and use your keyboards arrow keys to reposition it. The control layer is named "v4Lvlcontrols" for the Vertical and "h4Lvlcontrols" for the Horizontal scroller.

Controls Type

images - (checked by default)
- The document must be saved into a defined site in order to use this option.
- If checked, a folder named "scroller_images" will be created into the site root of the current page. Inside of this folder are all of the included images for both the vertical and horizontal the scrollers. By default the extension will look and link to the images in this folder when making the image selection. If you wish to use your own images, these instructions will show you how to do it easily.
text
- The interface will insert default values for the scroller controls selected. After insertion you can change the text to whatever you wish.
none
- If the "none" checkbox is checked no controls will be inserted. If there are currently controls on the page and this is checked, they will be removed.
Use Reset - (checked by default)
- Inserts an extra control for resetting the scroller to the ( TOP - Vertical Scroller ) or ( LEFT - Horizontal Scroller ). This reset is a "smooth" reset which means that it will actually scroll very fast until it reaches its destination to the top or left.

Removing the Scroller

To remove the scroller and all of its accompanying components press the "Remove" button. This button will only appear if there is a scroller present in the document.