JQuery Advanced News Ticker 1.0.11

A powerful, flexible and animated vertical news ticker plugin for JQuery. JQuery Advanced News Ticker provides multiple callbacks and methods to allow a maximum flexibility and an easy implementation into any project.

DEMO

JQuery Advanced News Ticker 1.0.1 Demo

Usage

HTML: a simple list, which may be fully customized.

<ul class="newsticker">
    <li>Etiam imperdiet volutpat libero eu tristique.</li>
    <li>Curabitur porttitor ante eget hendrerit adipiscing.</li>
    <li>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</li>
    <li>Nunc ultrices tortor eu massa placerat posuere.</li>
</ul>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://github.com/risq/jquery-advanced-news-ticker/raw/master/js/newsTicker.js"></script>

Basic usage :

$('.newsticker').newsTicker();

With custom parameters :

$('.newsticker').newsTicker({
    row_height: 48,
    max_rows: 2,
    speed: 600,
    direction: 'up',
    duration: 4000,
    autostart: 1,
    pauseOnHover: 0
});

With (custom) control buttons :

$('.newsticker').newsTicker({
    row_height: 64,
    speed: 800,
    prevButton:  $('#prev-button'),
    nextButton:  $('#next-button'),
    stopButton:  $('#stop-button'),
    startButton: $('#start-button')
});

With callbacks :

$('.newsticker').newsTicker({
    max_rows: 1,
    duration: 6000,
    startButton: $('.start'),
    hasMoved: updateInfos,
    start: function() {
        console.log('newsTicker just started !');
    },
    pause: function() {
        console.log('newsTicker has been paused.');
    }
});

function updateInfos() {
    //...
}

With methods :

var nt = $('.newsticker').newsTicker({
    autostart: 0,
    speed: 400
});

nt.newsTicker('start');

$('.newsTicker-header').hover(function() {
    nt.newsTicker('pause');
}, function() {
    nt.newsTicker('unpause');
});

nt.newsTicker('updateOption','speed',1000);
nt.newsTicker('updateOption','direction','down');

Options & Callbacks

Parameter	Usage	Type/Values	Default value
`row_height`	defines the height (in px) of one row	`int`	22
`max_row`	defines the number of rows displayed at the same time	`int`	3
`speed`	defines the animation speed (in ms)of the rows moving up or down	`int` (in ms)	400
`duration`	defines the times (in ms) before the rows automatically move	`int` (in ms)	2500
`direction`	defines the direction of the rows movement	`up` or `down`	'up'
`autostart`	enable/disable auto start on load	`0` or `1`	1
`pauseOnHover`	enable/disable pause when mouse hovers the newsTicker element	`0` or `1`	1
`nextButton`	set the element triggering `next` action on click	`JQuery element`	null
`prevButton`	set the element triggering `prev` action on click	`JQuery element`	null
`startButton`	set the element triggering `start` action on click	`JQuery element`	null
`stopButton`	set the element triggering `stop` action on click	`JQuery element`	null
`hasMoved`	`callback` called at the end of every movement animation	`function`
`movingUp`	`callback` called before launching `moving up` action	`function`
`movingDown`	`callback` called before launching `moving down` action	`function`
`start`	`callback` called on `start` action	`function`
`stop`	`callback` called on `stop` action	`function`
`pause`	`callback` called on `pause` action (triggered on `mouseOver` if `pauseOnHover=1`)	`function`
`unpause`	called on `unpause` action (triggered on `mouseOut` if `pauseOnHover=1`)	`function`

Methods

After initializing a newsTicker instance, methods are called with .newsTicker('methodName', 'param1', 'param2', ... )

Example :

var nt = $('.newsticker').newsTicker();
nt.newsTicker('stop');
nt.newsTicker('updateOption','direction','down');
var state = nt.newsTicker('getState');

Methods list

Method	Parameter(s)	Action
`start`		starts moving newsTicker elements
`stop`		stops moving newsTicker elements
`updateOption`	`optionName`, `value`	update an option (see Options & Callbacks for options list)
`getState`		returns current state : `0` = stopped, `1` = started, `2` = paused (and started)
`pause`		pauses newsTicker elements without stopping them - the newsTicker has to be started to be able to pause it (the `pause` method is called on `mouseOver` if `pauseOnHover` = 1)
`unpause`		unpauses newsTicker elements - the newsTicker has to be started & paused to be able to unpause it (the `unpause` method is called on `mouseOut` if `pauseOnHover` = 1)
`moveDown`		moves elements down
`moveUp`		moves elements up
`moveNext`		moves up or down according to the current `direction` option
`movePrev`		moves up or down according to the current `direction` option
`move`		equivalent to `moveNext`, but will not move if `paused`
`add`	`content`	adds a ticker row

risq / jquery-advanced-news-ticker