var nt_example1 = $('#nt-example1').newsTicker({
row_height: 80,
max_rows: 3,
duration: 4000,
prevButton: $('#nt-example1-prev'),
nextButton: $('#nt-example1-next')
});var nt_example2 = $('#nt-example2').newsTicker({
row_height: 60,
max_rows: 1,
speed: 300,
duration: 6000,
prevButton: $('#nt-example2-prev'),
nextButton: $('#nt-example2-next'),
hasMoved: function() {
$('#nt-example2-infos-container').fadeOut(200, function(){
$('#nt-example2-infos .infos-hour').text($('#nt-example2 li:first span').text());
$('#nt-example2-infos .infos-text').text($('#nt-example2 li:first').data('infos'));
$(this).fadeIn(400);
});
},
pause: function() {
$('#nt-example2 li i').removeClass('fa-play').addClass('fa-pause');
},
unpause: function() {
$('#nt-example2 li i').removeClass('fa-pause').addClass('fa-play');
}
});
$('#nt-example2-infos').hover(function() {
nt_example2.newsTicker('pause');
}, function() {
nt_example2.newsTicker('unpause');
});
var state = 'stopped';
var speed;
var add;
var nt_example3 = $('#nt-example3').newsTicker({
row_height: 80,
max_rows: 1,
duration: 0,
speed: 10,
autostart: 0,
pauseOnHover: 0,
hasMoved: function() {
if (speed > 700) {
$('#nt-example3').newsTicker("stop");
console.log('stop')
$('#nt-example3-button').text("RESULT: " + $('#nt-example3 li:first').text().toUpperCase());
setTimeout(function() {
$('#nt-example3-button').text("START");
state = 'stopped';
},2500);
}
else if (state == 'stopping') {
add = add * 1.4;
speed = speed + add;
console.log(speed)
$('#nt-example3').newsTicker('updateOption', "duration", speed + 25);
$('#nt-example3').newsTicker('updateOption', "speed", speed);
}
}
});
$('#nt-example3-button').click(function(){
if (state == 'stopped') {
state = 'turning';
speed = 1;
add = 1;
$('#nt-example3').newsTicker('updateOption', "duration", 0);
$('#nt-example3').newsTicker('updateOption', "speed", speed);
nt_example3.newsTicker('start');
$(this).text("STOP");
}
else if (state == 'turning') {
state = 'stopping';
$(this).text("WAITING...");
}
});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">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');| Parameter | Usage | Type/Values | Default |
|---|---|---|---|
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 |
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 |