Drag Scroller Dreamweaver Extension

Drag Scroller

Interface Access

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

Inserting a Drag Scroller

note: In order to insert a DragScroller the document must be saved in a Dreamweaver defined site.

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

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 Content Layers

By default the Drag Scroller inserts 1 content layer. It's visibility is set to "visible". You may insert more or remove the content layers at any time from the interface by setting the quantity in the "Content Layers" field. You must have at least one content layer at all times. The visibility of the additional content layers will be set to "hidden".

To switch between the content layers visibility you can check the optional "Showhide controls" checkbox and text links will be inserted with the special drag scroller show hide behavior. You can also opt to create your own show hide controls, applying the behavior to your own text links or images, using the included DragScroller ShowContent Layer extension.

Once the Drag Scroller is inserted you replace the default text in the content layers with your own content. This is achieved by selecting the chosen content Layer in the Dreamweaver Layers Panel, then selecting the text inside of it, and pressing delete on your keyboard. You are now ready to insert your own content into the Layer.

The DragScroller Setup interface

The Vertical DragScroller interface shown here

The interface options

The Vertical DragScroller interface shown above. The Horizontal DragScroller interface is identical in appearance and function except for the description in the title bar.

Width/Height

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

Top/Left

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

Border Size

The thickness ( in pixels ) of the border surrounding the Drag Scroller.

Border Color - (checked by default)

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

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.

Content Layers

Determines the quantity of content layers in the scroller.

Scroll Speed

Determines the speed of the scroller when the up and down buttons are pressed.

Scroller z-index

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

Extend Track

Extends the track length by the amount entered in the text field. The default length of the entire control set is the length of the scroller. This may be extended by entering a value into this field.

Mouse - pointer/hand

If the hand option is selected the mouse pointer will switch to a hand when the scroller buttons and track are rolled over. If the pointer option is selected the default browser mouse arrow will be displayed.

SH controls

If more than one content layer is inserted, this option ( if checked ) will insert a layer with text links which show the active content layer and hide the rest of them. It is purely optional to have the extension insert the "content navigation". You can also build your own content layer navigation using your own text links or images using the included showHide Content layers extension.

Stylesheet

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

Preserve bg/border layer

If the "Preserve bg/border layer" is checked the background ( or border ) layers position will not be adjusted by the extension interface and will remain where you have positioned it.

Preserve control images src

If this option is checked the DragScroller control images will not be updated when making adjustments to the scroller via the interface. This is helpful if you are using your own images and they are not in the default "drag_images" folder in the root of your site. The folder "drag_images" contains the images used by default.

FAQ: To use your own images refer to the "Using your own images" in the FAQ section.

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 placed them.

This option will appear dimmed if there is currently no scroller inserted into the page.

The scrollers will automatically position the controls to the right of the scroller for the Vertical and to the bottom of the Horizontal 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 you can move them anywhere you like. You can reposition them by placing your mouse on the edge of each control layer and selecting it. Once selected you can drag them about the page to where you want them. You can also select the control layers from the Layers Panel and use your keyboards arrow keys to reposition them. There are 4 layers that make up the complete set for each scroller.

Vertical DragScroller

dsvUp
dsvDown
dsvTrack
dsvDrag

Horizontal DragScroller

dshLeft
dshRight
dsvTrack
dsvDrag

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 inserted into the document.