jQuery accordion menu with Wayfinder not working.

Eureka!

I have it working. I dumped the whole thing, database and all and started with a fresh install and pretty much duplicated everything I had done before with pretty much the same result.

After staring at this I knew it was some major fundamental thing I was missing. I was right and its a whopper. The big thing Kongondo is that you assume too much I am afraid. As in you assume too much from me...

I looked at the snippet call and the chunks I created. Here is the call:

In a flash it suddenly dawned on me that the chunks are being given custom names here: I was using your chunk names literally as you presented them. So I was naming my outerTpl chunk "outerTpl" instead of the designated name of "jqaccoutertpl". I failed to realize that we are using designated parameters that are part of Wayfinder I guess. (so far my Wayfinder calls have been pretty basic.)

I am now having a tough time wiping all this soggy egg off my burning face. I feel like I owe you an apology here for taking up some of your time.

I feel sort of stupid for making such a newbie mistake like this (I have been working with MODx for a while now), but this lesson has been a big positive learning experience.

I will contact you privately about the Wayfinder tutorials you are working on.

Thanks for all your help! Wish I could buy you a beer at least?

Max

PS: I now know why my mom has NO interest in touching a computer. "Life is too short for that kind of frustration..." she says. After my fumbling attempt at getting this Wayfinder menu to work I am beginning to think she is right...

This is what modx is all about - work it out and NEVER give up!!

Sure,

But it would be nice to be a little more efficient with my and other forum members’ time though

I have been looking into other jQuery menu systems. There are a lot of them. I like this one. Its pretty basic. There are others with more bells and whistles. From here its all about messing around with the CSS. That I can do.

But the segment of code samples presented by Kongondo is (for me) a very good way of presenting how to adapt a static menu tree list and make it work with Wayfinder. I just had to stare at it for a while and then some slow moving cranial chemicals began to stir. Some of the master sites for the bigger snippets present long lists of parameters and options: not always easy to digest what they actually do. I earn part of my living coding. But I am a very slow learner when it comes to some code though. But this was a great real working example and I have learned more about Wayfinder. I am sure this is all very basic to many folks here, but I am psyched with the possibilities this brings...

Max

Brilliant! I’m glad you got it working! Yes, you wasted my time...ha, kidding! No, you did not waste my time at all and you don’t owe me an apology. This post will help the next person. And, to make you feel better, at least you asked your questions in a constructive way - by stating the problem well and showing us what you had done to tackle it.

As for rookie mistakes, oh believe me they are committed even by the seasoned pros here...have a read through in the forums. Indeed I assumed that you knew there are no custom modx and WF chunks....you can name a chunk what you want, probably with some exceptions with regard to the characters you can use. I believe I mention this in my tuts too. I think you missed my post above where I said to check the spellings and names in your WF call but nonetheless am glad its now working.

Now, I have to start adding the tuts to the wiki so I will not be available here in the forums save for some short breaks.

cheers/k

Thanks!

There are a couple of things I want to look into, like should a container link have its own style? There is no real content, its just a container for the pages with actual content. And I would like to slow down the speed of the accordion when when the sub folders collapse. That should be a jQuery issue. Then comes styling the whole system.

I think I am going to use this as the sidebar navigation for a pro-bono site redesign for a South African school children literacy organization. I did the previous static site for the center’s one location. Media attention for this volunteer effort (all non profit), fund raising and the web site (so I am told) has resulted in the center’s expansion to more locations: helping more kids who are struggling with reading. The goal is to create 20-50 volunteers centers in the southern part of South Africa.

I will need to configure Ditto, login systems and Manager Users as several people will be contributing content as this organization expands. I am sure I will need some pointers with some of that. Right now I am doing the basic design and prepping the images etc.

Max

This becomes a CSS question...

I would like to add a drop shadow to the top of the open accordion. In the resting state the menu list is closed. The menu consisits of single links and containers for sub menus. The sub menu list is opened with the jQuery accordion effect. This is where I want the shadow to appear, making the sub list appear like its slightly below the container links. The pics below will explain this better.

I am messing around trying to figure out where and how to add the background shadow file. I added this: and I also tried adding this:

Neither will display the shadow. Adding the anchor element "a" does display the shadow but it displays the shadow to all the <li>’s in the sub nav: (See the second image file)

Any ideas on how to fix this? I want the shadow to appear like it does in the second image below, but ONLY once above the top sub link? in  The other way I guess is to give up doing it directly in the CSS file and instead adding the style in the jQuery script.

Thanks!

Here is all of the CSS: