Anyone knows how to stop and reset Harvest's Tick counter jQuery plugin? I want to stop counter on specific number and reset to primary start up number.
You can checkout my code here.
HTML Markup:
<span class="tick tick-flip tick-promo">5,000</span>
jQuery Logic:
<script type="text/javascript">
$(document).ready(function () {
startCounter();
});
function startCounter() {
$('.tick').ticker({
delay: 1000,
incremental: 1,
separators: true
});
}
var myCounter = setInterval(function resetCounter() {
var lsCurrentTick = $('.tick').find('.tick-new').text();
if (lsCurrentTick > 5010) {
$.fn.ticker.stop();
}
}, 1000);
</script>
I had to read the code to figure this out. Here is a DEMO
$(startCounter);
function startCounter() {
var tickObj = $('.tick').ticker({
delay: 1000,
incremental: 1,
separators: true
})[0];
setInterval(function () {
if (tickObj.value >= 5002) {
tickObj.stop();
tickObj.value = 5000;
tickObj.start();
}
}, 1000);
}
If you are feeling brave you can mess with Tick.prototype.tick DEMO
function startCounter() {
var tickObj = $('.tick').ticker({
delay: 1000,
incremental: 1,
separators: true
})[0];
tickObj.tick = (function (tick) {
return function () {
var ret = tick.call(tickObj);
if (tickObj.value > 5002) {
tickObj.stop();
tickObj.value = 5000;
tickObj.start();
}
return ret;
};
}(tickObj.tick));
}
Have a reference to the ticker and to reset you would have to do
ticker[0].stop();
ticker[0].value = 5000;
ticker[0].start();
Full example
$(document).ready(function () {
var ticker;
startCounter();
});
function startCounter() {
ticker = $('.tick').ticker({
delay: 1000,
incremental: 1,
separators: true,
});
}
var myCounter = setInterval(function resetCounter() {
var lsCurrentTick = $('.tick').find('.tick-new').text();
if (lsCurrentTick > 5003) {
reset();
}
}, 1000);
function stop(){
ticker[0].stop();
}
function reset(){
ticker[0].stop();
ticker[0].value = 5000;
ticker[0].start();
}
Here is a demo
Related
js and I want to pause the slider when mouse hover the h1 tag but it doesn't, I know that it's a problem with javascript but I'm not able to make it works
http://jsfiddle.net/2dhkR/405/
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function() {
setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 3000);
}
});
// the function - set var up just in case
// the timer isn't running yet
var timer = null;
function startSetInterval() {
timer = setInterval(showDiv, 5000);
}
// start function on page load
startSetInterval();
// hover behaviour
function showDiv() {
$('#fullpage h1').hover(function() {
clearInterval(timer);
}, function() {
startSetInterval();
});
}
});
Any help would be appreciated, Thanks
http://jsfiddle.net/2dhkR/407/
var interval = undefined;
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function() {
interval = setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 100);
}
});
$('#fullpage h1').mouseover(function() {
clearInterval(interval);
interval = null;
})
$('#fullpage h1').mouseout(function() {
interval = setInterval(function() {
$.fn.fullpage.moveSlideRight();
}, 100);
});
}); // end document ready
Very simple way (maybe not the clearest) with a bool:
var go = true;
if (go)$.fn.fullpage.moveSlideRight();
$('#fullpage h1').hover(function() {
go = false;
clearInterval(timer);
}, function() {
go = true;
startSetInterval();
});
Try to use jQuery's hover() on mouseenter, then start the slider again on mouseleave.
$(function() {
var interval = setInterval( slideSwitch, 10000 );
$('#slideshow').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval( slideSwitch, 10000 );
});
});
I'm creating a simple slideshow using jQuery and some javascript, but I'm running into issues using the setInterval functions.
JSFiddle of the Project
$(document).ready(function () {
slidePos = 1;
autoScrollInterval = setInterval(function () {
slidePos = SlideRight(slidePos)
}, 7000);
$(".ss-indicator-arrow").css("width", $(".ss-slideshow").width() / $(".ss-slide").length);
$(".ss-right-arrow").click(function () {
window.clearInterval(autoScrollInterval);
slidePos = SlideRight(slidePos);
setTimeout(function () {
autoScrollInterval = setInterval(function () {
slidePos = SlideRight(slidePos)
}, 7000);
}, 10000);
});
$(".ss-left-arrow").click(function () {
window.clearInterval($.autoScrollInterval);
slidePos = SlideLeft(slidePos);
setTimeout(function () {
autoScrollInterval = setInterval(function () {
slidePos = SlideRight(slidePos)
}, 7000);
}, 10000);
})
});
$(window).resize(function () {
$(".ss-indicator-arrow").css("width", $(".ss-slideshow").width() / $(".ss-slide").length);
Reset();
});
function SlideRight(slidePos) {
slidePos++;
if (slidePos <= $(".ss-slide").length) {
$(".ss-container").css("margin-left", -((slidePos - 1) * $(".ss-slideshow").width()) + "px");
$(".ss-indicator-arrow").css("left", ($(".ss-indicator-arrow").width() * (slidePos - 1) + "px"));
}
else
Reset();
return slidePos
}
function SlideLeft(slidePos) {
slidePos--;
if (slidePos > 0) {
$(".ss-container").css("margin-left", -((slidePos - 1) * $(".ss-slideshow").width()) + "px");
$(".ss-indicator-arrow").css("left", ($(".ss-indicator-arrow").width() * (slidePos - 1) + "px"));
}
else {
slidePos = $(".ss-slide").length;
$(".ss-container").css("margin-left", -((slidePos - 1) * $(".ss-slideshow").width()) + "px");
$(".ss-indicator-arrow").css("left", ($(".ss-indicator-arrow").width() * (slidePos - 1) + "px"));
}
return slidePos;
}
function Reset() {
slidePos = 1;
$(".ss-container").css("margin-left", "0px");
$(".ss-indicator-arrow").css("left", "0px");
}
So far I've tried many different methods, and have somewhat ruined the basic functionality I had before. But for now, the primary issue is that if an arrow is pressed multiple times, after the wait setTimeout period, it will then progress through the same number of slides (ie if the button is pressed 3 times, when the setInterval starts over it will move 3 slides again)
What is the most effective way I can have an interval that pauses after user input, then resumes again?
What is the most effective way I can have an interval that pauses
after user input, then resumes again?
Look at this example
DEMO: http://jsfiddle.net/n8c3pycw/1/
var Timer = {
totalSeconds: 300,
start: function () {
var self = this;
this.interval = setInterval(function () {
self.totalSeconds -= 1;
if (self.totalSeconds == 0) {
Timer.pause();
}
$("#timer").text(parseInt(self.totalSeconds, 10));
}, 1000);
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
if (!this.interval) this.start();
}
}
Timer.start();
$("#start").click(function(){
Timer.resume();
});
$("#stop").click(function(){
Timer.pause();
});
Try using either setTimeout or setInterval.
example: var autoScrollInterval = runInterval();
function tochangeyourimage (delta) {
autoRunInterval = runInterval();
};
function runInterval() {
return setInterval(tochangeyourimage, 7000, 1);
We had a developer work-up a piece of javascript for animating markers on a map for us. See http://luniablue.com/clients/endowment for it's current state.
The issue I'm having, is that the rollover is too sensitive and I want there to be a 1sec pause before executing the rollover function. From what I've read, I need to declare a setTimeout() function, but I'm not clear on where to insert that.
I have tried every place that I can see and I've had no luck except in breaking the script. I'm sure it's something stupid simple, but javascript isn't my stong point. Can anyone help me out?
Here's the code:
var firstEntry = true;
var lastOn = '';
function showAllPins() {
if ($('#communities').hasClass('theMouseIsOff')) {
var citiesArr = [];
$('.pin').each( function () {
citiesArr.push(this.id);
$('#'+this.id).hide();
});
var stillHidden = citiesArr.length;
while (stillHidden > 0) {
var a = Math.floor(Math.random()*citiesArr.length);
if ($('#'+citiesArr[a]).is(':hidden')) {
$('#'+citiesArr[a]).show().delay(Math.floor(Math.random()*900)).animate({
opacity: 1,
top: '+=40',
}, Math.floor(Math.random()*900), 'easeOutBounce');
stillHidden--;
}
}
firstEntry = true;
$('#communities').removeClass('theMouseIsOff');
}
}
function showPin(relid){
lastOn = relid;
if ($('#communities').hasClass('theMouseIsOff')) $('#communities').removeClass('theMouseIsOff');
if (firstEntry == true) {
$("#communities div[id!=" + relid + "].pin").animate({
opacity: 0,
top: '-=40',
}, 500);
firstEntry = false;
} else {
$("#communities div[id=" + relid + "].pin").animate({
opacity: 1,
top: '+=40',
}, 500, 'easeOutBounce');
}
}
function removeLastPin() {
$('#communities').addClass('theMouseIsOff');
$("#communities div[id=" + lastOn + "].pin").animate({
opacity: 0,
top: '-=40',
}, 500);
setTimeout('showAllPins()',600);
}
$(document).ready( function () {
$('.pin').mouseenter( function () {
relid = $(this).attr('rel');
showPin(relid);
}).mouseleave( function () { removeLastPin() });
});
$(document).ready(function() {
$('.pin').each(function() {
var selector = '#' + $(this).data('tooltip-id');
Tipped.create(this, $(selector)[0], { skin: 'light', hook: { target: 'topmiddle', tooltip: 'bottomleft'}});
});
});
Where you see:
$(document).ready( function () {
$('.pin').mouseenter( function () {
relid = $(this).attr('rel');
showPin(relid);
}).mouseleave( function () { removeLastPin() });
});
You can change it to:
$(document).ready( function () {
$('.pin').mouseenter( function () {
relid = $(this).attr('rel');
setTimeout(function(){showPin(relid)}, 1000);
}).mouseleave( function () { removeLastPin() });
});
By changing the showPin() function to execute after a timeout, the pin should appear after the specified interval.
Update:
If you would like the function only to run if the mouseleave hasn't occurred during the specified interval, you can clear the interval on mouseleave like this:
$(document).ready(function() {
$('.pin').mouseenter(function() {
relid = $(this).attr('rel');
var awaiting = setTimeout(function() {
showPin(relid)
}, 1000);
}).mouseleave(function() {
removeLastPin();
clearInterval(awaiting);
});
});
I have this code:
js:
function change_color(color) {
$("body").animate({ backgroundColor:color }, '1000');
}
setTimeout(function () {
change_color('#4AC900'
);
}, 500);
setTimeout(function () {
change_color('#964514'
);
}, 1500);
setTimeout(function () {
change_color('#EE0000'
);
}, 1500);
setTimeout(function () {
change_color('#FFE303'
);
}, 1500);
setTimeout(function () {
change_color('#8E388E'
);
}, 1500);
setTimeout(function () {
change_color('#FF00AA'
);
}, 1500);
and I want to use it repeatedly but putting it in a while loop just crashes the site can anyone help?
Here is the site... its my little brothers site not mine... http://timothy.techbytbone.com/isaac.php
var colors = ['#4AC900', '#964514', '#EE0000', '#FFE303', '#8E388E', '#FF00AA'],
len = colors.length,
i;
for (i = 0; i < len; i++) {
(function(i, color) {
setTimeout(function () {
change_color(color);
}, (i + 1) * 500);
})(i, colors[i]);
}
this is all you need:
jsFiddle demo
var c = 0;
var colors = ['#4AC900','#964514','#EE0000','#FFE303','#8E388E','#FF00AA'];
(function loop(){
$('body').stop().animate({backgroundColor : colors[c++%colors.length] }, 1000, loop);
})();
(Prest attention that you need to use the jQuery UI to animate the CSS background-color property)
var colors = {'#4AC900': 500,
'#964514': 1500,
// etc. Just continue with the color-millisecond combinations
}
for(key in colors) {
setTimeout(function () {
change_color(key);
}, colors[key]);
}
Your loop is crashing because you can't set all the necessary timeouts at browser's loading. Here is a version of your code that should work.
var colors = ['#4AC900', '#964514', '#EE0000', '#FFE303', '#8E388E', '#FF00AA'];
var currentColorIndex = 0;
var scheduleChange;
scheduleChange = function() {
change_color(currentColorIndex);
currentColorIndex = (currentColorIndex + 1) % colors.length
setTimeout(scheduleChange, 1000);
};
setTimeout(scheduleChange, 500);
function change_color(color) {
$("body").animate({ backgroundColor:color }, '1000');
}
setTimeout(function() {
change_color('#4AC900')
}, 500);
colors = ['#964514', '#EE0000', '#FFE303', '#8E388E', '#FF00AA']
interval = setInterval(function() {
if (! a.length) {
return clearInterval(interval);
}
change_colors(a.shift());
}, 1500);
Have Fun. You should learn about closures for not messing setIntervals. There are tons of libraries that animate colors and other stuff. I can recommend morpheus by ded.
(function() {
var count = {
digit: 0,
increment: function() {
var interval = setInterval(function() {
if (++count.digit == 10) {
clearInterval(interval);
count.decrement();
}
var update = document.getElementById("liveUpdate");
update.innerHTML = count.digit;
}, 500);
},
decrement: function() {
var interval = setInterval(function() {
if (--count.digit == -1) {
clearInterval(interval);
}
}, 500);
}
};
count.increment();
})();
It stops but it doesn't go down? What could be the problem?
Your decrement function never updates the output anywhere. The variable is going down but you don't show that on screen.
Try (or check the corresponding JSFiddle):
(function() {
var update = document.getElementById("liveUpdate");
var count = {
digit: 0,
increment: function() {
var interval = setInterval(function() {
if (++count.digit == 10) {
clearInterval(interval);
count.decrement();
}
update.innerHTML = count.digit;
}, 500);
},
decrement: function() {
var interval = setInterval(function() {
if (--count.digit == -1) {
clearInterval(interval);
}
update.innerHTML = count.digit;
}, 500);
}
};
count.increment();
})();
setInterval will call the function every 500 seconds. It will not stop until you stop it. You can read more about stopping it at Stop setInterval call in JavaScript
It't not a bug, it's a feature ;-). setInterval() runs the given function in a loop with a given interval (500 ms). See this article for details.