Tutorial

Here's the scroller we're going to build in this tutorial - you probably wouldn't want an ugly thing like this on your web page but it's easiest to start with the basic principle and then we can look at making it look nicer.

The Concept

Before we go any further lets understand how the scrolling effect is achieved. We have 2 layers - a content layer to hold the content we want to scroll which could be text, images or a mixture of both and a second layer which will act as a "window" to the content. As the content moves the "window" gives us a different view of the content. Think of this as a watching a train go past a window - as the train moves you see different parts of the train but because the window is a fixed size you never see the whole train.

Getting Started

Let's start by adding the "window" layer to our page - hit Insert - Layer on the toolbar then Format - Layers - Positioning. Choose these settings.

Note that using a layer like this is one of the very few times when we must declare a fixed height for the layer. We want to change the default id of layer1 to something more meaningful - double click layer1 in the layers window and type "container" without the quotes.

We need to add some styles to this layer to make sure that any content outside the layer is hidden - unfortunately we can't do this in design view so we need to edit the tag directly. In the tag list click the div tag you just added and choose Edit Tag - you'll see the code FP has written for the layer.

Modify it to look like this.

Adding The Content

Now we're ready to add the content we want to scroll - click inside the layer you just added and hit Insert - Layer FP will insert a new layer inside our container layer. This is called nesting a layer - choose these settings for the new layer.

Notice that because this because this layer is nested within container its left and top positions are relative to the parent layer not relative to the window - so the layer will be 0 pixels in and 0 pixels down from the container layer. Now we can change the id of this layer - double click layer2 in the layers window and type "content" without the quotes

Put a 1 row 1 column table inside this layer with width set to 200 pixels - give it 5 pixels of cellpadding now add a few paragraphs of text to the table. Make sure the text you add is several times longer than the layer or you won't get any scrolling :-) In FP it appears that the content is spilling out of our container layer however if you save the page and preview it in your browser you'll notice that the content that overflows the container layer is hidden.

Making it Scroll

To control the scrolling we're just going to add 3 links one will scroll down when we mouseover and stop scrolling onmouseout the other will scroll up when we mouseover and stop scrolling onmouseout and finally we'll add a link to reset the scroller - i.e. return it to its starting position.

At the top of your page type Scroll Up select it hit Ctrl + K to hyperlink it and type "javascript:;" without the quotes into the dialog. Next to it type Scroll Down select Ctrl + K and type "javascript:;" finally type Reset select it Ctrl + K and type "javascript:;". These 3 links are now ready to accept behaviors to control the scrolling. Click on the scroll down link we just added and hit Format - Behaviors and choose Insert - Scroller - Vertical Scroller. Choose these options.

Most of these options are self explanatory - we choose the layer we want to scroll and then choose the direction and speed. The value for Starting Position will always be 0, the value for Scroll Height will be the height of the container layer - 200 pixels in this case. We don't want the layer to loop so we'll leave that unchecked. Now hit OK and in the behaviors window change the event to onmouseover.

Save the page and preview it in your browser - when you mouseover over Scroll Down the layer scrolls. Notice the scrolling will stop automatically when it reaches the end of the text. So far so good. Now we want to add another behavior to make the scrolling stop when we mouseout of the link. Click on the Scroll Down link - Insert - Scroller - Vertical Scroller and choose these options.

Now in the behaviors window change the event to onmouseout. Save the page and preview in your browser - now the scrolling stops when you mouseout of the link.

Click on Scroll Up and repeat the above steps exactly - the only difference being we'll choose Up instead Down as Scroll Direction. When you test the page you can see we have a working scroller. the scrolling will start and stop automatically when the top and bottom of the content is reached.

Lastly we want to add a behavior to the Reset link to move the scroller back to its start position. Click on the Reset link choose Insert - Scroller - Vertical Scroller and choose these settings

hit OK. We can leave the event as onclick. Now test the page in your browser, scroll down about halfway through your content then click Reset and notice the scroller returns to it's start position.

That's it - we have a simple scroller.

Netscape 4

This script will work in Netscape 4 however we need to make one quick modification. Among NN4's many strange and annoying issues it doesn't allow inline styles on nested layers - you'll recall that our content is contained in a nested layer. Depending on the version of NN4 you have if you view the page in NN4 now you'll probably see a complete mess. To fix this we need to move the styles for our content layer up to the stylesheet. Flip to HTML view and locate the code for our content layer - it will look like this

<div style="position: absolute; width: 200px; z-index: 1; left: 0; top: 0" id="content">
...your content here
</div>

Now select this text position: absolute; width: 200px; z-index: 1; left: 0; top: 0 and hit Ctrl + X to cut it to the clipboard then delete style="" so we're left with

In the head of your page type this code

}
</style>

and paste the code you just cut between the braces - we'll have this code

Save the page and preview in NN4 - this little modification has made our scroller NN4 compatible. If you want you could of course move this style rule to an external stylesheet.