jQuery accordion menu with Wayfinder not working.

1,161 Posts

Photowebmax Reply #1, 17 years, 7 months ago

I am covering ground previously covered in these two threads:
http://modxcms.com/forums/index.php/topic,26113.0.html
http://modxcms.com/forums/index.php/topic,27629.0.html

But I can’t get it to work. Both threads follow this accordion menu example that uses jQuery:
http://www.i-marco.nl/weblog/archive/2008/05/08/simple_jquery_accordion_menu__#body

I can make it work and fiddle with it on a static page. Getting it to work in MODx with Wayfinder eludes me. I installed a clean MODx install and used the beginners wiki template as a starter. The main CSS works fine. The accordion will not. In fact the menu script is triggering a display: none style for the entire menu???

Here is the menu JS:

function initMenus() {
	$('ul.menu ul').hide();
	$.each($('ul.menu'), function(){
		$('#' + this.id + '.expandfirst ul:first').show();
	});
	$('ul.menu li a').click(
		function() {
			var checkElement = $(this).next();
			var parent = this.parentNode.parentNode.id;

			if($('#' + parent).hasClass('noaccordion')) {
				$(this).next().slideToggle('normal');
				return false;
			}
			if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
				if($('#' + parent).hasClass('collapsible')) {
					$('#' + parent + ' ul:visible').slideUp('normal');
				}
				return false;
			}
			if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
				$('#' + parent + ' ul:visible').slideUp('normal');
				checkElement.slideDown('normal');
				return false;
			}
		}
	);
}
$(document).ready(function() {initMenus();});

That very first $(’ul.menu ul’).hide(); is making the entire menu disappear? If I remove the .hide the menu appears. This is not an issue on the static page. Why is this happening?

Here is my Wayfinder call:

[[Wayfinder? &startId=`0` &level=`2`&outerTpl=`outerTpl`&rowTpl=`rowTpl`&innerTpl=`innerTpl` &innerRowTpl=`innerRowTpl`&parentTpl=`parentTpl`]]

I am adding the JS below the CSS link in the head:

<!-- Include jQuery Library -->
<script type="text/javascript" src="assets/templates/tutorial/js/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="assets/templates/tutorial/js/menu.js"></script>

These are the Wayfinder chunks:
outerTpl

<ul id="menu" class="menu noaccordion">
	[+wf.wrapper+]
</ul>

innerRowTpl

 <li [+wf.classes+]><a href="[+wf.link+]">[+wf.linktext+]</a>
	[+wf.wrapper+] 
</li>

innerTpl

[+wf.wrapper+]

parentTpl

