Mobile Nav Menu shinks before menuitem.click(e) can listen to event: Android Kitkat
Closed this issue · 14 comments
Working with a nav menu item that I've given a jquery click event. The click event doesn't get to happen because the menu's hide effect is getting triggered first and removing the menu.
Does that make sense?
Basically I'm trying to have the menu item trigger js instead of following a link but the menu runs off due to the gumby code instead. I forked and modified a sample. https://github.com/daveo1001/Gumby On android fire up the ui.html. hit the first menu icon, tap "Documentation", then tap "click this one". What you'll see in the menu shrinking back. What you should be expecting is an alert that says "hey, you did it!"
Nobody?
Hey,
This is all stems from our attempts to unify click and tap and seamlessly switch between the two events. Could you try removing e.preventDefault(); inside openLink in the navbar module.
but the plot has thickened. Let me do some more experimenting and I'll get back with you.
The alert pops up on the first level navigation without your change ( I really should have checked this sooner), which I can live with. It's only the nested navigation that doesn't seem to want to throw the alert (with or without your suggestion implemented).
oh, i also had to make sure and do .on('click tap') instead of just .click
I made an update to event delegation within the navbar module last week, can you confirm you are using the latest JS? Just to make sure we're on the same page.
Also, you can use Gumby.click for that exact purpose. You'll gain an extra 300ms in performance using tap if available, also this strategy allows touchscreen laptop users to click or tap.
Yup. Using that one.
oh, i don't think i knew about Gumby.click. I'll check that out.
first level nav items function flawlessly. nested items still not click/tapping on phone or in chrome's fancy new emulator. both work in regular chrome shrunk down to phone size.
oh, and once again, no change adding/removing the e.preventDefault() in the navbar js.
Hmm, ok I'm on this tonight. I'll keep you posted. This bug will be mine.
Hey, have you been using individual JS files or gumby.min.js? I ask because I have just noticed an issue with our Claymate build process and the changes in the individual JS modules weren't getting compiled down. This meant gumby.min.js was out of date.
Here's a JSBin with click/tap events bound to 3 nav items at various nesting levels. They are labelled Test One, Two and Three. I can see there is an error with nested items not obeying the gumby-persist attribute however before I look at fixing that I'd like to see how this works for you.
Thanks.
Individual JS files.
Had to add viewport meta to get the menu to show up on my Nexus 5 (/2).
But, all the tests worked. - Is there something wrong with me?
Closes the drawer afterwards on two and three. I'm not sure what one would be excepting but it felt a little weird to me. maybe it ought to close the whole menu or do nothing at all. or maybe not. I don't know.
So, in my previous tests I didn't have the Gumby.click inside of Gumby.ready... It was just hanging out at the end of the file all by itself.
Sticking it inside the Gumby.ready now fires the alert as expected and closes the menu entirely in first level and 2nd level menu items.
Ok great, glad it's working for the most part! You can add gumby-persist to the navbar to stop it from closing when items are clicked.