Sunday, May 15, 2011

A smooth, end-to-end ticker

This string is longer than the width of the scrolling space. You bet it is. I will make sure it is. :)
This is a small message.


Having tried out many tickers available out there on the net and satisfied with none, I wrote one myself. And am shamelessly publishing it here knowing it would add to the list of all those tickers I ignored.

But here are a few features of this ticker that might of interest, if they are not apparent from the tickers shown above:
  • Provides real smooth scrolling, even at faster speeds. (Generally tickers increase the number of pixels moved per move to increase the speed, I decrease the time interval to achieve the same effect)
  • Does an end-to-end rotation (no white space) even if the content is less or more than the ticker container width
  • Takes care of changing data inside the ticker without any abruptness
  • Takes less than a minute to implement
    • Download the ticker.js and include it in your file
    • Call initializeTicker with the id as the argument

Usage: initializeTicker(tickerId, speed, leftToRight, separator), where the arguments mean:
  • tickerId   : mandatory, the id of the div/span that you want to tick.
  • speed      : optional, the speed, possible values, 1, 2, 3. Default is 2.
  • leftToRight: optional, true to change the direction to rightwards scrolling, default is false, indicating leftward scroll.
  • separator  : optional, the separator between tail and the head of two instances of the ticker string. The default is ". . . . ".

The ticker is free to use, you can download it here. Please leave a comment here in case you use it. Suggestions/enhancement requests are welcome.

No comments:

Post a Comment