Submit your widget

Vertical scrolling news effect with jQuery

Created 12 years ago   Views 21785   downloads 3937    Author buildinternet
Vertical scrolling news effect with jQuery
View DemoDownload
84
Share |

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',
});

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)

The article source:http://buildinternet.com/project/totem/