Flexible jQuery Vertical News Ticker Plugin - Advanced News Ticker

Advanced News Ticker is a jQuery plugin used to vertically scroll a group of html contents as a news ticker. Provides a lots of parameters and callbacks to make your own news ticker on the web page/app.

Features:

• 2 directions of movement. Up or down.
• Automatically start scrolling on page loaded.
• Automatically stop on mouse hover the news ticker elements.
• Custom controls to perform start, pause, next and previous actions.

Related plugins:

• jQuery Plugin For Animated Vertical Ticker - totem
• Flexible & Customizable jQuery News Ticker Plugin - Easy Ticker
• BBC News-Like Website Ticker Plugin with jQuery - News Ticker
• Highly Customizable jQuery Text Scrolling Plugin - Web Ticker
• Tumblr News Ticker Widget with jQuery
• jQuery Vertical Scrolling Web Ticker Plugin - vticker
• News Ticker Like Content Scrolling Plugin For jQuery - Easy Ticker
• Easy jQuery Scrolling News Ticker Plugin - liScroll

Basic Usage:

1. Load the required newsTicker.css file in the head section of the page.

<link rel="stylesheet" href="css/newsTicker.css">

2. Create a multi-lines news ticker with controls following the Html structure:

<div id="multilines">
<div class="container">
<ul class="newsticker">
<li>News 1 <a href="#">Read more...</a></li>
<li>News 2 <a href="#">Read more...</a></li>
<li>News 3 <a href="#">Read more...</a></li>
...
</ul>
</div>
<div class="controls"> 
<a class="prev-button" href="#">Prev</a>
<a class="next-button" href="#">Next</a> 
<a class="stop-button" href="#">Stop</a> 
<a class="start-button" href="#">Start</a> 
</div>
</div>

3. Load the jQuery library and newsTicker.js script at the bottom of the page.

<link rel="stylesheet" href="css/newsTicker.css">

4. Initialize the news ticker with options.

<script>
var multilines = $('#multilines .newsticker').newsTicker({
row_height: 100,
speed: 800,
prevButton: $('#multilines .prev-button'),
nextButton: $('#multilines .next-button'),
stopButton: $('#multilines .stop-button'),
startButton: $('#multilines .start-button'),
});
</script>

5. All the available options and callbacks.

<script>
var multilines = $('#multilines .newsticker').newsTicker({
row_height: 20, // the height (in px) of one row
max_rows: 3, // the number of rows displayed at the same time
speed: 400, //  the animation speed (in ms)of the rows moving up or down
direction: 'up', // the direction of the rows movement
time: 2500, // the times (in ms) before the rows automatically move
autostart: 1, // enable/disable auto start on load
stopOnHover: 1, // enable/disable pause when mouse hovers the newsTicker element
nextButton: null, // set the element triggering next action on click
prevButton: null, // set the element triggering previous action on click
startButton: null, // set the element triggering start action on click
stopButton: null, // set the element triggering stop action on click
hasMoved: function() {}, // function
movingUp: function() {}, // function
movingDown: function() {}, // function
start: function() {}, // function
stop: function() {}, // function
pause: function() {}, // function
unpause: function() {} // function
});
</script>

Change log:

v1.0.1 (2014-02-13)

• update.

---

This awesome jQuery plugin is developed by risq. For more Advanced Usages, please check the demo page or visit the official website.