Skip to content

Loop and Pause features #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lachee wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Loop and Pause features #11

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions jquery.ticker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* Copyright 2014 Benjamin Harris
* Released under the MIT license
*/

(function($) {

// The ticker plugin
Expand All @@ -26,6 +27,7 @@
var currentHeadlinePosition = 0; // The index of the current character in the current headline
var firstOuterTick = true; // Whether this is the first time doing the outer tick
var firstInnerTick = true; // Whether this is the first time doing the inner tick in this rendition of the outer one


var allowedTags = ['a', 'b', 'strong', 'span', 'i', 'em', 'u'];

Expand Down Expand Up @@ -65,7 +67,7 @@
}

outerTimeoutId = setTimeout(function () {
if (opts.pauseOnHover && tickerContainer.hasClass('hover')) {
if (opts.pauseOnHover && tickerContainer.hasClass('hover') || tickerContainer.hasClass('pause')) {
// User is hovering over the ticker and pause on hover is enabled
clearTimeout(innerTimeoutId);
outerTick();
Expand All @@ -89,7 +91,7 @@
return;
}

if (opts.finishOnHover && opts.pauseOnHover && tickerContainer.hasClass('hover') && currentHeadlinePosition <= headlines[currentHeadline].length) {
if (opts.finishOnHover && opts.pauseOnHover && tickerContainer.hasClass('hover') && currentHeadlinePosition <= headlines[currentHeadline].length || tickerContainer.hasClass('pause')) {
// Let's quickly complete the headline
// This is outside the timeout because we want to do this instantly without the pause

Expand All @@ -104,7 +106,7 @@
else {
// Handle as normal
innerTimeoutId = setTimeout(function () {
if (opts.pauseOnHover && tickerContainer.hasClass('hover')) {
if (opts.pauseOnHover && tickerContainer.hasClass('hover') || tickerContainer.hasClass('pause')) {
// User is hovering over the ticker and pause on hover is enabled
clearTimeout(innerTimeoutId);
innerTick();
Expand All @@ -124,8 +126,11 @@
currentHeadlinePosition = 0;

// Reset the headline and character positions if we've cycled through all the headlines
if (currentHeadline == headlines.length) currentHeadline = 0;

if (currentHeadline == headlines.length) {
currentHeadline = 0;
if (opts.onAdvanceLooped) opts.onAdvanceLooped();
}

// STOP! We've advanced a headline. Now we just need to pause.
clearTimeout(innerTimeoutId);
clearTimeout(outerTimeoutId);
Expand All @@ -135,6 +140,8 @@

// Do the individual ticks
function tick() {


// Now let's update the ticker with the current tick string
if (currentHeadlinePosition === 0 && opts.fade) {
clearTimeout(innerTimeoutId);
Expand Down