Features

Totem makes vertical tickers easy to implement by:

  • Turning a list of items into an animated ticker that auto-advances
  • Specifying anchors for stop, start, next, and previous navigation links.

Installation

Load jquery.totemticker.js or the minified jquery.totemticker.min.js script. Call the totemticker function on a UL or OL element. An example is below.

$('#vertical-ticker').totemticker({
row_height  :   '100px',
next        :   '#ticker-next',
previous    :   '#ticker-previous',
stop        :   '#stop',
start       :   '#start',
});

Demos

Use cases with varying options.

Options

The following options are available via the plugin array. Defaults are listed below.

next        :   null
previous    :   null
stop        :   null
start       :   null
row_height  :   '100px'
speed       :   800
interval    :   4000
max_items   :   null
mousestop   :   false
direction	:	'down'

previous, next

CSS ID's of next and previous buttons. Next scrolls the ticker down, and previous scrolls up. Example Value: "#nextbutton"

start, stop

CSS ID's of stop and start buttons. Example Value: "#stopbutton"

row_height

Height of each ticker row in PX. Should be uniform and formatted as a string. Example Value: "100px"

speed

Speed of transition animation in milliseconds. Example Value: 800

max_items

Optional. Integer for how many items to display at once. Resizes height and overflow clipping accordingly. Example Value: 3

mousestop

If set to true, the ticker will stop while mouse is hovered over it

direction

Direction that list will scroll (down or up)

Some Notes

The demos section (also included in the download) can act as template/good start for many projects.

License

Released under the MIT License

If you want to share this plugin with others, we'd appreciate a link back to this post. Please avoid directly linking to the download. Other than that, if you feel so inclined, provide a link back if you end up using it (not required, but appreciated).