I'm sometimes getting an error in my chrome console saying 'Uncaught RangeError: Maximum call stack size exceeded' I'm not sure what is causing it but I believe it is to do with a JavaScript setInterval method I'm using in my .js file.
I'm using the setInterval method to hide a sticky top nav after 4 seconds of inactivity by the user, the sticky nav reappears after the user moves their mouse or makes a keypress.
Also, while the below code is working as described in Chrome, in Firefox it only works once, i.e. the sticky nav is hidden once & reapears on mouse/keypress but does not disappear again.
What may be causing this error?
Why is Firefox behaving differently to Chrome?
I think may be making an error in how I'm using the setInterval method. In the code below, I set the interval at the beginning & clear the interval once the user clicks on the nav button (i.e. .mk-nav-responsive-link), I then re-start the interval method when the user clicks on the nav button to close the menu.
<!-- CODE ABOVE OMITTED FOR BREVITY -->
// Hide Nav on User Inactivity START
var userInactivity = 1;
var userInactivityInterval = setInterval(function(){userInactivityTimer()},1000);
function userInactivityTimer(){
if(userInactivity == 4 && jQuery(window).scrollTop() > (vh/8)){
jQuery('.mk-nav-responsive-link img').fadeOut();
userInactivity = 1;
}
userInactivity = userInactivity+1;
// console.log(userInactivity);
// console.log(jQuery(window).scrollTop());
jQuery(document).bind('mousemove keypress', function() {
jQuery('.mk-nav-responsive-link img').fadeIn();
userInactivity = 1;
});
}
// Hide Nav on User Inactivity END
// CUSTOM DROP DOWN MENU TRANSITIONS START
jQuery('.mk-nav-responsive-link').toggle(function() {
// RESPONSIVE FIX TO SHOW THE ENTIRE DROP DOWN MENU ON SMALL HEIGHT SCREENS
if (jQuery(window).height() < 405) {
jQuery(#mk-responsive-nav).css('height','581px');
jQuery(#responsive-nav-bg).animate({
top:'0',
height:'575px'
},175, 'linear');
} else {
jQuery(#responsive-nav-bg).animate({
top:'0',
height:'100vh'
},175, 'linear');
}
jQuery(.mk-desktop-logo).attr('src',/wp-content/themes/jupiter-child/images/EW-logo-white.png);
jQuery(.mk-nav-responsive-link > img).attr('src',/wp-content/themes/jupiter-child/images/x-close-menu.png);
jQuery(.mk-nav-responsive-link > img).css('padding-top','0');
jQuery(.mk-nav-responsive-link > img).css('padding-right','0');
jQuery('.mk-go-top.on').css({'display' : 'none'});
jQuery('.mk-desktop-logo').css({'position' : 'fixed'});
clearInterval(userInactivityInterval);
}, function() {
jQuery(#responsive-nav-bg).animate({
top:'87px',
height:'0'
},250, 'linear');
if (jQuery(window).width() < 405) {
jQuery(.mk-desktop-logo).attr('src',/wp-content/themes/jupiter-child/images/EW-logo-responsive.png);
} else {
jQuery(.mk-desktop-logo).attr('src',/wp-content/uploads/EW-logo.png);
}
jQuery(.mk-nav-responsive-link > img).attr('src',/wp-content/themes/jupiter-child/images/burger-menu-icon.png);
jQuery(.mk-nav-responsive-link > img).css('padding-top','10px');
jQuery(.mk-nav-responsive-link > img).css('padding-right','5px');
jQuery('.mk-go-top.on').css({'display' : 'inline-block'});
jQuery('.mk-desktop-logo').css({'position' : 'relative'});
userInactivityInterval = setInterval(function(){userInactivityTimer()},1000);
});
// CUSTOM DROP DOWN MENU TRANSITIONS END
<!-- CODE BELOW OMITTED FOR BREVITY -->
