risq / Jquery Advanced News Ticker
Licence: gpl-2.0
(deprecated) - A powerful, flexible and animated vertical news ticker plugin for JQuery.
Stars: ✭ 309
Programming Languages
javascript
184084 projects - #8 most used programming language
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="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');
| 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 | Methods list
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].