I'm working on a website that will feature two banners- one for mobile and one for desktop. I've got the two banners in place but there seems to be an issue with the two seperate javascript files conflicting as the mobile banner doesn't work correctly when the desktop banner javascript file is included. Now I've narrowed it down and think a setTimeout in the desktop javascript file is causing the issue as when I remove that code the mobile banner works fine. To show this is the javascript code for the mobile banner (the issue lies within the click event of the prev/next buttons):
//Add click events to buttons
$('.js-showcase-next').click(function(event) {
event.preventDefault();
if ($(':animated').length) {
return false;
} else {
// Clear the interval, animate the banner and then restart the interval
clearInterval(banner_interval);
bannerSwitch(banner_list, false, false);
banner_interval = setInterval(function() {
bannerSwitch(banner_list);
}, wait_time);
}
});
$('.js-showcase-prev').click(function(event) {
event.preventDefault();
if ($(':animated').length) {
return false;
} else {
// Clear the interval, animate the banner and then restart the interval
clearInterval(banner_interval);
bannerSwitch(banner_list, true, false);
banner_interval = setInterval(function() {
bannerSwitch(banner_list);
}, wait_time);
}
});
This is the javascript of the desktip banner that's causing the issue (when removed the mobile banner works fine):
var wait = setInterval(function() {
if (!$(currentBanner, loading).is(":animated")) {
clearInterval(wait);
loading.stop().fadeOut(300, function() {
setTimeout(function() {
bannerInit();
}, 800);
startInterval();
if (initialLoad) {
initialLoad = false;
next.slideDown();
previous.slideDown();
}
});
}
}, 200);
It seems that the setTimeout it causing the issue but I don't understand why (they're two seperate javascript files). Can anybody shed some light and maybe have an idea how to fix it?
Update: This is the code for the bannerInit
function bannerInitControls() {
previous.bind("click", function() {
$(navigationSelector + currentIndex).removeClass(navigationSelectedClass);
if (currentIndex == 0) {
currentIndex = bannerCount;
} else {
currentIndex--;
}
$(navigationSelector + currentIndex).addClass(navigationSelectedClass);
bannerLoad(currentIndex);
});
previous.bind("mouseenter", function() {
$("#banner-nav-prev").stop().delay(300).show();
});
previous.bind("mouseleave", function() {
$("#banner-nav-prev").stop().delay(300).hide();
});
next.bind("click", function() {
$(navigationSelector + currentIndex).removeClass(navigationSelectedClass);
if (currentIndex + 1 < banners.length) {
currentIndex++;
} else {
currentIndex = 0;
}
$(navigationSelector + currentIndex).addClass(navigationSelectedClass);
bannerLoad(currentIndex);
});
next.bind("mouseenter", function() {
$("#banner-nav-next").stop().delay(300).show();
});
next.bind("mouseleave", function() {
$("#banner-nav-next").stop().delay(300).hide();
});
}
function bannerInitNavigation(index) {
for (var i = 0; i <= bannerCount; i++) {
var listItemClass = 'banner-nav-' + i;
var listItemSelector = listItemClass;
if (i == index) {
listItemClass += ' banner-nav-current';
}
var listItem = '<li class="' + listItemClass + '"></li>'
$(".banner-nav-list").append(listItem);
}
}
