TickerMePink

A lightweight (<4k), customizable news ticker plugin for jQuery. It uses hard-coded SVG control buttons so no extra images are needed. All you need is the plugin.

Version

1.0

Usage

i. Include jQuery and the plugin:

<script type="text/javascript" src="assets/js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="assets/js/tickerme.min.js"></script> 

ii. Add your news stories in a list:

You can give the wrapper any id - in this case we're using ticker.

<ul id="ticker"> 	<li>This is the first news story.</li> 	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, molestiae.</li> 	<li>Another news story.</li> 	<li>The final news story, with some more test text.</li> </ul> 

iii. Call the plugin with your wrapper id:

$(function(){ 	$('#ticker').tickerme(); }); 

iv: Optional - edit the TickerMePink's style:

You can edit the way TickerMePink wraps the ticker: either create a definition in your CSS file for #ticker_container, or edit the one provided in the example styles.css:

#ticker_container { 	padding:10px; 	border:1px solid #676767; 	-webkit-border-radius: 7px; 	-moz-border-radius: 7px; 	border-radius: 7px; 	overflow: auto; } 

Options

fade_speed

The speed each story will fade in and out (milliseconds). Default: 500

duration

The length of time a story is on the screen (milliseconds). Default: 3000

auto_stop

If true, the ticker will automatically stop when the previous or next button is clicked. Default: true

control_colour

The colour of the play, pause, previous and next controls. Default: #333333

control_rollover

The colour of the control buttons on rollover. Default: #666666

Example:

$(function(){ 	$('#news_stories').tickerme({ 		fade_speed: 900, 		auto_stop: false, 		control_rollover: '#FF0000' 	}); });