We Keep Coding

Issue with jQuery-based carousel and window resize

I have a weird bug in my code that is causing my carousel to act funny if the window is resized.
I haven't been able to pin-point what may be causing the issue, but if you run the code and then resize the window, the carousel will start to move back and forth rapidly, avoiding the 10-second timer that I have placed on it.
Here is a link to my example fiddle: https://jsfiddle.net/zeropsi/ufvLn25b/
Any thoughts?

The trouble is when window is being resized, the window.resize gets triggered a number of times and because of that carousel keeps sliding rapidly. I searched for 'jquery window resize trigger once complete' and found help. This is how I modified your code from the fiddle.
<script>
$(document).ready(function() {
$(document).on("click", ".carousel-indicators li", function() {
$(".carousel-indicators li").removeClass("active");
var a = $(this).data("slide");
$(this).addClass("active");
$("div#billboards").animate({
"left": (a * -100) + "%"
});
$(".billboard").removeClass("active");
$(".billboard[data-billboard='" + a + "']").addClass("active");
return false;
});
// var resizeTimer;
//
// $(window).on("resize", function() {
// console.log("window resized");
//
// clearTimeout(resizeTimer);
// resizeTimer = setTimeout(function() {
// // run code here, resizing has stopped
// BillboardCarousel.init();
// },10000);
//
// });
var id;
$(window).on("resize", function() {
clearTimeout(id);
id = setTimeout(doneResizing, 500);
});
function doneResizing(){
BillboardCarousel.init();
}
if ($("section#carousel").length === 1) {
BillboardCarousel.init();
}
});
var BillboardCarousel = {
init: function() {
BillboardCarousel.resize();
},
imagesLoaded: function() {
var imagesLoaded = 0;
$(".billboard").each(function() {
var image = new Image();
image.src = $(this).data("image");
image.onload = function() {
imagesLoaded++;
if (imagesLoaded === $(".billboard").length) {
BillboardCarousel.startCarousel();
}
};
});
},
startCarousel: function() {
var interval = parseInt($("div#billboards").data('interval'));
window.setInterval(function() {
BillboardCarousel.timer();
}, 10000);
},
resize: function() {
var a = $(".billboard").length;
var b = $(window).width();
$(".billboard").css({
"width": b + "px",
"float": "left",
"display": "inline-block"
});
$("div#billboards").css({
"width": a * 100 + "%",
"left": "0%"
});
$("div#billboards").attr("data-interval", 10000);
BillboardCarousel.imagesLoaded();
},
timer: function() {
var a = $(".billboard.active").data("billboard");
a++;
if (a >= $(".billboard").length) {
a = 0;
}
$(".billboard").removeClass("active");
$(".carousel-indicators li").removeClass("active");
$(".billboard[data-billboard='" + a + "']").addClass("active");
$(".carousel-indicators li[data-slide='" + a + "']").addClass("active");
$("div#billboards").animate({ "left": (a * -100) + "%" });
}
};
</script>
These are a few helpful links -
JQuery: How to call RESIZE event only once it's FINISHED resizing?
http://jsfiddle.net/Zevan/c9UE5/1/
https://css-tricks.com/snippets/jquery/done-resizing-event/

Jquery dynamically created element won't ClearTimeout();

I'm trying to make a hover popup window with event information for a school project.
when i'm not hovering the popup i need to to be removed, but if you enter within a second apart it should clear my timeout. but it wont.
here's my code :
var timer;
var events = [1, 10, 18, "Museum De Vishal", 'event informatie', 'imgpath'];
$('.event:not(.order)').hover(function () {
var offset = $("#planyourday").offset();
var offsetTop = $(this).offset();
var width = $("#planyourday").width();
var height = $("#planyourday").height();
var eventHeader = events[3];
var eventImg = events[5];
var eventInfo = events[4];
$('#planyourday').append("<div title='press here for more information' class='hidden meh' id='eventInfo'><div class='arrow_box'></div><div class='eventMenu'><h2 class='eventHeader'></h2><div title='Close this' class='eventRemove'>X</div></div> <br /><img class='eventImg' /><br /><p class='eventInfo'></p></div>");
$('#eventInfo').css({ "top": offsetTop.top + 35 + "px", "left": offsetTop.left + "px", "height": (height - 8) + "px", "bottom": -height + "px" });
$('.arrow_box').css({ left: offsetTop.left + "px" });
$('.eventHeader').html(eventHeader);
$('.eventImg').attr('src', eventImg);
$('.eventInfo').html(eventInfo);
$('#eventInfo').slideDown();
}).children('.order').mouseover(function () {
return false;
});
$('body').on("mouseenter", "#eventInfo, .event", function () {
$(this).css({ border: "1px solid red" })
ClearTimer();
});
$('body').on("mouseout", "#eventInfo, .event", function () {
StartTimer();
});
function ClearTimer() {
clearTimeout(timer);
}
function StartTimer() {
timer = window.setTimeout(function () {
$('#eventInfo').remove();
}, 5000);
}
i hope you guys can help me, Thnx :)
update: here's a JSFiffle, http://jsfiddle.net/3uzo25cj/
update: i used the wrong mouse event i used mouseout and should have used mouseleave.