<li [+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
<ul id="doc_[+wf.docid+]" class="noaccordion">[+wf.wrapper+] 
</ul>
</li>

rowTpl

<li [+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
[+wf.wrapper+]</li>

I am not sure where to go from here???

Thanks!

Max

1,161 Posts

Photowebmax Reply #2, 17 years, 7 months ago

OK, I think I found one thing...

I compared the output from the static example with the MODx output. I had a div:

<ul id="menu3" class="menu noaccordion"> <!-- vertical menu – it's all done with the CSS -->

in my template and then the long Wayfinder snippet call. The output indicates that this div is sort of being duplicated. I removed the div and kept the snippet call. The menu now appears even with the .hide present at the start of the menu JS. Removing that div stops the nav links from working though. They are there but clicking on them does nothing. Sort of a catch-22 here.

The other obvious thing is that my nav output on the MODx page is all <li>’s. The container documents that binds the sub documents should be <ul>’s? I guess the next step is to figure out if this is caused by the Wayfinder snippet call or with the way the nav CSS is configured?

1,390 Posts

kongondo Reply #3, 17 years, 7 months ago

Max,

I got the jQuery accordion menu to work. I did not use the wiki version. I used the demo files from Marco’s (the developer) website. Before I explain how I did it, a few pointers:

1. Maybe it’s a typo but you have parentTpl; this is not a WF parameter. Maybe you meant parentRowTpl ?

2. In addition, the parent tpl chunk you have has an id. Assuming you meant parentRowTpl, the problem with this is that since the menu will have more than one document that is a parent, this id will be repeated several times for all parent documents. This I’m sure you know is incorrect xhtml-wise, maybe even confuse the js? If you need unique ids for your row items use the parameter &rowIdPrefix

OK, I don’t know how your menu looks like but I made one using the sample content that comes with modx

Step by step instructions:

1. Creating the template

I created a simple template in modx and stripped it off all stuff I didn’t need such as references to the other js libraries. My template looks like follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>[(site_name)] | [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<base href="[(site_url)]"></base>
<link rel="stylesheet" href="assets/js/style.css" type="text/css" media="screen" />
<script src="assets/js/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/js/menu.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
[[Wayfinder? &startId=`0` &level=`2` &outerTpl=`jqaccoutertpl` &innerTpl=`jqaccinnertpl` &rowTpl=`jqaccrowtpl`]]
<h2>[*longtitle*]</h2>
[*content*]
</div><!-- end wrapper -->
</body>
</html>

2. Deciding what chunks to use

~~I only tested the first menu - the standard accordion~~. I tested with all the classes i.e. expandfirst, noaccordion and collapsible and they work a treat!

The source code from Marco’s demo looks like follows (snipped & with my comments about the chunks needed):

<ul id="menu1" class="menu"> <!-- outerTpl chunk-->
		<li> <!--  part of rowTpl chunk-->
			<a href="#">Weblog Tools</a>

			<ul> <!-- innerTpl chunk: I will need this so that outerTpl will not be reused here to avoid the id="menu1" being repeated here-->
				<li><a href="http://www.pivotx.net/">PivotX</a></li> <!-- innerRowTpl chunk: I don't need this so WF will use rowTpl to create inner level rows -->
				<li><a href="http://www.wordpress.org/">WordPress</a></li>
				<li><a href="http://www.textpattern.com/">Textpattern</a></li>
				<li><a href="http://typosphere.org/">Typo</a></li>
			</ul>
		</li>

3. Creating the chunks for WF

I only needed 3 chunks - outerTpl; rowTpl; innerTpl (if you don’t define an innerTpl WF will use the outerTpl where innerTpl should be used)

a. outerTpl

<ul id="menu1" class="menu">
	[+wf.wrapper+]
</ul>

b. rowTpl (some of the placeholders may actually not be needed)

<li[+wf.classes+]>
	<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a>
	[+wf.wrapper+]
</li>

c. innerTpl (classes placeholder may actually not be needed depending on how you want to style your menu)

<ul[+wf.classes+]>
	[+wf.wrapper+]
</ul>

4. WF Snippet call

[[Wayfinder? &startId=`0` &level=`2` &outerTpl=`jqaccoutertpl` &innerTpl=`jqaccinnertpl` &rowTpl=`jqaccrowtpl`]]

5. Location of files (jquery; style.css; and menu.js)

See html source above

6. Other stuff

The menu items without children, e.g. home when clicked will open that particular page, e.g. the home page in this case

The parent menu items with children will slide open as an accordion when clicked

7. Screenshots

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

1,161 Posts

Photowebmax Reply #4, 17 years, 7 months ago

Wow, thanks for the thorough procedure. Seeing how you determined how to brake up the menu elements into the chunks is very useful.

But it still eludes me.

At first I tried your Wayfinder call and the three chunks. The menu is not getting styled and there seems to be no JS activating the menu.

I then tried creating a fresh template and chunks exactly like you did. I even put the css file and the two jQuery files in the assets/js folder like you did. I then made your template example the default and there is still no styling or js present in the menu.

This is what I see: see png file below.

I am using the basic CSS from the example. But yesterday I at least had the menu styled (but no accordion). Now I am not getting the style or the accordion.

Here are my links in the template:
<link rel="stylesheet" href="assets/js/style.css" type="text/css" media="screen" />
<script src="assets/js/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/js/menu.js" type="text/javascript"></script>

If I go back to the template I made yesterday the rest of the page will render the layout and body CSS just fine but the menu has zilch???

Need more coffee...

Max

1,161 Posts

Photowebmax Reply #5, 17 years, 7 months ago

Here is the code that the template is producing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Tutorial Site | Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<base href="http://localhost:8888/TutorialONE/"></base>
<link rel="stylesheet" href="assets/js/style.css" type="text/css" media="screen" />
<script src="assets/js/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/js/menu.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<ul><li class="active"><a href="http://localhost:8888/TutorialONE/" title="Home" >Home</a></li>
<li><a href="/TutorialONE/index.php?id=2" title="Design" >Design</a></li>
<li><a href="/TutorialONE/index.php?id=3" title="Contact" >Contact</a></li>
<li><a href="/TutorialONE/index.php?id=4" title="Fruit" >Fruit</a><ul><li><a href="/TutorialONE/index.php?id=5" title="Apples" >Apples</a></li>
<li><a href="/TutorialONE/index.php?id=6" title="Oranges" >Oranges</a></li>
<li class="last"><a href="/TutorialONE/index.php?id=7" title="Lemons" >Lemons</a></li>
</ul></li>
<li class="last"><a href="/TutorialONE/index.php?id=8" title="Vegetables" >Vegetables</a><ul><li><a href="/TutorialONE/index.php?id=9" title="Squash" >Squash</a></li>
<li class="last"><a href="/TutorialONE/index.php?id=11" title="Pumpkin" >Pumpkin</a></li>
</ul></li>
</ul>
<h2>Welcome to the MODx Content Management System</h2>
<p>This is content. Not much, but its a start...</p>
</div><!-- end wrapper -->
</body>
</html>

It looks OK to me and it validates...

Edit:

I compared the code of the static example and the code that this template is producing and the template menu is adding "active" and "last" classes to several of the <ul> and <li> elements? There are not such classes in the CSS file that the template refers to???

I also added a #wrapper style to the css file and made it yellow with a set width. The page then adds that styling just fine so the page is connecting with the CSS file. Here is all the CSS:

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.9em;
}

#wrapper{
	background-color:yellow;
	width:900px;
	margin:0 auto;
}
p {
  line-height: 1.5em;
}

ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 15em;
}

