Accordion_menu_with_Wayfinder_using_JQuery problem.

iam following http://wiki.modxcms.com/index.php/Accordion_menu_with_Wayfinder_using_JQuery

i have created all the chunks and uploaded the js files to server and updated my template... but nothin is showing... what do i do wrong..?

I feel your pain!

I am in the same boat: trying to get a "simple" jQuery accordion menu to work with Wayfinder. I am not using the Dynamic Drive sample you refer to though. My menu appears on the page but the accordion does not work. See: http://modxcms.com/forums/index.php/topic,33496.msg203716/topicseen.html#msg203716

I would check your link paths to the JS files and make sure you are are not using single quotes instead of the required back-tics "`" in the Wayfinder snippet call. I would also post the relevant code that controls the menu. It really helps others figure out your problem.

Wayfinder is an awesome snippet but I find its really complicated once you move beyond the basic call.  Accordion menus need five Chuncks to be created correctly and then added properly into the snippet call in your template/page. And the CSS has to work with all of this perfectly. jQuery accordion menus are becoming all the rage and I sense this question will become a familiar topic on this forum. I pray for someone to write a good tutorial.

I have not arrived at a positive result yet and my brian feels like a bloody bludgeoned pulp after all the hours I have spent messing with this. The scary thought is that there are also various JS/jQuery library incompatibilities to consider. Not to mention that once you are done there are all the versions of Internet Explorer cranky gotchas waiting to mess with your head some more...

Not that I am fed up or anything...

Good luck!

Max

Thanks for sharing Photowebmax....

here is what i tried with from the wiki..step by step....

i have this two js files in my template head.


chunks:

outerTpl


innerTpl



wfStyle
_{<style type="text/css">
.accordion-menu {
width:160px;
font:11px "Verdana";
}
.accordion-menu a.menuitem{
background:#e5e5e5;
font:bold 11px "Verdana";
display:block;
width:auto;
padding:3px 0 3px 5px;
border-top:2px solid #FFFFFF;
}
.accordion-menu li{
list-style-type:none;
}
.accordion-menu a.menuitem:visited, .accordion-menu .menuitem:active{
color:#cc3300;
}
.accordion-menu a.menuitem:hover{
background:#d8d8d8;
}
.accordion-menu ul.submenu{
width:auto;
list-style-type:none;
}
.accordion-menu ul.submenu li{
text-indent:5px;
background:#d3d3d3;
display:block;
width:auto;
}
.accordion-menu ul.submenu li a{
text-indent:5px;
background:#d3d3d3;
display:block;
width:auto;
padding:3px 0 3px 5px;
border-top:2px solid #FFFFFF;
}
.accordion-menu ul.submenu li a:hover{
background-color:#c0bfbf;
}
.activemenu{
background:#665f6e url("../images/icons/menu-bg.gif") no-repeat right;
color:#FFFFFF;
font:bold 11px "Verdana";
display:block;
width:auto;
padding:3px 0 3px 5px;
border-top:2px solid #FFFFFF;
}
.accordion-menu ul.submenu li a.activemenu{
background:#8d8793 url("../images/icons/submenu-bg.gif") no-repeat right;
color:#FFFFFF;
font:11px "Verdana";
display:block;
width:auto;
padding:3px 0 3px 5px;
border-top:2px solid #FFFFFF;
text-indent:5px;
}
#active-submenuheader{
background:#665f6e;
color:#FFFFFF;
font:bold 11px "Verdana";
display:block;
width:auto;
padding:3px 0 3px 5px;
border-top:2px solid #FFFFFF;
}
</style>}


wfJs ^{<script type="text/javascript">
ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it’s collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "", ""], //Additional HTML added to the header when it’s collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>}


wfOuter

wfRow



wfParentRow


wfInner


wfInnerRow


wfActiveParentRow


wfHere


and i have this in my template file:


anybody see what iam missing..?

I’ve not used the wiki example but I had a few problems with conflicts between the mootools which is used for the quick edit and jquery.

Log out of manager and then try the page.

Also have you viewed the source of the page to see what HTML wayfinder is generating. You may be able to then spot any html that doesn’t look right.

If you don’t notice anything post the HTML here and i’ll have a look.

Ben

Benny just beat me to this.

* Do you have any kind of wrapping id or class around the menu?
* You can try deactivating the QuickEdit Plugin (for now) to eliminate that as a possible issue.
* You have created pages and container documents for the menu list itself right? (sorry had to ask)
* Yes, check the code output the page generates in your browser and see if there are signs of the menu there.
* Outside of the Wayfinder call how is the page code doing validation wise?

I created a very simple test project just to figure out how to get a jQuery menu working with Wayfinder. Today will be day three of the battle. Right now I feel like Don Quixote with my helmet on backwards...

Max

I don’t know which menu you are trying to configure but I was pulling my hair out trying to config a DHTMLGoodies menu a while back. Since, I’ve switched to using the jQuery Treeview for basically everything I do. It was amazingly easy to change the CSS to be completely non-folder-tree looking, it works in every browser (even IE6) and requires only 4 chunks!

http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

My advice if you want to keep using your current menu is to check the html output too! What helped me a lot is to unlink the style sheet to just see the raw Wayfinder output and work from there... If you have multiple levels like I did, using the categories template will help you a lot too.

iam still working on this menu...http://wiki.modxcms.com/index.php/Accordion_menu_with_Wayfinder_using_JQuery


is it hard to make this menu having 3rd level..?

You’ll have to program the 3rd level in yourself.

Trust me, it’s much easier to use jQuery Treeview. Download it and play with it for 10 mins. and you’ll know what I mean.