A lightweight news ticker plugin for jQuery.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
README.md
index.html

README.md

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