You should clear the running timer before starting a new one:
function ClearTimer() {
clearTimeout(timer);
}
function StartTimer() {
ClearTimer();
timer = window.setTimeout(function () {
$('#eventInfo').remove();
}, 5000);
}

$('body').on("mouseleave", "#eventInfo, .event", function () {
StartTimer();
});

How to scroll once in $(window).scroll() have another scroll command

I have a vertical photo viewer
and i need a scroll effect is once a page height when mouse wheel down.
so i have following code
$(document).ready(function() {
$(window).scroll(function () {
var H = $(window).height();
var st = $(this).scrollTop();
$("html, body").animate({ scrollTop: H + st }, 500, function () {
console.log("finish scroll");
});
});
});
But when i scroll once, it will repeat again and again until to the bottom.
How can i solve this problem?
Thanks in advance.

I used a counter and a timer so that the counter waits half a second after the scroll has finished..
http://jsfiddle.net/beardedSi/p45rH/1/
$(document).ready(function () {
var H = $(window).height(),
go = true;
console.log(H);
//just for visual, set the height of boxes to be same as window height
//to check it is all working
$('.box').css('height', H + "px");
function scroller() {
$("html, body").animate({
scrollTop: '+=' + H
}, 400, function () {
console.log("finished");
setTimeout(function () {
go = true;
}, 400);
});
}
$(document).on('scroll', function (e) {
e.preventDefault();
if (go) {
go = false;
scroller();
}
});
});

The problem is the animation make a scroll event too. so you have a scrolling loop.
To resolve that, you can add a flag.
It's not the best way to solve your problem but you can do this => http://jsbin.com/qagayopu/2/edit

