I build a jquery carousel. But when I do fast Swiperight or left for interval will interfere and work fastly. How can I fix this?
Here is uploaded project
I have settings variable in setting interval is time for Setinterval and items are my images, Slide is active image to show, Clock is my Setinterval Function.
when slide change I clear clock variable and after then set it with time out to user can view the slide and slide does not change.
var settings = $.extend({
interval: 5000,
element: this.selector,
items: ['images/1.jpg','images/2.jpg','images/3.jpg'],
slide: 0,
clock: 0,
}, options);
// Touch
$(settings.element + ' .primary img').on("swiperight", function () {
nextSlide();
pauseInterval();
setTimeout(function () {
if (!settings.clock)
settings.clock = setInterval(nextSlide, settings.interval)
}, 4000);
}).on("swipeleft", function () {
prevSlide();
pauseInterval();
setTimeout(function () {
if (!settings.clock)
settings.clock = setInterval(prevSlide, settings.interval)
}, 4000);
});
// Next Slide
function nextSlide() {
settings.slide++;
if (settings.slide >= settings.items.length) settings.slide = 0;
$(settings.element + ' .primary img').attr('src', settings.items[settings.slide]).attr('data-slide', settings.slide);
activeThumbnail()
}
// Prev Slide
function prevSlide() {
settings.slide--;
if (settings.slide < 0) settings.slide = settings.items.length;
$(settings.element + ' .primary img').attr('src', settings.items[settings.slide]).attr('data-slide', settings.slide);
activeThumbnail()
}
//Pause Interval
function pauseInterval() {
clearInterval(settings.clock);
settings.clock = 0;
}
You will find it simpler to work with setTimout() exclusively instead of a mix of setTimout() and setInterval().
There's no unique way to write the code. Here's one :
var settings = $.extend({
'delay': {
'long_': 9000, // (4000 + 5000) after swiping
'short_': 5000 // auto
},
'element': this.selector,
'items': ['images/1.jpg', 'images/2.jpg', 'images/3.jpg'], // array of Strings
'slide': 0,
'clock': null
}, options);
$(settings.element + ' .primary img').on('swiperight', nextSlide).on('swipeleft', prevSlide); // nice and simple
// nextSlide() and prevSlide() ...
// in auto: `delay` will be `settings.delay.short_`.
// on manual swipe: `delay` will be `undefined` and will default to `settings.delay.long_`.
function nextSlide(delay) {
delay = (delay === undefined) ? settings.delay.long_ : delay;
settings.slide = (settings.slide + 1) % settings.items.length;
set(nextSlide, delay);
}
function prevSlide(delay) {
delay = (delay === undefined) ? settings.delay.long_ : delay;
settings.slide = (settings.slide + settings.items.length - 1) % settings.items.length;
set(prevSlide, delay);
}
// set() does all the stuff common to nextSlide() and prevSlide().
function set(action, delay) {
$(settings.element + ' .primary img').attr('src', settings.items[settings.slide]).attr('data-slide', settings.slide);
activeThumbnail();
clearTimeout(settings.clock); // relevant only after a manual swipe, but does no harm in auto.
settings.clock = setTimeout(action.bind(null, settings.delay.short_), delay);
}
Related
I am trying out the snow-fall animation. I want to stop it after for e.g. 5 seconds. I have current add the animate between setTimeOut, somehow there's no effect. What am I missing here?
Current code:
function fallingSnow() {
var snowflake;
snowflake = $('<div class="snowflakes"></div>');
$('#snowZone').prepend(snowflake);
snowX = Math.floor(Math.random() * $('#site').width() / 4);
snowSpd = Math.floor(Math.random() + 50000);
snowflake.css({
'left': snowX + 'px'
});
setTimeout(function(){
snowflake.stop().animate({
top: "700px",
opacity: "5",
}, snowSpd, function () {
$(this).remove();
fallingSnow();
})
},5000);
}
timer = Math.floor(Math.random() + 1000);
window.setInterval(function () {
fallingSnow();
}, timer);
UPDATE: AFTER UTILIZING #Kyojimaru's answer.
snowflake.animate({
top: "700px",
opacity: "5",
}, 5000, function () {
$(this).remove();
if(!end) {
fallingSnow();
window.setTimeout(function () {
clearInterval(interval);
end = true;
}, 5000);
}
}
);
updated fiddle
it's because your setInterval never stopped from calling fallingSnow, try changing your code to this
var firstCall = false;
var interval, timeout;
function fallingSnow() {
var snowflake;
snowflake = $('<div class="snowflakes"></div>');
$('#snowZone').prepend(snowflake);
snowX = Math.floor(Math.random() * $('#site').width() / 4);
snowSpd = Math.floor(Math.random() + 50000);
snowflake.css({
'left': snowX + 'px'
});
if(!firstCall) {
timeout = setTimeout(function(){
clearInterval(interval);
},5000);
firstCall = true;
}
}
timer = Math.floor(Math.random() + 1000);
interval = setInterval(function () {
fallingSnow();
}, timer);
basically what you need is clearing the interval that has been set for the function fallingSnow() using clearInterval only on the first time the function is called using setTimeout
here's the other example about it with what you want to do : JSFIDDLE
and here's what probably happen to you now : JSFIDDLE
EDIT
based on your fiddle here ( need to add jQuery and snowflakes css width and height to anything beside 0px )
your problem is you declare in the script as
var firstTime = false;
but checking it with
if (!firstCall)
so you need to change var firstTime = false; to var firstCall = false;
the other problem arise from this code here
snowflake.animate({
top: "700px",
opacity: "5",
}, snowSpd, function () {
$(this).remove();
fallingSnow();
});
which call the fallingSnow(); function again when animate finished, thus the snow is never stop falling, so you need to check if the the setTimeout have already clear the interval or not, you need to change your code to this
snowflake.animate({
top: "700px",
opacity: "5",
}, snowSpd, function () {
$(this).remove();
if(!end) {
fallingSnow();
}
});
if (!firstCall) {
timeout = setTimeout(function () {
clearInterval(interval);
end = true;
}, 5000);
firstCall = true;
}
and add var end = false; in the start with firstCall
here's the working one : JSFIDDLE
I cant get my head around this, been trying many many different ways but no luck.. Basically, I'm trying to pause the animation on mouseOver and resume it on mouseOut. I was able to make it pause by simply using clearTimeout() but I have no idea on how to resume it back on. Please kindly advise me with a correct solution and syntax.
Thank you in advance!
(function ($) {
$.fn.simpleSpy = function (interval, limit) {
limit = limit || 3;
interval = interval || 3000;
items = [];
return this.each(function () {
$list = $(this),
currentItem = 0,
total = 0; // initialise later on
var i = 0;
smplet = $list.clone();
smplet.css("display","none");
$("body").append(smplet);
total = smplet.find('> li').length;
$list.find('> li').filter(':gt(' + (0) + ')').remove();
$list.css("display","");
height = $list.find('> li:first').height();
$list.wrap('<div class="spyWrapper" />').parent().css({ height : 55, position:"relative", overflow:"hidden" });
$('.close').click(function(){
clearTimeout(timec);
if(currentItem == 0 && smplet.length != 1)
delitem=total;
else
delitem=currentItem - 1;
smplet.find('> li').eq(delitem).remove();
currentItem--;
var temp=smplet.find('> li').eq(currentItem).clone();
var $insert = temp.css({
"margin-top":-height-height/3,
opacity : 0
}).prependTo($list);
// fade the LAST item out
$list.find('> li:last').animate({ opacity : .5 ,"margin-top":height/3}, 500, function () {
$(this).remove();
});
$insert.animate({"margin-top":0,opacity : 1 }, 500).animate({opacity : 1},1000);
currentItem++;
total=smplet.find('> li').length;
if (currentItem >= total) {
currentItem = 0;
}
if (total == 1){
simpleSpy.stop();
}
else if(total == 0){
$("#topbar").hide();
}
timec=setTimeout(spy, interval);
});
currentItem++;
function spy() {
var temp=smplet.find('> li').eq(currentItem).clone();
var $insert = temp.css({
"margin-top":-height-height/3,
opacity : 0,
display : 'none'
}).prependTo($list);
$list.find('> li:last').animate({ opacity : .5 ,"margin-top":height/3}, 500, function () {
$(this).remove();
});
$insert.animate({"margin-top":0,opacity : 1 }, 500).animate({opacity : 1},1000);
$insert.css("display","");
currentItem++;
if (currentItem >= total) {
currentItem = 0;
}
timec=setTimeout(spy, interval);
}
timec=setTimeout(spy, interval);
});
};
$('ul.alerts')
.mouseover(function(){
clearTimeout(timec);
})
.mouseout(function(){
timec=setTimeout(spy, interval);
});
})(jQuery);
Call
$(document).ready(function() {
$('ul.alerts').simpleSpy();
});
jsfiddle with html and css
http://jsfiddle.net/1781367/3eK4K/3/
I changed the timeout, which you were setting over and over, to an interval, which you only need to set once. Then I added a "paused" property that is set to true on mouseover and back to false on mouseout.
var paused = false;
$list.mouseover(function() { paused = true; });
$list.mouseout(function() { paused = false; });
Then we just check that property before the rotation animation occurs:
if (paused) {
return;
}
http://jsfiddle.net/3eK4K/6/
The code (from an old plugin that I am trying to make responsive) slides a set of images across every n seconds. It uses setInterval code as below, and works well on Firefox. On Chrome it runs once only, and debugging indicates that the second setInteral function is just not called. Please help as its diving me mad. Running example at http://lelal.com/test/site10/index.html (sorry about the load time)
play = setInterval(function() {
if (!busy) {
busy = true;
updateCurrent(settings.direction);
slide();
}
}, settings.speed);
The complete plugin code is below (sorry its long)
/*
* jQuery Queue Slider v1.0
* http://danielkorte.com
*
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function($){
var QueueSlider = function(element, options) {
var play = false,
busy = false,
current = 2,
previous = 2,
widths = [],
slider = $(element),
queue = $('ul.queue', slider),
numImages = $('img', queue).size(),
viewportWidth = slider.width(),
settings = $.extend({}, $.fn.queueSlider.defaults, options);
$(window).resize(function(){
if(busy !== false)
clearTimeout(busy);
busy = setTimeout(resizewindow, 200); //200 is time in miliseconds
});
function resizewindow() {
viewportWidth = slider.width();
if (settings.scale > 0) {
slider.css('height',viewportWidth * settings.scale);
computeQueueWidth();
}
queue.css('left', -getQueuePosition());
busy = false;
}
function requeue() {
$('li', queue).each(function(key, value) {
$(this).attr('class', 'slide-' + (key+1));
});
}
function updateCurrent(dir) {
current += dir;
if (current < 1) {
current = numImages;
} else if (current > numImages) {
current = 1;
}
}
function getQueuePosition() {
var i = 0, index = current-1,
queuePosition = (viewportWidth - widths[index]) / -2;
for (i = 0; i < index; i++) { queuePosition += widths[i]; }
return queuePosition;
}
function computeQueueWidth() {
var queueWidth = 0;
// factor = slider.height() / settings.imageheight;
// settings.imageheight = settings.imageheight * factor;
// Get the image widths and set the queue width to their combined value.
$('li', queue).each(function(key, value) {
var slideimg = $("img", this),
slide = $(this),
// width = slide.width() * factor,
width = slideimg.width();
slide.css('width', width+'px');
queueWidth += widths[key] = width;
});
queue.css('width', queueWidth + 500);
}
function slide() {
var animationSettings = {
duration: settings.transitionSpeed,
queue: false
};
// Emulate an infinte loop:
// Bring the first image to the end.
if (current === numImages) {
var firstImage = $('li.slide-1', queue);
widths.push(widths.shift());
queue.css('left', queue.position().left + firstImage.width()).append(firstImage);
requeue();
current--; previous--;
}
// Bring the last image to the beginning.
else if (current === 1) {
var lastImage = $('li:last-child', queue);
widths.unshift(widths.pop());
queue.css('left', queue.position().left + -lastImage.width()).prepend(lastImage);
requeue();
current = 2; previous = 3;
}
// Fade in the current and out the previous images.
if (settings.fade !== -1) {
$('li.slide-'+current, queue).animate({opacity: 1}, animationSettings);
$('li.slide-'+previous, queue).animate({opacity: settings.fade}, animationSettings);
}
// Animate the queue.
animationSettings.complete = function() { busy = false; };
queue.animate({ left: -getQueuePosition() }, animationSettings);
previous = current;
}
//
// Setup the QueueSlider!
//
if (numImages > 2) {
// Move the last slide to the beginning of the queue so there is an image
// on both sides of the current image.
if (settings.scale > 0) {
slider.css('height',viewportWidth * settings.scale);
}
computeQueueWidth();
widths.unshift(widths.pop());
queue.css('left', -getQueuePosition()).prepend($('li:last-child', queue));
requeue();
// Fade out the images we aren't viewing.
if (settings.fade !== -1) { $('li', queue).not('.slide-2').css('opacity', settings.fade); }
// Include the buttons if enabled and assign a click event to them.
if (settings.buttons) {
slider.append('<button class="previous" rel="-1">' + settings.previous + '</button><button class="next" rel="1">' + settings.next + '</button>');
$('button', slider).click(function() {
if (!busy) {
busy = true;
updateCurrent(parseInt($(this).attr('rel'), 10));
clearInterval(play);
slide();
}
return false;
});
}
// Start the slideshow if it is enabled.
if (settings.speed !== 0) {
play = setInterval(function() {
if (!busy) {
busy = true;
updateCurrent(settings.direction);
slide();
}
}, settings.speed);
}
}
else {
// There isn't enough images for the QueueSlider!
// Let's disable the required CSS and show all one or two images ;)
slider.removeClass('queueslider');
}
};
$.fn.queueSlider = function(options) {
return this.each(function(key, value) {
var element = $(this);
// Return early if this element already has a plugin instance.
if (element.data('queueslider')) { return element.data('queueslider'); }
// Pass options to plugin constructor.
var queueslider = new QueueSlider(this, options);
// Store plugin object in this element's data.
element.data('queueslider', queueslider);
});
};
$.fn.queueSlider.defaults = {
scale: 0,
imageheight: 500,
fade: 0.3, // Opacity of images not being viewed, use -1 to disable
transitionSpeed: 700, // in milliseconds, speed for fade and slide motion
speed: 7000, // in milliseconds, use 0 to disable slideshow
direction: 1, // 1 for images to slide to the left, -1 to silde to the right during slideshow
buttons: true, // Display Previous/Next buttons
previous: 'Previous', // Previous button text
next: 'Next' // Next button text
};
}(jQuery));
Have a look here:
http://www.w3schools.com/jsref/met_win_setinterval.asp
The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.
Looks like you're calling clearInterval after the first usage of play, which makes it stop working.
I have a jQuery/JS function that is using setInterval to loop through some image slides I have. It just flips through every 5 seconds...
Now I want it to pause if my mouse is hovered over it. How do I go about doing that on the setInterval function?
var current = 1;
function autoAdvance() {
if (current == -1) return false;
jQuery('#slide_menu ul li a').eq(current % jQuery('#slide_menu ul li a').length).trigger('click', [true]);
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = jQuery(".interval").val();
if (changeEvery <= 0) {
changeEvery = 10;
}
var itvl = setInterval(function () {
autoAdvance()
}, changeEvery * 1000);
Something like this would work assuming interval is defined in an outer scope:
$('.slideshow img').hover(function() {
interval = clearInterval(interval);
}, function() {
interval = setInterval(flip, 5000);
});
(function () {
var imgs = $('#your_div img'), index = 0, interval,
interval_function = function () {
imgs.eq(index).hide();
index = (index + 1) % imgs.length;
imgs.eq(index).show();
};
imgs.eq(0).show();
interval = setInterval(interval_function, 5000);
$('#your_div').hover(function () {
clearInterval(interval);
}, function () {
interval = setInterval(interval_function, 5000);
});
}());
Example: http://jsfiddle.net/Zq7KB/3/
I reused some old code I wrote for a question the other day, but I figured it didn't matter that much. The trick is to store your interval in a variable that you keep in the background. Then, when you hover over the container, clear the interval. When you hover out of the container, re-set the interval. To get a better feel of how this works, change those 5000s to 1000s so it passes more quickly for testing.
Hope this helps.
In the slide show code below, there's a function to press "previous" and "next" links. The "next" one works fine, and if you keep pressing it, it cycles through all the slides.
The "previous" one is a bit messed up, for some reason - it will go back a slide or two but then it will just go blank!
Could you please help?
Thank you!
<script type="text/javascript">
start_slideshow(1, 3, 3000);
var currentSlide = 1;
function start_slideshow(start_frame, end_frame, delay) {
id = setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}
function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slide' + frame, { duration: 1.0 });
if (frame == end_frame) {
frame = start_frame;
currentSlide = frame;
} else {
frame = frame + 1;
currentSlide = frame;
}
Effect.Appear('slide' + frame, { duration: 1.0 });
if (delay == 1000) {
delay = 3000;
}
id = setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay);
})
}
function stop_slideshow() {
clearTimeout(id);
}
function next_slide() {
clearTimeout(id);
Effect.Fade('slide' + currentSlide, { duration: 1.0 });
if (currentSlide == 4) {
currentSlide = 0;
}
currentSlide = currentSlide + 1;
Effect.Appear('slide' + currentSlide, { duration: 1.0 });
id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), delay);
}
function previous_slide() {
clearTimeout(id);
if (currentSlide == 0) {
currentSlide = 1;
} else {
Effect.Fade('slide' + currentSlide, { duration: 1.0 });
currentSlide = currentSlide - 1;
Effect.Appear('slide' + currentSlide, { duration: 1.0 });
id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), delay);
}
}
</script>
I have run into a problem like this, or similar to this. I am assuming that you are "rapidly" clicking the previous or next button before the effect that is currently queued is finished. This will cause an error with the effects resulting in a given element having more than one affect being applied to it at the same time.
To fix this, scriptaculous gives us the ability to queue effects in order. Reference the docs here:
http://wiki.github.com/madrobby/scriptaculous/effect-queues
Essentially, you need to add a scope to your effects. So after you add your duration, you need to add a queue scope.
Example:
Effect.Fade('slide' + currentSlide, { duration: 1.0, queue: { scope: 'slide_show' } });
This allows us to cancel anything in the queue when a button is pressed.
var queue = Effect.Queues.get( 'slide_show' );
queue.each( function( effect ) { effect.cancel(); } );
This will possibly fix your blanking...but possibly not. Regardless, these methods need to be employed in your slide show ;)
Report back if it doesn't fix it, and I'll do some more troubleshooting.