TIP 248: Adding a Scrollable Area to a Page

Name: ScrollArea 1.1

Developer: Ahgren's Actions

Source: www.golivecentral.com/pages/ahgren.shtml

Cost: Free

Michael Ahgren's ScrollArea action enables you to easily build attractive scrolling areas on your page. The action combines Go-Live layers, which act as the container that scrolls, and either text or images that trigger the scrolling effects. Behind the scenes, the ScrollArea action writes the necessary JavaScript that makes the scrolling happen. All you need to do is use the GoLive Inspector, the CSS Editor, and the Actions palette to click your way to happy scrolling (Figure 248).

Figure 248. Set the options for your scrolling area in the Rollovers and Actions palette.

It's simple to do. Place a layer on the page called "container" and put another layer inside that called "scroll." Next select the text or image that will be the trigger, make it a link, and add the ScrollArea action. Selecting a Mouse Enter event will cause the scroll to begin when the user hovers over the link, which is a nice effect. In the Action palette, match up the layer names in the pull-down menus, designate the direction of the scroll, and you're pretty much done. There's an input field where you can control the speed of the scroll and a place to assign how much of the area should scroll, called the step size.

ScrollArea action also includes great PDF documentation with directions on how to add text and images to the layer, how to set the options for step size and scroll speed, and how to scroll the area in as many as eight directions.