missing ) after argument list else { - i can't see it? [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 11 years ago.
Pardon for this, i just get this error in console but i can't see it? I may be blind at the moment, anyone please helps me get this error fixed?
says: "missing ) after argument list else {"
//run the function for all boxes
$(".box").each(function () {
var thisBox = $(this);
var url = thisBox.href;
var infoBox = $(".info", thisBox);
thisBox.data('height', $(this).height());
thisBox.click(function () {
if (!thisBox.hasClass("opened")) {
thisBox.addClass("opened");
$("img", box).fadeOut("slow", function () {
infoBox.css({
"visibility": "visible",
"height": "auto"
});
infoBox.load(url, function () {
$('.readMore', thisBox).click(function (e) {
e.preventDefault();
var selector = $(this).attr('data-filter-all');
$('#container').isotope({
filter: selector
});
$('#container').isotope('reloadItems');
return false;
});
$('Close"').appendTo(infoBox).click(function (e) {
e.preventDefault();
$("html, body").animate({
scrollTop: 0
}, 500);
$('#container').isotope('reLayout');
});
var newHeight = infoBox.outerHeight(true);
thisBox.css({
"width": "692",
"height": newHeight
});
infoBox.animate({
width: 692,
height: newHeight
}, function () {
$('#container').isotope('reLayout', function () {
Shadowbox.setup();
thisBox.removeClass("loading");
infoBox.css({
"visibility": "visible"
});
var videoSpan = infoBox.find("span.video");
iframe = $('<iframe/>', {
'frameborder': 0,
'class': 'tide',
'width': '692',
'height': '389',
'src': 'http://player.vimeo.com/video/' + videoSpan.data("vimeoid") + '?autoplay=0&api=1'
});
videoSpan.replaceWith(iframe);
});
});
});
}
else {
$(".info").empty();
$("img", thisBox).fadeIn("slow");
thisBox.css("width", "230");
thisBox.height(box.data('height'));
thisBox.removeClass("opened");
};
});
});
});

You have to move one '});' of the bottom before the else:
//run the function for all boxes
$(".box").each(function () {
var thisBox = $(this);
var url = thisBox.href;
var infoBox = $(".info", thisBox);
thisBox.data('height', $(this).height());
thisBox.click(function () {
if (!thisBox.hasClass("opened")) {
thisBox.addClass("opened");
$("img", box).fadeOut("slow", function () {
infoBox.css({
"visibility": "visible",
"height": "auto"
});
infoBox.load(url, function () {
$('.readMore', thisBox).click(function (e) {
e.preventDefault();
var selector = $(this).attr('data-filter-all');
$('#container').isotope({
filter: selector
});
$('#container').isotope('reloadItems');
return false;
});
$('Close"').appendTo(infoBox).click(function (e) {
e.preventDefault();
$("html, body").animate({
scrollTop: 0
}, 500);
$('#container').isotope('reLayout');
});
var newHeight = infoBox.outerHeight(true);
thisBox.css({
"width": "692",
"height": newHeight
});
infoBox.animate({
width: 692,
height: newHeight
}, function () {
$('#container').isotope('reLayout', function () {
Shadowbox.setup();
thisBox.removeClass("loading");
infoBox.css({
"visibility": "visible"
});
var videoSpan = infoBox.find("span.video");
iframe = $('<iframe/>', {
'frameborder': 0,
'class': 'tide',
'width': '692',
'height': '389',
'src': 'http://player.vimeo.com/video/' + videoSpan.data("vimeoid") + '?autoplay=0&api=1'
});
videoSpan.replaceWith(iframe);
});
});
});
});
}
else {
$(".info").empty();
$("img", thisBox).fadeIn("slow");
thisBox.css("width", "230");
thisBox.height(box.data('height'));
thisBox.removeClass("opened");
};
});
});

Around line 19 here:
$("img", box).fadeOut(
You're not closing this function call. You need to close it around line 68 with });, as shown below.
//run the function for all boxes
$(".box").each(function () {
var thisBox = $(this);
var url = thisBox.href;
var infoBox = $(".info", thisBox);
thisBox.data('height', $(this).height());
thisBox.click(function () {
if (!thisBox.hasClass("opened")) {
thisBox.addClass("opened");
$("img", box).fadeOut("slow", function () {
infoBox.css({
"visibility": "visible",
"height": "auto"
});
infoBox.load(url, function () {
$('.readMore', thisBox).click(function (e) {
e.preventDefault();
var selector = $(this).attr('data-filter-all');
$('#container').isotope({
filter: selector
});
$('#container').isotope('reloadItems');
return false;
});
$('Close"').appendTo(infoBox).click(function (e) {
e.preventDefault();
$("html, body").animate({
scrollTop: 0
}, 500);
$('#container').isotope('reLayout');
});
var newHeight = infoBox.outerHeight(true);
thisBox.css({
"width": "692",
"height": newHeight
});
infoBox.animate({
width: 692,
height: newHeight
}, function () {
$('#container').isotope('reLayout', function () {
Shadowbox.setup();
thisBox.removeClass("loading");
infoBox.css({
"visibility": "visible"
});
var videoSpan = infoBox.find("span.video");
iframe = $('<iframe/>', {
'frameborder': 0,
'class': 'tide',
'width': '692',
'height': '389',
'src': 'http://player.vimeo.com/video/' + videoSpan.data("vimeoid") + '?autoplay=0&api=1'
});
videoSpan.replaceWith(iframe);
});
});
});
});
}
else {
$(".info").empty();
$("img", thisBox).fadeIn("slow");
thisBox.css("width", "230");
thisBox.height(box.data('height'));
thisBox.removeClass("opened");
};
});
});
});

jQuery gallery with setInterval() method does not work correctly when page loses focus

I create jQuery code for listing images every 5 sec - when the focus is on the button which is located on the picture, it must stop changing. I have a problem when my page is lost focus - when I back it dose not work correctly for some time because the coordinates of pictures are not correct!
Here is my SavasSript code:
var displayTimeout = 5000;
var bannerCurrentImgIndex = 0;
var timer;
var link;
function bannerDoWork() {
var bannerImages = $("#myGallery .main_pic");
var bannerImagesCount = bannerImages.length;
if (bannerCurrentImgIndex == bannerImagesCount - 1) {
bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
bannerImages.eq(0).animate({ 'left': '0' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
bannerCurrentImgIndex = 0;
}
else {
bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex + 1).animate({ 'left': '0' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
bannerCurrentImgIndex = bannerCurrentImgIndex + 1;
}
}
$(document).ready(function () {
timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
link = $("#myGallery .main_pic_btn");
link.hover(function () { timer = clearInterval(timer); },
function () {
if (timer == null)
timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
});
});

I find answer! I set animate parameter queue=false - and now it works great!
Example:
firstPic.animate({ left: 0, top: 0 }, { queue: false, duration: "slow" });