Answered Zurb foundation Wayfinder iPad iPhone issue

I apologize if this is a double post, but I think in the Wayfinder forum somebody could solve my problem.

The problem is that the menu from my site based on the Flexibility template which uses Zurb Foundation doesn't functions as it should in touch screens.

I described the problem here: https://forums.modx.com/thread/?thread=18379 page=4 starting with answer 37. I replaced "#" with "[[+wf.link]]"
The result you can see in my site: http://www.ceciliahandel.nl There you can see the extra field in the menu. Clicking on it directs to the correct page but in a touch screen the site freezes.

Hopefully you are able to help me.

Ad.

FWIW, your site's dropdowns work nicely on Android 4.0.4 touch screen. No freezing at all either. I tested it with Dolphin browser.

It also works on an iPad and iPhone but only if I touch the fields with names. What happens if you touch the empty field?

It would be nice to have a menu without the extra empty fields. I it is strange the examples in Zurb foundation docs navigation work normally and you are unable to achieve the same effect with Wayfinder. It depends on putting the class="flyout-toggle" in Wayfinder in a correct manner.

It functions but doesn't look nice, and I cannot stand it that I cannot find a solution.

I'm not seeing the empty field on Android. It couldn't be much more perfect there. Odd...

When I applied the class flyout-toggle I got an empty row under each sub-menu row like what shows on your site in Firefox. When I click on the empty row, it takes me to the page listed above the empty field.

So I've been playing with the menu and chunks, going through the Wayfinder docs and I think what we need here may be an innerRowTpl.



This works in a desktop browser just fine.
It's not working for a click on my kid's ipod, but the flyout-toggle class shows in the source. It also doesn't work on Android, but mine never did. What I need to know is how yours is set up in the other chunks and in your template. Your menu works in android, which means something's different between our sites, somewhere.

My site is still molasses slow, it's really ticking me off. xFPC works, but only after I run refreshCache, and there's no improvement for me working/viewing through the manager's browser. Cache is cleared upon save, and I gotta reload the whole site and WAIT just to see the result. It's like being on dial-up again!

my original rowTpl:


Have since changed rowTpl to:


I'm not sure exactly what the difference is between +wf.classes and +wf.classnames which is why I changed it (to see what it does, apparently not much??)

Sorry, I take most of that all back. The innerRowTpl does work to show the menus, but the links don't work. Have to work on that chunk some more obviously.

wf.classes adds the whole class="whatever" attribute, while wf.classnames only adds the whatever. This way if you are using the class attribute in your tpl you can use wf.classnames inside your class attribute to add the Wayfinder-generated classnames such as first, active or last to your own classnames.

Oh... well that makes sense. Thank you Susan. It'd be nice to be able to mark a response like this and associate it with the documentation. The way you wrote this clearly explains how and why.

More often than not, a reply like this contains the "ahh-ha" element, and then is lost amidst past posts. It's sad really, a lot of Bob's amazing on the fly snippets are out there in past threads.

Like some kind of citation system providing a link back to this post. hmmm...

I use browser bookmarks, the folder is "forum posts" under a MODx folder in my bookmarks.

I have one of those too. Filled with threads I know I will need someday.

I'm thinking it's a little selfish to keep them all for me though :~} Sharing is supposed to be good for you.

The documentation is still very obscure. Things like this could be added, but it would very soon become too lengthy. Citing informative forum posts in relation to specifics (words, parameters, etc.) would be nice and compact.