Scroller example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate.

Tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut.

Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

Tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut.

Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

Tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut.

Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.

The creation of custom scroll bars is something i've always been interested in doing. No one in the Freeway community has taken the opportunity up till now (that I know of) to cover the use of open source Javascript to create a custom scroll bar that controls a content area. This script and tutorial (updated for FW5) is a fairly simple example and should be easy to integrate into most web sites.

First of all, the credit for the implementation of this script belongs to another. I found this site The 13th Parallel which has an explanation of how the script is used plus a link to the javascript code. Go ahead and download the dom-drag.js Javascript file which is what makes the scroll bar work.

To be honest, all I really did was copy and paste the code from the example page above and download the file. I make no claim to understanding the logic of the script completely. I'll leave that to more knowledgable blokes than myself. Should you find any errors or deficiencies in the code, blame the original author. I will simply show you how to use it on your page.

The example content area and scrollbar next to it on the right are what you can expect at it's most basic. It's a total of 4 divisions; two for the scrollbar area, and two for the content area. They can also be child divisions in a parent but.

So lets get started!

1. Use the html tool to draw a tall narrow division for the scroll bar area. In the Inspector pallet name it "scrollArea", and set Overflow to hidden. Click inside this division to get the flashing text cursor and insert an inline HTML Item. Resize this inline div to be short and narrow, then use the Inpector pallet to name it "scroller". For now, give the "scroller" division a background color different from the "scrollbar" division.

2. Draw out a large division to the left of the scroll bar. In the Inspector pallet name it "container" and set the Overflow attribute to Hidden. Make sure the height button is on so it is active as this will keep the height of the box to be whatever size you drew the box.

3. Click inside the "container" division to get the flashing text cursor then insert an inline HTML Item and name this one "content". In the Inspector pallet click on the height button for the "content" div to make it inactive so that height of box will be able to grow. Click inside the "content" division and type or paste in some sample text content. Go ahead and add more content so that the "content" box is bigger on the page than the "container" area you want it to be displayed in. Don't worry if your text seems to disappear. This is normal and just means that there is more content than there is space to view it.

Next page