Announcing the latest FairSky Pages component: Scroller. All you need is a javascript include and a special CSS class to add a scrolling news box (or two or three) to your website.
As usual, the Scroller degrades gracefully and keeps all your text marked-up in the body of the document where it belongs.
Development of this component has been sponsored by the Florida Telco Credit Union. Look for it in their site, recently converted to lightweight, standards-compliant goodness.
Use this scroller in place of a Java applet or anytime you want to present more information in a smaller space. Features and advantages include:
Appearance completely customizable via CSS or however you like to do it.
Scroll any content you can normally put on a webpage, including paragraphs, links, lists, even images.
Scrolling pauses when the users moves her mouse pointer over the scroll and resumes when she removes it, to facilitate more careful reading or clicking links.
Your scrolling content is just a normal marked-up part of your document, ready to be indexed by search engines. Take away the CSS and Javascript and it flows normally.
Convenient javascript methods for manually pausing and resuming a scroller, or all scrollers on a page at once.
This script has been updated as of August 10th, 2005 to fix a bug that prevented it from working in Gecko-based browsers when there was whitespace between the wrapping div and its first child. Thanks to Ken Skaggs for pointing it out.
Just download fsp.js and scroller.js, then include them in your page with something like:
<script type="text/javascript" src="fsp.js"></script>
<script type="text/javascript" src="scroller.js"></script>
You need a div with an id and the class name Fsp.Scroller. This div must have only one child element. If you just want one long paragraph to scroll, the one child can be that paragraph. If you want more than one paragraph, you'll need to wrap them all together in a single div. You also need to give your outer div (the one with the id and the special class) a few style rules. Minimally, you'll need to set a height, declare positioning as either relative or absolute, and set overflow to hidden. If you just want the scroller to show up in the document where it naturally would, use relative positioning and don't worry about setting a top or left. You probably will also want to set a width and background color. For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Scroller Example</title>
<script type="text/javascript" src="fsp.js"></script>
<script type="text/javascript" src="reveal_hide.js"></script>
<style type="text/css">
#example {
width:150px;
overflow:hidden;
height:100px;
position:relative;
background-color:#f7f;
}
</style>
</head>
<body>
<div id="example" class="Fsp.Scroller"><div>
<p>One example paragraph.</p>
<p>Another example paragraph.</p>
</div></div>
</body>
</html>
By default, a scoller moves 1 pixel every 60 milliseconds. You can change the delay if 60 milliseconds is too fast or too slow for you. In fact, it's a good idea to set your prefered speed anyway, in case the default changes in a future version. The scroller at the top of this page has a delay of 90 milliseconds.
<div id="example" class="Fsp.Scoller.Delay:90"> . . . </div>
The scroller component makes a few methods available so you can manually pause and resume scrolling. The included methods are Scroller.pauseScroll(), Scroller.resumeScroll(), window.pauseAllScrollers(), and window.resumeAllScrollers(). For example:
<input type="button" value="Pause Example Scroller" onclick="document.getElementById('example').pauseScroll();" />
<input type="button" value="Resume All Scrollers" onclick="window.resumeAllScrollers();" />
It's possible to have more than one scroller on a page. I can't think of a lot of good uses for having more than one, and the following certainly isn't one of them, though it does demonstrate that you can combine the Scoller component with the Columns component. (If you try this for some reason, be sure to include the columns script first in your source code.)
To be, or not to be: that is the question. Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by opposing, end them.
To die. To sleep—no more. And by a sleep to say we end the heartache and the thousand natural shocks that flesh is heir to. 'Tis a consumation devoutly to be wished.
To be, or not to be: that is the question. Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by opposing, end them.
To die. To sleep—no more. And by a sleep to say we end the heartache and the thousand natural shocks that flesh is heir to. 'Tis a consumation devoutly to be wished.
To be, or not to be: that is the question. Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by opposing, end them.
To die. To sleep—no more. And by a sleep to say we end the heartache and the thousand natural shocks that flesh is heir to. 'Tis a consumation devoutly to be wished.
The above scrollers have delay values of 30, 60, and 90 milliseconds.