Top navigation menu on iPhone won't stay open

[elorac]

I found a problem on the Prestashop front office demo (and in the default-bootstrap theme included) on an iPhone (I'm using a 5 with iOS7), tapping the categories menu opens and closes it immediately on a single tap.

 

http://demo.prestashop.com/en/?view=front

 

On a tap, the categories menu should stay open and on another tap, it should close.  But the behavior is, on one tap, it will open and close immediately.  The weird thing is, if you tap and hold for a bit, it stays open, but then the iPhone select menus pop up too.  Obviously, this is not intended and makes it almost impossible to navigate on an iPhone.  Seems to work fine on any computer though (so don't just use the mobile view option on a pc and claim that it works, because it will work correctly in a pc browser, but not on an actual iPhone).  I am not sure the behavior of it on an Android or other smartphones, I haven't tested that.

 

If I figure it out myself, I'll post a solution, but I'm sure someone else must have run into this before.  I can't imagine this unintended behavior would go unnoticed in a responsive theme for very long.

 

Thanks

Edited July 6, 2014 by elorac (see edit history)

[vekia]

hello

please vote here:

http://forge.prestashop.com/browse/PSCSX-2607

[elorac]

hello

please vote here:

http://forge.prestashop.com/browse/PSCSX-2607

 

Thanks vekia, I voted.  I'm sure this will eventually get into a minor release candidate, it's too much of a store-killer not to.  With more people using mobile devices for shopping/browsing these days, it's hard to understand how this one got missed by the development team.

 

Unless there is a workaround for this bug, we cannot launch our site.  We simply will have too many people using smartphones and we cannot afford to lose that business.  If anyone knows of a workaround fix for this in the meantime, please reply with it.  I'm thinking it has something to do with hoverintent but there's so much code I'm not sure where to begin.

 

Thanks

[elorac]

I fixed it looks like.  On or near line 83 of /modules/blocktopmenu/js/blocktopmenu.js (or the one in your corresponding theme directory if you made custom changes) you need to add a return false call to prevent it from firing twice.

 

Change this:

	mCategoryGrover.on('click touchstart', function(){
		$(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('1');
	});

To this:

	mCategoryGrover.on('click touchstart', function(){
		$(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('1');
		return false; // Add this to prevent double firing of click and touchstart events
	});

I also found another spot in the same file around line 122 that needs another return false.  It fixes the subcategories problem I think.  See the Add comment in the code below where to add it.

	$('#block_top_menu > ul:first > li > a').on('click touchstart', function(e){
		if ($(this).parent('li').find('ul').length)
		{
			e.preventDefault();
			var mobCatSubUl = $(this).next('.menu-mobile');
			var mobMenuGrover = $(this).next('.menu-mobile-grover');
			if (mobCatSubUl.is(':hidden'))
			{
				mobCatSubUl.slideDown();
				mobMenuGrover.addClass('active');
			}
			else
			{
				mobCatSubUl.slideUp();
				mobMenuGrover.removeClass('active');
			}
			return false; // Add to prevent double firing
		}
	});

Edited July 8, 2014 by elorac (see edit history)

[Teapot Creative]

Hi

 

Made changes and fix is working.. great job.

 

 

Kind regards

Nick

Edited July 7, 2014 by Teapot Creative (see edit history)

[abdulk]

elorac, you are a lifesaver! Your solution fixed this bug for me!

 

Can anyone confirm if the issue is indeed persisting for Android devices? I don't have one to test.

[vixensjlin]

I did.  This bug is there at least in original 1.6.0.8 with default theme, on a Android 4.2.1 device.

[framarfre]

 

I fixed it looks like.  On or near line 83 of /modules/blocktopmenu/js/blocktopmenu.js (or the one in your corresponding theme directory if you made custom changes) you need to add a return false call to prevent it from firing twice.

 

Change this:

	mCategoryGrover.on('click touchstart', function(){
		$(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('1');
	});

To this:

	mCategoryGrover.on('click touchstart', function(){
		$(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('1');
		return false; // Add this to prevent double firing of click and touchstart events
	});

I also found another spot in the same file around line 122 that needs another return false.  It fixes the subcategories problem I think.  See the Add comment in the code below where to add it.

	$('#block_top_menu > ul:first > li > a').on('click touchstart', function(e){
		if ($(this).parent('li').find('ul').length)
		{
			e.preventDefault();
			var mobCatSubUl = $(this).next('.menu-mobile');
			var mobMenuGrover = $(this).next('.menu-mobile-grover');
			if (mobCatSubUl.is(':hidden'))
			{
				mobCatSubUl.slideDown();
				mobMenuGrover.addClass('active');
			}
			else
			{
				mobCatSubUl.slideUp();
				mobMenuGrover.removeClass('active');
			}
			return false; // Add to prevent double firing
		}
	});

Thanks elorac you save my life 

 

elorac, you are a lifesaver! Your solution fixed this bug for me!

 

Can anyone confirm if the issue is indeed persisting for Android devices? I don't have one to test.

I've tested on iPhone, iPad and Galaxy S2 without any problem!

[HIB]

I have tried to make the suggested changes, but the topmenu is completely dead on my Samsung Galaxy.?

 

I dont know if it works on other Smartphones, please help ? 

[vekia]

I have tried to make the suggested changes, but the topmenu is completely dead on my Samsung Galaxy.?

 

I dont know if it works on other Smartphones, please help ? 

 

 

please share:

1) url to your shop

2) exact version of prestashop that you currently use there

3) block top menu module version

[HIB]

www.piercingkongen.dk

Prestashop 1.6.0.9

Block top menu 2.1.1.

[HIB]

Hi Vekia, 

I found the solution for my non-responsive topmenu. 

Now my only problem is the position of the menu (I think), as on mobiles the (+) for the catogories are not centered.

I hope you can help, thanks.