Vertical Scroller (with optional start/stop buttons)

The quick brown fox jumped over the lazy dog. She sells sea shells by the sea shore.

This minor variant of my latest marquee script scrolls vertically instead of horizontally. As with that script you simply attach the script to the bottom of the web page and add a class to those block elements that you want to have scrolling up the page. Since the content for a vertical scroller extends over more than one line we do need to specify both a width and a height for the scroller instead of just the height that the marquee script required.

By using different class names we can even have both horizontal marquees and vertical scrollers in the same web page. The only potential situation where the two scripts could possibly clash when applied in the same web page would be if you were to apply both classes to the same block element so as to try to get it to scroll in both directions at the same time. If the vertical scroller code were to be included first then this definitely wouldn't work simply because the marquee script wraps the content in a span tag and the vertical scroller would have already wrapped it in a div tag and wrapping block level tags inside inline tags is not allowed. Whether or not the scripts would work if they were loaded the other way around is something I haven't tested since I can't see any reason why you would want to apply both to the same content. The only reason for mentioning this is to demonstrate how even scripts that are completely unobtrusive except for one HTML reference (which is as unobtrusive as you can make a script) can still clash with other scripts if they try to interact with the same element.

Here's the minimum code you'd need to add to convert a div into a vertical scroller. The above example also applies a border, padding, margins and float.

<p class="scroller" style="height:300px;width:150px;">The quick brown fox jumped over the lazy dog. She sells sea shells by the sea shore.</p>

Adding start/stop buttons is just a matter of adding the following where ever you want one to appear:

<div class="scrollerss"></div>

To make that into a vertical scroller simply attach the following script to the bottom of the web page.



This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow