Submit your widget

Vertical scrolling news effect with jQuery

Created 4 years ago   Views 25893   downloads 4348    Author buildinternet
Vertical scrolling news effect with jQuery
View DemoDownload 36.5 KB
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.


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.

row_height  :   '100px',
next        :   '#ticker-next',
previous    :   '#ticker-previous',
stop        :   '#stop',
start       :   '#start',


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"


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


Speed of transition animation in milliseconds. Example Value: 800


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


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


Direction that list will scroll (down or up)

The article source: