0

I am using WordPress to build this site: www.heartofglass.gg I've installed the twi carousel plugin for my shop, but this is causing a conflict with the mobile menu. When i remove the plugin the menu works fine but i would like to be able to use the plugin.

UPDATE: I think there may be 2 issues here: 1. The menu collapsing immediately in some browsers (Chrome, IE) 2. The menu items need to be 'double tapped' from ios devices (one tap collapses the menu, double tap follows link correctly).

The problem is that when opened in some devices (mostly ios) the mobile menu opens then instantly collapses. This is also true when viewed in a small window size from a laptop (Tested on windows and mac with Chrome and IE) On a laptop the menu will stay open only if the mouse is depressed for a second. The menu will then open on the button release and remains open.

Note: it works correctly on Safari on macbook but on my iPhone 5c, the menu opens but links only work with a double tap.

In the developer console on Chrome when i click the on the menu I get the following error:

Uncaught TypeError: Cannot read property 'trigger' of undefined at frameworks.min.js?ver=4.8.1:9

Also: Could it be something to do with 'hover' function? I've read that the 'double tap' issue is common on ios devices.

Further to this: In Chrome developer window; if i remove the frameworks.min.js event listener for pointerup and touchend the menu stays open (only tried on desktop)...I don't know if this is of any relevance.

I'd appreciate any help resolving this as I've setup my shop front using the plugin and like it's functionality, but apparently, I need the menu to work across devices.

Thanks in advance

31.8.17: still no solution for this, any help appreciated

user1126789
  • 31
  • 5
  • 1
    It works fine for me, using the responsive mode in Firefox. Also, your post isn't very clear. Try explaining what you expect to happen compared to what is actually happening, and detail anything you've done to try and resolve this. Also, if you have additional info, its considered better practice to update your question rather than add info in comments. – Phill Healey Aug 29 '17 at 21:21
  • Thanks Phill I will edit to make clearer. – user1126789 Aug 29 '17 at 21:44
  • Thank you for your help. I've added more info so hopefully this makes the problem i'm experiencing clearer. – user1126789 Aug 31 '17 at 07:49
  • Why don't you install some free plugins. – Anthony Carbon Oct 16 '17 at 10:53

1 Answers1

0

The reason it is collapsing quickly is because of event propagation, try to find the event listener of the menu toggle in the plugins code and put event.stopPropagation(); make sure the parameter event is present

UPDATED:

this piece of code here found in modules.min.js though it's a minified version is causing you trouble

b.on("tap click", function(a) {
  a.stopPropagation(),
  a.preventDefault(),
  c.is(":visible") ? c.slideUp(e) : c.slideDown(e)
})

The reason why is because you made a event listener of 2 events, which both executes when doing the click which will make your menu show then hide to prevent this just use 1 event which is click (click also works on mobile) OR use tap event when user is using a mobile device and click on non mobile device detecting a mobile browser.

masterpreenz
  • 2,280
  • 1
  • 13
  • 21