This script will automatically scroll the contents of a page element (usually a div) like the closing credits of a movie. It requires the popular jQuery library.
Features
- More than one scrolling box can appear on a page
- Scrolling speed is adjustable
- When a scrolling box reaches the bottom, it starts over from the top again
- If the user puts the mouse pointer over the scrolling box (to click on a link, for example), it stops scrolling
- BSD license allowing personal and commercial use free of charge
- Compressed version available — 1/3 the size of the original!
Check out the demo.
Requirements
jQuery Headline Scroll requires jQuery 1.2.1 or higher. It may work with earlier versions, but it has only been tested with 1.2.1. It should work fine with later versions as long as the jQuery Team (thanks, guys!) don’t change their code too radically.
You will need to include the jQuery script in your page before you include jQuery Headline Scroll, like this:
<script src="jquery-1.2.1.js">
<script src="jquery.headlineScroll-1.0.js" >
Usage
To make an element on your page autoscroll, you just need to give it the class “autoscroll” and set the element’s height to something smaller than the size of your content.
<div class="autoscroll" style="height: 100px;">
Think it’s scrolling by too slowly? There are two global Javascript variables you can adjust to control the scrolling:
<script>
// How often to scroll, in milliseconds
scrollerIntervalMs = 200;
// Number of pixels to scroll every interval
scrollerStep = 1;
</script>
When scrolling is paused, the class “paused” is added to the scrolling box. This is how the script keeps track of which boxes are scrolling and which ones aren’t. You can take advantage of this “feature” to apply styles to a box that’s paused.
<style>
.paused {
background-color: black;
color: white;
}
</style>Donations
A lot of open source projects have a tip jar. I really enjoy donating money to projects I use — I’ll probably never meet the programmers in real life, so it’s not like I can buy them a beer or something. An online donation is the next best thing.
If you found this script useful, wont you please consider donating to one of the following instead of directly to me?:
Downloads
Version 1.0
jQuery Headline Scroll 1.0 (3kb)
jQuery Headline Scroll 1.0 (min) (1021 bytes)
