Develop Reference

On Click events fires multiple times whenever the browser is being resized

I have this mobile menu that I'm currently building at the moment and I'm facing an issue with on('click') events. Whenever I try resizing the browser the event fires multiple times. At first load the script and event works fine, but when I start resizing the browser the event fires multiple times.
Below is a sample of the code I'm working on. Is there a way it fires only when once after resizing. I tried a temporary solution but it does not seem to take effect.
(function($){
'use strict';
var mobileMenu = {
init : function() {
$('.region-primary-menu').addClass('primary-mobile-menu');
$('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click', function() {
$(this).toggleClass('active');
console.log('click');
})
},
clear : function() {
$('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
}
}
$(document).ready(function() {
if ($(window).width() < 1180) {
mobileMenu.init();
}
else {
mobileMenu.clear();
}
});
$(window).on('resize', function(e) {
var resizeTimer;
clearTimeout(resizeTimer);
var resizeTimer = setTimeout(function() {
if ($(window).width() < 1180) {
mobileMenu.init();
}
else {
mobileMenu.clear();
}
}, 100)
});
})(jQuery)

It is because of click event being attached in mobileMenu.init(); function. On resize, a new clickevent is getting attached. You can use jQuery.off
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').off('click').on('click',

Because in your $(window).on('resize', function (e)... you do this :
if ($(window).width() < 1180) {
mobileMenu.init();
}
And in the mobileMenu.init() function definition you attach an event listener, so whenever you resize the window beneath 1180 size, it's going to attach more event listeners.
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click' ...
Anyways the other answer tells you how to remove the event listener, which is what you should do to fix it.

Swap mouseenter for hoverintent in code for mega menu lightbox

I have a mega menu that uses the hoverintent to delay the drop down, I have also set up a lightbox effect for the menu, however the code uses mouseenter and mouseleave, the problem is that whilst the drop down has a delay the lightbox effect doent, so as soon as the mouse passes over the lightbox is triggered. Is there any way that the code below can be changed to use hoverintent instead of mouseenter/mouseleave?
<script>
$(document).ready(function() {
if (document.documentElement.clientWidth > 801) {
$("#mega-menu").mouseenter(function() {
$("#mm-nav-overlay").toggle();
}).mouseleave(function () {
$("#mm-nav-overlay").hide();
});
}
});
</script>
Many Thanks

So I opted in the end to replace the code above with:
$(document).ready(function() {
if (document.documentElement.clientWidth > 801) {
$("#mega-menu").mouseenter(function() {
timer = setTimeout(function(){
$("#mm-nav-overlay").toggle();
},200/* <--- the delay */)
}).mouseleave(function () {
clearTimeout(timer);
$("#mm-nav-overlay").hide();
});
}
});

java script functionality only in mobile device

I want java script functionality only in mobile device 767px.
This is my code
$('#my-btnn').click(function () {
$('#mobile-login').hide();
$('#user-settings').slideToggle('fast');
});

You can simply check window width in order to determine if function should work or not:
$('#my-btnn').click(function () {
if ($(window).width() < 767) {
$('#mobile-login').hide();
$('#user-settings').slideToggle('fast');
}
});

You can bind your click by checking your resolution. Use onResize and check by screen.width
$(window).resize(function() {
if (screen.width <= 767) {
$('#my-btnn').bind('click', function () {
$('#mobile-login').hide();
$('#user-settings').slideToggle('fast');
});
}
});
And you can check if you were binded early.
Or you can just to add this checking in onReload

Responsive Jquery toggle command

I am having an issue with my code. Whenever, I load up the page in the browser or in a mobile device, and I try to toggle it suddenly toggles multiple times when I just clicked on it once. I am trying to use this syntax code to make it responsive.
My CodePen
$(window).resize(function() {
$(".textcontent").hide();
if ($(window).width() <= 480) {
jQuery(function($) {
$(document).ready(function() {
$(".textcontent").hide();
$(".titleheader").click(function() {
$(this).toggleClass("active").next().slideToggle("fast");
return false;
});
});
});
}
});

The text toggles more than once because you are binding the click handler each time the resize event fires. Each bind attaches another handler so, depending on how many times the resize event fires, you might end up with many click handlers firing at once.
I suggest that you bind or unbind your click handler depending on the screen width, like so:
$(function() {
// function to toggle a text section
function toggleText(elm) {
$(elm).toggleClass("active").next().slideToggle("fast");
}
// resize event handler
$(window).on('resize', function() {
if ($(window).width() <= 480) {
// if window <= 480, unbind and rebind click handlers, and hide all text content
$(".titleheader").off('click').on('click', function() {
toggleText(this);
});
$(".textcontent").hide();
} else {
// if the window > 480, unbind click handlers and hide all text
$(".titleheader").off('click');
$(".textcontent").show();
}
}).trigger('resize'); // initialize - trigger the resize once upon load
});
WORKING EXAMPLE
You might also want to throttle or "debounce" your resize handler so it won't fire continuously in IE, Safari, and Chrome.
EDIT:
An alternate method is to set a flag to indicate whether the layout is "small" or "large". Then, only change the layout if the flag does not indicate the desired layout:
$(function() {
// layout flag (defaults to "not small")
var small = false;
// function to toggle a text section
function toggleText(elm) {
$(elm).toggleClass("active").next().slideToggle("fast");
}
// resize event handler
$(window).on('resize', function() {
if ($(window).width() <= 480) {
// if window <= 480 and the layout is "not small", bind click handlers and hide all text content
if (!small) {
console.log('made small');
$(".titleheader").on('click', function() {
toggleText(this);
});
$(".textcontent").hide();
// set the layout flag to "small"
small = true;
}
} else {
// if the window > 480 and the layout is "small", unbind click handlers and hide all text
if (small) {
console.log('made large');
$(".titleheader").off('click');
$(".textcontent").show();
// set the layout flag to "not small"
small = false;
}
}
}).trigger('resize'); // initialize - trigger the resize once upon load
});
WORKING EXAMPLE

Accordion looping on resize

I have a menu that is hidden in an accordion when viewing on screens less than 600px.
On screens larger than 600px the menu is visible.
jsfiddle- http://jsfiddle.net/ashatron/zbzqoz2f/
it works ok, but when i resize the window to be greater than 600px, then go back to less than 600px then press view sitemap it loops the animation multiple times.
I think its running the function for every resize event, which is queing up the accordion and then looping it. But I'm not sure how best to order the syntax to get it to work.
Any help would be appreciated!
footernavmenufn = function() {
var current_width = $(window).width();
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
// console.log('hmmm');
return false;
}).next().hide();
} else {
$('.footer-accordion-head').hide();
$('.footer-accordion-body').show();
}
};
$(document).ready(function () {
footernavmenufn();
});
$(window).resize(function(){
footernavmenufn();
//console.log('OMG-WHY-YOU-NO-WORK');
});

The issue is that everytime window is resized and the condition is met, you're binding a new click event handler, so after a while there'll be multiple event handlers causing chaos. Ideally your code should be something like
$(document).ready(function () {
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
console.log('hmmm');
return false;
});
$(window).resize(footernavmenufn);
footernavmenufn(); // or $(window).trigger("resize");
});
footernavmenufn = function () {
var current_width = $(window).width();
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
} else {
$('.footer-accordion-head').hide();
$('.footer-accordion-body').show();
}
};
Updated Fiddle

Why do you have this code? Crazy one. Remove it:
if (current_width < 600) {
$('.footer-accordion-head').show();
$('.footer-accordion-body').hide();
$('.footer-accordion-head').click(function () {
$(".footer-accordion-body").slideToggle('400');
return false;
}

move the click declaration into the $(document).ready function.
at the moment everytime you resize the page that click function is being added again - so the repeat is once per page resize.
forked jsfiddle with change