ul.menu a {
  display: block;
  text-decoration: none;	
}

ul.menu li {
  margin-top: 1px;
}

ul.menu li a {
  background: #333;
  color: #fff;	
  padding: 0.5em;
}

ul.menu li a:hover {
  background: #000;
}

ul.menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}

1,390 Posts

kongondo Reply #6, 17 years, 7 months ago

Am kinda stumped here...short of refreshing your browser, this statement you make

I then made your template example the default

makes me wonder whether that is where the problem lies. What do you mean you made the template the default? Whilst the template may be the default, if the documents in your menu are using a different template, then the js or css will not be applied to your menu. Could this be the problem?

EDIT:

ok, I hadn’t read your edit above.

Another thing, I disabled quick edit to avoid conflicts with other js libraries.

cheers
k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

1,161 Posts

Photowebmax Reply #7, 17 years, 7 months ago

I used your template example and made it the default template in the Tools Configuration page.

My code is not producing the <ul id="menu1" class="menu"> that is in the outerTpl. It simply does not show. And the "active" and "last" classes are being added to the list somehow. Does Wayfinder do this automatically. I am looking for clues on this and have not found much.

What does you browser rendered code look like? I bet you are not getting those classes?

I also have QuickEdit disabled.

I really appreciate your help here.

Max

Stopped with the coffee - now considering beer with lunch...

1,390 Posts

kongondo Reply #8, 17 years, 7 months ago

Quote from: Photowebmax at Feb 28, 2009, 01:54 PM

I used your template example and made it the default template in the Tools Configuration page.
My code is not producing the <ul id="menu1" class="menu"> that is in the outerTpl. It simply does not show.

Seems then there is a problem with your Wayfinder call. Confirm it has the correct parameters and values. Check also the spellings and cases.

