Building a Looping Scroller

The first tutorial covered building a simple scroller - now we'll look at building a scroller that loops automatically. We're going to build two different scrollers - one that loops continually and another that auto-reverses.

Here's the looping scroller we'll build and here's the auto-reversing scroller. You can also see a nicer example of a looping scroller here

Getting Started

We'll start by building the looping scroller - as we did in the first tutorial start by inserting the container layer - hit Insert - Layer on the toolbar then Format - Layers - Positioning. Choose these settings.

Again we need to change the id to container and edit the tag directly - click the div tag you just added and choose Edit Tag  modify the code  to look like this.

Adding The Content

Click inside the layer you just added and hit Insert - Layer FP will insert a new layer inside our container layer. 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.

Making it Scroll

So far the steps have been the same as in the first tutorial - this is where we do things differently. Instead of controlling the scrolling by links we're going to start the scroller when the page is loaded and just provide a link to stop scrolling.

Click on the body tag in your tag list choose Format - Behaviors - Insert - Scroller - Vertical Scroller and select these settings.

I've chosen slow for the speed as this is easiest to read - also note when you chose Down as scroll direction the loop options are enabled - selecting a different direction will disable the loop options. In the behaviors window ensure the event is set to onload - this will cause the scroller to start as soon as the page is loaded.

Now test the page in your browser - notice the scroller starts automatically and will loop continuously. All we need now is a link to stop the scrolling. At the top of your page type the word Stop hit Ctrl + K to hyperlink it and type javascript:; into the dialog. In the behaviors window choose Insert - Scroller - Vertical Scroller and select these settings.

Ensure the event for this behavior is set to onclick (it should be by default) and our page is finished. If you're concerned with Netscape 4 support don't forget to apply the NN4 fix described in the first tutorial.

Auto-Reversing Scroller

Rather than building a new scroller we're going to modify the one we just build to make it auto-reverse. Of course auto-reversing a text scroller wouldn't make much sense in the real world but it will illustrate the principle.

Open the page you just made click the body tag in the tag list and choose Format - Behaviors you'll notice the scrolling behavior we added. Double click to edit it just check Auto Reverse and hit OK to accept your changes now view the page in your browser and notice the auto-reversing behavior as the scroller reaches the end.