Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/risq/jquery-advanced-news-ticker
(deprecated) - A powerful, flexible and animated vertical news ticker plugin for JQuery.
https://github.com/risq/jquery-advanced-news-ticker
Last synced: 15 days ago
JSON representation
(deprecated) - A powerful, flexible and animated vertical news ticker plugin for JQuery.
- Host: GitHub
- URL: https://github.com/risq/jquery-advanced-news-ticker
- Owner: risq
- License: gpl-2.0
- Created: 2014-01-28T14:36:22.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-09-15T16:31:37.000Z (about 9 years ago)
- Last Synced: 2024-10-09T17:47:13.857Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://risq.github.io/jquery-advanced-news-ticker
- Size: 2.74 MB
- Stars: 297
- Watchers: 23
- Forks: 104
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
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](http://risq.github.io/jquery-advanced-news-ticker)
Usage
===========================
HTML: a simple list, which may be fully customized.
`````html
- Etiam imperdiet volutpat libero eu tristique.
- Curabitur porttitor ante eget hendrerit adipiscing.
- Praesent ornare nisl lorem, ut condimentum lectus gravida ut.
- Nunc ultrices tortor eu massa placerat posuere.
`````
Basic usage :
`````javascript
$('.newsticker').newsTicker();
`````
With custom parameters :
`````javascript
$('.newsticker').newsTicker({
row_height: 48,
max_rows: 2,
speed: 600,
direction: 'up',
duration: 4000,
autostart: 1,
pauseOnHover: 0
});
`````
With (custom) control buttons :
`````javascript
$('.newsticker').newsTicker({
row_height: 64,
speed: 800,
prevButton: $('#prev-button'),
nextButton: $('#next-button'),
stopButton: $('#stop-button'),
startButton: $('#start-button')
});
`````
With callbacks :
`````javascript
$('.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 :
`````javascript
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 :
`````javascript
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 |
[](https://bitdeli.com/free "Bitdeli Badge")