And the "active" and "last" classes are being added to the list somehow. Does Wayfinder do this automatically. I am looking for clues on this and have not found much.

Yes they are;

"active" is the default value for the parameter &hereClass
"last" is the default value for the parameter &lastClass

Its all here: http://www.muddydogpaws.com/development/wayfinder/parameters.html

What does you browser rendered code look like? I bet you are not getting those classes?

Yes I am getting those classes. If you don’t want them you can add this to your WF call

&hereClass=`` &lastClass=``

My generated code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My MODx Site | Testing Jquery Accordion Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<base href="http://localhost/modx-0.9.6.3/"></base>
<link rel="stylesheet" href="assets/js/style.css" type="text/css" media="screen" />
<script src="assets/js/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/js/menu.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<ul id="menu1" class="menu collapsible">
<li>
<a href="http://localhost/modx-0.9.6.3/" title="Home" >Home</a>
</li>
<li>
<a href="/modx-0.9.6.3/index.php?id=2" title="Blog" >Blog</a>
</li>
<li>
<a href="/modx-0.9.6.3/index.php?id=15" title="MODx Features" >Features</a>
<ul>
<li>
<a href="/modx-0.9.6.3/index.php?id=16" title="Ajax" >Ajax</a>
</li>
<li>
<a href="/modx-0.9.6.3/index.php?id=22" title="Menus and Lists" >Menus and Lists</a>
</li>
<li>
<a href="/modx-0.9.6.3/index.php?id=14" title="Content Management" >Manage Content</a>
</li>
<li class="last">
<a href="/modx-0.9.6.3/index.php?id=24" title="Extendable by design" >Extendability</a>
</li>
</ul>
</li>
<li>
<a href="/modx-0.9.6.3/index.php?id=33" title="Getting Help" >Getting Help</a>
</li>
<li>
<a href="/modx-0.9.6.3/index.php?id=39" title="Template Examples" >Templates</a>
<ul>
<li>
<a href="index.php?id=39" title="MODxHost" >MODxHost</a>
</li>
<li>
<a href="/modx-0.9.6.3/index.php?id=42" title="MODxCSS Wide" >MODxCSS Wide</a>
</li>
<li class="last">
<a href="/modx-0.9.6.3/index.php?id=43" title="MODxCSS" >MODxCSS</a>
</li>
</ul>
</li>
<li>
<a href="/modx-0.9.6.3/index.php?id=32" title="Design" >Design</a>
</li>
<li>
<a href="/modx-0.9.6.3/index.php?id=6" title="Contact Us" >Contact us</a>
</li>
<li class="last active">
<a href="/modx-0.9.6.3/index.php?id=47" title="Testing Jquery Accordion Menu" >Testing Jquery Accordion Menu</a>
</li>
</ul>
<h2>Testing Jquery Accordion Menu</h2>
<p>As you can see, the menu works!</p>
</div><!-- end wrapper -->
</body>
</html>

cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

1,161 Posts

Photowebmax Reply #9, 17 years, 7 months ago

Read the bottom few posts on this thread:http://modxcms.com/forums/index.php/topic,27629.0.html

It might be the same issue I have. I wish this guy had been more forthcoming with the specific issues and fixes though. It would have been helpful for others to see the actual conclusion to the problem.

What I can’t figure out is why none of the CSS and the JS is working on my example when I am using the exact same template, snippet call and chunks you are????????

Max

Now confirmed: beer with lunch is a definite go

1,161 Posts

Photowebmax Reply #10, 17 years, 7 months ago

This is my snippet call:
[[Wayfinder? &startId=`0` &level=`2` &outerTpl=`jqaccoutertpl` &innerTpl=`jqaccinnertpl` &rowTpl=`jqaccrowtpl`]]

To disable Quick Edit all I did is go to the Resources>Plugins>QuickEdit and check the Plugin Disabled box.

I have to go. I have decided to eat lunch (out with a friend) with my hands as I fear I would stab myself in the eye if I held a fork at this stage...