I have a function that continuously loops through a set of divs (see below) with the class active. I'm trying to modify the function so that when you click on the div it stops the loop and adds the class active to that div.
I've looked through countless examples on StackOverflow, but haven't been able to find something that works for my situation.
Function I'm trying to modify:
function doLoop() {
$('.cd-types, .img-frame, .img-content-container').each(function(){
(function($set){
setInterval(function(){
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
},7000);
})($(this));
});
}
Here is the jfiddle with my attempt on modifying the loop. I know its fairly simple and I've spent the last few hours trying to figure it out. Any advice/direction would be greatly appreciated.
Try
function doLoop() {
$('.cd-types, .img-frame, .img-content-container, .list-items').each(function () {
var $set = $(this);
var interval = setInterval(function () {
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
}, 1000);
$set.data('loop', interval);
$set.on('click', '> *', function () {
$(this).addClass('active').siblings('.active').removeClass('active');
clearInterval($set.data('loop'));
$set.removeData('loop')
});
});
}
Demo: Fiddle, Fiddle2
Simplified the loop function a bit to use the "self" variable trick.
timerID was used to track the setInterval() call so that it could be stopped using clearInterval() call when clicked:
$('.list-items').children().first().addClass('active');
var timerID;
$('.list-items').each(function () {
var self = this;
timerID = setInterval(function () {
var $cur = $(self).find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $(self).children().eq(0);
$next.addClass('active');
}, 1000);
});
$('.list-items').on('click', function(){
clearInterval(timerID);
alert("Stopped");
});
See the working code at:
JSFiddle
Related
I'm trying to create a slider with three slides. Originally, the slides will display as a loop. My goal is, if a button like #fancy_1 is clicked, the loop with a function name "runem" will be stopped and the loop just ends there. I tried put a stop(true,true), but with no success. No matter whether the button is clicked or not, the loop is always running. Does anyone have any idea how to achieve this?
(function($) {
$(document).ready(function() {
function runem() {
var allofEm = $('.j_fancy .j_fancy_block');
var $active = allofEm.eq(0);
$active.show();
var $next = $active.next();
var timer = setInterval(function() {
$next.fadeIn();
$active.hide();
$active = $next;
$next = (allofEm.last().index() == allofEm.index($active)) ?
$next = allofEm.eq(0) : $active.next();
}, 5000);
}
runem();
$("#fancy_1").click(function() {
$('.j_fancy_block').eq(0).show();
$('.j_fancy_block').eq(1).hide();
$('.j_fancy_block').eq(2).hide();
runem().stop(true, true); //this doesn't work.
})
$("#fancy_2").click(function() {
$('.j_fancy_block').eq(0).hide();
$('.j_fancy_block').eq(1).show();
$('.j_fancy_block').eq(2).hide();
runem().stop(true, true); //this doesn't work.
})
$("#fancy_3").click(function() {
$('.j_fancy_block').eq(0).hide();
$('.j_fancy_block').eq(1).hide();
$('.j_fancy_block').eq(2).show();
runem().stop(true, true); //this doesn't work.
})
})
}(jQuery));
Have you tried using clearInterval()? The reason that stop() was not working is because that is a function to stop jQuery animations, not Javascript setInterval - so setInterval will continue to run
The way I would suggest using it is like so...
var boxInterval;
function runem(){
/*Function Stuff*/
boxInterval = setInterval(function(){...});
}
function stopBox(){
clearInterval(boxInterval);
}
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval#Example
one quick question!
I am using the following code which does a "flip" card effect to flip a specific div element, when a certain link is mouse clicked. Is it possible to make the "flip" effect reverse after some time? Exactly as if I was clicking again with the mouse, but timed. I can do it now by cliking, but I would like to time it.
$(document).ready(function () {
$('.flip_card').click(function () {
var x = $(this).attr("id");
var i = x.substring(10);
$('.flip' + i + '').find('.card').toggleClass('flipped');
});
});
I have tried using the jquery functions delay() or settimeout, but I can only achieve that the first "flip" effect is delayed and happens after certain time. That is not what I want...
I hope my question is understanble enough.
Many thanks!
Try this.
$(document).ready(function () {
$('.flip_card').click(function () {
var x = $(this).attr("id");
var i = x.substring(10);
var ele = '.flip' + i + '';
$(ele).find('.card').toggleClass('flipped');
setTimeout(function(){
$(ele).find('.card').toggleClass('flipped');
}, 1000);
});
});
Try utilizing .queue()
$(document).ready(function () {
$(".flip_card").click(function () {
var x = this.id;
var i = x.substring(10);
$(".flip" + i).find(".card").toggleClass("flipped")
.queue("reset", function() {
setTimeout(function() {
$(".flip"+ i + " .card.flipped:eq(-1)").toggleClass("flipped");
// set duration here
}, 3000);
}).dequeue("reset");
});
});
You can use setTimeout(), but you should keep track of the timer ID so you can cancel it if the user clicks again before the timeout has executed. You can use the .data() function to store the timer ID so each card keeps track of its own timer ID.
$(document).ready(function () {
$('.flip_card').click(function () {
var i = $(this).attr('id').substring(10);
var $card = $('.flip' + i).find('.card');
// Clear the timeout if there is one.
var timerId = $card.data('timerId');
if (timerId) {
clearTimeout(timerId);
}
// Flip the card.
if (!$card.hasClass('flipped')) {
$card.addClass('flipped');
// Set the timeout so the card is flipped back after 3 seconds.
$card.data('timerId', setTimeout(function () {
$card.removeClass('flipped');
}, 3000));
} else {
$card.removeClass('flipped');
}
});
});
jsfiddle
How about something this simple. Just chaining should make it.
$(document).ready(function () {
$('.flip_card').bind('click', function() {
var x = $(this).attr("id");
var i = x.substring(10);
var ele = '.flip' + i + '';
$(ele).find('.card').toggleClass('flipped').delay(3000).toggleClass('flipped');
});
});
I am trying to run a function at setInterval() of "1 second", but it is a bit problematic. I have done everything as shown here but it doesn't work.
Here is my code :
<script>
function test(db_time)
{
var c_db_time= db_time/1000;
var current_time = new Date().getTime()/1000;
return Math.round(current_time - c_db_time);
}
$(".elapsed_time").each(function() {
var time_r = $(this).data('time_raw');
var inter = $(this).html(time_ago(time_r));//parameter to function
setInterval(inter,1000)
});
</script>
And the error is :Uncaught SyntaxError: Unexpected identifier
Solution found thanks to #Bommox & #Satpal
$(".elapsed_time").each(function() {
var time_r = $(this).data('time_raw');
var self = $(this);
var inter = function() {self.html(time_ago(time_r));}
setInterval(inter, 1000);
});
into setInterval function's first parameter you should pass a function or an anonymous function like
setInterval(function(){
console.log("1s delayed")
},1000);
As said before, first argument should be the function:
var self = $(this);
var inter = function() {
self.html(time_ago(time_r));
}
setInterval(inter, 1000);
var self = this;
setInterval(function(){
$(self).html(time_ago(time_r));
},1000);
Have a look here : window.setInterval
window.setTimeout( function() { /*your code which you want to execute after fixed interval, it can function name or lines of code*/}, /*fixedInterval*/);
window.setTimeout( function() { alert("Hello World!"); }, 5000); // it will execute after 5 seconds
just need a little help here. My problem is, how can I count the seconds when i hover a specific element. Like for example when I hover a button, how can i count the seconds did i stayed in that button after I mouseout?
An alternate solution using setInterval. DEMO HERE
var counter = 0;
var myInterval =null;
$(document).ready(function(){
$("div").hover(function(e){
counter = 0;
myInterval = setInterval(function () {
++counter;
}, 1000);
},function(e){
clearInterval(myInterval);
alert(counter);
});
});
A simple example
var timer;
// Bind the mouseover and mouseleave events
$('button').on({
mouseover: function() {
// set the variable to the current time
timer = Date.now();
},
mouseleave: function() {
// get the difference
timer = Date.now() - timer;
console.log( parseFloat(timer/1000) + " seconds");
timer = null;
}
});
Check Fiddle
How about this quick plugin I just knocked out, which will work on multiple elements, and without using any global variables:
(function($) {
$.fn.hoverTimer = function() {
return this.on({
'mouseenter.timer': function(ev) {
$(this).data('enter', ev.timeStamp);
},
'mouseleave.timer': function(ev) {
var enter = $(this).data('enter');
if (enter) {
console.log(this, ev.timeStamp - enter);
}
}
});
};
})(jQuery);
Actually disabling the functionality is left as an exercise for the reader ;-)
Demo at http://jsfiddle.net/alnitak/r9XkX/
IMHO, anything using a timer for this is a poor implementation. It's perfectly trivial to record the time without needing to use an (inaccurate) timer event to "count" seconds. Heck, the event object even has the current time in it, as used above.
This is exam:
var begin = 0;
var end = 0;
$('#btn').hover(function () {
begin = new Date().getTime();
});
$('#btn').leave(function () {
end = new Date().getTime();
sec = (end - begin) / 1000;
alert(sec);
});
One way to go about it would be the event.timeStamp method :
var initial_hover, exit_hover;
$('#ele').hover(
function(event){
initial_hover = event.timeStamp
console.log(initial_hover);
},
function(event){
exit_hover = event.timeStamp
$(this).html(exit_hover - initial_hover);
console.log(exit_hover);
}
);
jsfiddle
You've tagged the question with JQuery, so here's a jQuery solution.
$(element).on('mouseover', function(e){
$(e.target).data('hover-start', new Date().getTime());
});
$(element).on('mouseout', function(e){
// count the difference
var difference = new Date().getTime() - $(e.target).data('hover-start');
// clean up the data
$(e.target).data('hover-start', undefined);
console.log('Mouse was over for', difference/1000, 'seconds');
});
use setInterval and store value in variable. call the function on mouserover.
function mouseover(){
var start = 0;
setInterval(function(){
start++;
var count = start;
}, 1000);
}
I am trying to animate a handful of DIV's to scroll upwards but I want one to scroll up after a pause after the other after the other. And the best I can come up with at the moment is
$('.curtain').each(function()
{
var $elem = $(this);
setTimeout(function()
{
$elem.animate({"height":0+'px'}, 2000);
}, 1000);
});
Problem is they still all animate together without pause. How can I go about doing something in this fashion. The divs are dynamically generated and there can be 5 - 20 of them so doing a hardcoded logic is out, any ideas?
function animateIt () {
var elems = $('.curtain').get();
(function next() {
if(elems.length){
var elem = $(elems.shift());
elem.animate({"height":0+'px'}, 2000, next);
}
})();
}
animateIt();
running example
Another way like queue
function animateIt () {
var divs = $('.curtain');
divs.each( function(){
var elem = $(this);
$.queue(divs[0],"fun", function(next) { elem.animate({"height":0+'px'}, 2000, next); });
});
divs.eq(0).dequeue("fun");
}
Looks like a simple recursive function might work for you here -
function doAnimation(elapsed){
var iterations = $('.curtain').length;
var current = elapsed+1;
if (current <= iterations){
setTimeout(function(){
$('.curtain:eq(' + elapsed + ')').animate(...);
doAnimation(current);
},50);
}
}
doAnimation(0);
Here's a simple demo