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.
1 | $( '#vertical-ticker' ).totemticker({ |
2 | row_height : '100px' , |
3 | next : '#ticker-next' , |
4 | previous : '#ticker-previous' , |
5 | stop : '#stop' , |
6 | start : '#start' , |
7 | }); |
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)
Read more:http://buildinternet.com/project/totem/