Responsive multi menu not working with latest jquery

Hello all, I’m using a Wordpress theme that includes the responsive multi menu library] and when I include jquery 3.4.1 min, the menu not working correctly on my phone.

/*

Responsive Mobile Menu v1.1
Plugin URI: responsivemultimenu.com

Author: Adam Wysocki
Author URI: http://oncebuilder.com

License: http://opensource.org/licenses/MIT

*/

var $=jQuery.noConflict();

function adaptMenu() {
	/* 	toggle menu on resize */
	$('.rmm').each(function() {
		// initialize vars
		var maxWidth = 0;
		var width = 0;

		// width of menu list (non-toggled)
		$('.rmm-menu').children("li").each(function() {
			if($(this).parent().hasClass('rmm-menu')){
				width = $(this).outerWidth();//outerWidth();
				if(width>0){
					maxWidth += width;
				}
			}
		});

		// compare width
		var width = $('.rmm').css('max-width');
		width = width.replace('px', ''); 
		
		if ( $(this).parent().width() > width ) {
			$('.rmm-menu').removeClass("rmm-mobile");
			
			//remove all classes from mobile verion
			$(".rmm-menu ul").removeClass("rmm-subview");
			$(".rmm-menu li").removeClass("rmm-subover-hidden");
			$(".rmm-menu li").removeClass("rmm-subover-visible");
			$(".rmm-menu a").removeClass("rmm-subover-header");

			$(".rmm-toggled").removeClass("rmm-closed");
			$('.rmm-toggled').hide();
			
			//$('.rmm-toggled').removeClass("rmm-view");
			//$('.rmm-toggled').addClass("rmm-closed");
		}else {
			$('.rmm-menu').addClass("rmm-mobile");
			$('.rmm-toggled').show();
			$('.rmm-toggled').addClass("rmm-closed");
			
			//$('.rmm-toggled').removeClass("rmm-closed");
		}
	});
}

function responsiveMultiMenu() {
	$('.rmm').each(function() {
		// create mobile menu classes here to light up HTML
		$(this).find("ul").addClass("rmm-submenu");
		$(this).find("ul:first").addClass("rmm-menu");
		$(this).find("ul:first").removeClass("rmm-submenu");
		$(this).find('.rmm-submenu').prepend( '<li class="rmm-back"><a href="#">back</a></li>' );
		$(this).find("ul").prev().addClass("rmm-dropdown");
	
		// initialize vars
		var maxWidth = 0;
		var width = 0;

		// width of menu list (non-toggled)
		$('.rmm-menu').children("li").each(function() {
			if($(this).parent().hasClass('rmm-menu')){
				width = $(this).outerWidth();//outerWidth();
				if(width>0){
					maxWidth += width;
				}
				console.log(width)
			}
		});

		if ($.support.leadingWhitespace) {
			$(this).css('max-width' , (maxWidth+5)+'px');
		}else{
			$(this).css('width' , (maxWidth+5)+'px');
		}
		
		// create dropdown button
		var str=''
		str+='<div class="rmm-toggled rmm-view rmm-closed">'
			str+='<div class="rmm-toggled-controls">'
				str+='<div class="rmm-toggled-title">Menu</div>';
				str+='<div class="rmm-toggled-button"><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div>';
			str+='</div>';
		str+='</div>';
		
		$(this).prepend(str);
	});
	
	// click interacts in mobile wersion
	$('.rmm-dropdown').click(function (e) {
		if($(this).parents(".rmm-menu").hasClass('rmm-mobile')){
			e.preventDefault();
			e.stopPropagation();
			
			$(this).next().addClass("rmm-subview");

			var index=$(this).parent().index();
			
			var i=0;
			$(this).parent().parent().children("li").each(function() {
				if(index==$(this).index()){
					$(this).removeClass("rmm-subover-hidden");
					$(this).addClass("rmm-subover-visible");
				}else{
					$(this).removeClass("rmm-subover-visible");
					$(this).addClass("rmm-subover-hidden");
				}
			});
			$(this).addClass("rmm-subover-header");
		}
	});
	
	// click back interacts in mobile version
	$('.rmm-back a').click(function () {
		$(this).parent().parent().prev().removeClass("rmm-subover-header");
		$(this).parent().parent().removeClass("rmm-subview");
		$(this).parent().parent().parent().parent().find("li").removeClass("rmm-subover-hidden");
	});
	
	// click toggler interacts in mobile version
	$('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
		if ($(this).is(".rmm-closed")) {
			$(this).removeClass("rmm-closed");
		}else {
			$(this).addClass("rmm-closed");
		}
	});	
}

jQuery(window).load(function() {
    responsiveMultiMenu();
	adaptMenu();
});


$(window).resize(function() {
 	adaptMenu();
});

menu out

Hi @lozusharez, how do you include jQuery? Usually you shouldn’t have to worry as the theme would take care of loading its dependencies itself when registering its scripts. Also, from your screenshot that just looks like a styling issue… but it’s hard to tell without being able to inspect the actual page. Can you provide a demo link or working example that would reproduce the problem?

Okay. So I have created 2 working examples here.

As you can see the one with default jquery works fine. But with jquery 3.4.1 the error occurs.

The theme I worked on has jquery based on wordpress’ 1.12.4 version.

Thanks,

Thanks for the links! Alright so the problem is the use of load(), which used to be a shorthand for on('load') in earlier versions of jQuery but has then been deprecated, and removed with v3.0:

https://api.jquery.com/load-event/

So if you can modify the initialization code, just replace

jQuery(window).load(function() {
    responsiveMultiMenu();
	adaptMenu();
}); 

with

jQuery(window).on('load', function() {
    responsiveMultiMenu();
	adaptMenu();
}); 

and it should work fine. However, that this plugin still depends on a jQuery version that is 2 major releases behind suggests that it is not exactly getting maintained; so I would rather look for another library altogether.

Cool and thanks it worked.

Now I ran into another problem where the responsive menu is triggered even on desktop.

I believe it has something to do with this:

if ( $(this).parent().width() > width ) {

Any suggestions?
Yes I might be moving to a new library if that is the case. It hasn’t being worked on since 5 years ago. But thanks

Hm I can’t access your demo page any more so I can’t tell I’m afraid, but what do you get when logging those values to the console? BTW you don’t need JS to show / hide the burger menu on resize at all; this can easily be achieved with CSS alone using media queries, which is also much better for performance.

I think the problem is here:

	if ($.support.leadingWhitespace) {

			$(this).css('max-width' , (maxWidth+5)+'px');

		}else{

			$(this).css('width' , (maxWidth+5)+'px');

		}

I believe$.support is deprecated in the current jquery version so max-width never gets set here.

// compare width
	   width = $('.rmm').css('max-width');.

That returns ‘none’.

If you change it to width then it works.

// compare width
	   width = $('.rmm').css('width');

However I don;t know enough JS to know if that is the solution or not and I doubt you want a fixed width set anyway. :slight_smile:

1 Like

Thanks for the suggestion.

Yes I have remove this part and it works. But then the responsive menu got triggered on the desktop again. So I played around with if ($.support.leadingWhitespace) { part and swapped max-width with width and guess the problem is gone at least for now.

Thankyou all.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.