[SOLVED] A Wayfinder Question

160 Posts

hald Reply #1, 18 years, 3 months ago

Thanks to spacefish, I found a nice jquery accordion menu at Marco’s site http://www.i-marco.nl/weblog/archive/2008/05/08/simple_jquery_accordion_menu__#body
I built a simple page to test it and while the menu will expand and collapse OK, it will not go to the href for the page on a menu item click - nada.
If I disable the &outer= parameter in the Wayfinder call and just use the basic call of;

[[Wayfinder? &startId=`0` &level=`2` !]

this is what i see with firebug;

 <li class="active">
<a title="Images" href="/index.php?id=48">Image gallery</a>
</li>

when i enable the call to use jquery in the &outerTpl this is what I get;

<li>
<a title="About" href="/index.php?id=50">About</a>
</li>

The outerTpl is:

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

The Wayfinder call I am using is;

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

It makes no difference if I use my &rowTpl or let it use the default.

So the li menu item never goes to class="active" Why is the question.
Thanks, if you can shed any light on this.
HalD

"Today’s headlines are nothing more than whispers of history"

4,205 Posts

dev_cw Reply #2, 18 years, 3 months ago

You need to add the classes placeholder in your tpl.

[+wf.classes+] - where classes specifed will be inserted (includes class=" ")
[+wf.classnames+] - outputs the just the class names (without class=" ")

So the tpl would be like this (an example from the docs):

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

Check out this site for full set of available parameters:
http://www.muddydogpaws.com/development/wayfinder/parameters.html

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

160 Posts

hald Reply #3, 18 years, 3 months ago

dev_cw; Thanks for looking at my problem, I have had the wayfinder templating and parameters printed out and in front of me for the past week and still cannot make this work. spacefish in post http://modxcms.com/forums/index.php/topic,26113.msg163542.html#msg163542 provides some suggested wayfinder templates. they didn’t work for me. The default outerTpl will not work in this instance. The form of the html markup below is required to work with this implementation of a jquery accordion menu. This is a sample of the form it must take. All of this format is required and must be created somehow by Wayfinder ;

<ul id="menu3" class="menu [option]">
	<li><a href="#">Some Title Here</a>
	<ul>
		<li><a href="http://www.pivotx.net/">PivotX</a></li>
		<li><a href="http://www.word.org/">Word</a></li>
		<li><a href="http://www.text.com/">Text</a></li>
		<li><a href="http://typo.org/">Typo</a></li>
		</ul>
	</li>
..
..
and so on.

The outerTpl must contain;

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

or the accordion simply will not work. With the Wayfinder call as follows;

[!Wayfinder? &startId=`0` &level=`2`&outerTpl=`outerTpl` !]

the menu displays correctly and opens and closes as it should - but it will not respond to mouse clicks. I can right click on a menu item and pull up the page in a new window, so the href is there. Jquery-1.2.6.js is the only javascript called in the template so there is no conflict with other .js. I have to figure out how to construct a rowTpl that will work with this html. BTW, I can take the sample markup and insert it in the template and it works perfectly. Since I don’t call any other templates in wayfinder, the others are the defaults. HalD

"Today’s headlines are nothing more than whispers of history"

4,205 Posts

dev_cw Reply #4, 18 years, 3 months ago

Not sure if this will help, but the problem could be that you have an outerTpl but no innerTpl.

description: The innerTpl template is used as a wrapper for each submenu. If no innerTpl is specified the outerTpl is used in its place. Each item processed in the submenu will be inserted into the placeholder [+wf.wrapper+].

In other words, when you set a custom outerTpl you need to set an innerTpl or else it will want to use the outerTpl for the inner.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

160 Posts

hald Reply #5, 18 years, 3 months ago

dev_cw; Yes what you said is true - but looking at the template schema, the next thing inward from &outerTpl is &rowTpl and I think that is where my problem lies. The default &innerTpl is working ok as the secondary menu items pop down when the outer is clicked. I think finding a way to template: <a href="#">Weblog Tools</a> in &rowTpl is the key to solving my problem as # passes the click state to the javascript menu.js.
Thanks again.
HalD

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();});

"Today’s headlines are nothing more than whispers of history"

160 Posts

hald Reply #6, 18 years, 3 months ago

sample screenshots of closed and open accordion.

"Today’s headlines are nothing more than whispers of history"

160 Posts

hald Reply #7, 18 years, 3 months ago

Not quite solved but almost! It’s not the Wayfinder templating that is the problem, it’s the css. The correct divs and classes are not called-out corectly in the style sheet. Working on getting the proper styles.
Cheers,
Hald

"Today’s headlines are nothing more than whispers of history"

160 Posts

hald Reply #8, 18 years, 3 months ago

The jQuery accordion menu now works. It was a combination of several factors that kept it from working. 1. the css styling the menu selectors was messed up, 2. not all the wayfinder row templates worked correctly in the wayfinder call. I changed the name of several selectors in the css and Bing! the menu started to work. I learned several lessons out of this; NEVER trust Firefox to show changes you just made to the CSS or the HTML! It will keep using the cache, (even if you pound away on F5), while you keep making changes and get no results. Opera is worse. To see changes immediately, i use Safari. What was the other thing? Oh yeah - make sure the files you are working on are for the template selected in the manager configuration.
thanks,
HalD

"Today’s headlines are nothing more than whispers of history"