solved - &displayStart class when viewing children

69 Posts

markhurd Reply #1, 17 years, 6 months ago

I would like to apply a class to my startItem but ONLY when it is selected. Right now I can either set the class when it/any children are active, or nothing at all. I’m sure there’s an easy way around this but I haven’t stumbled on it yet.

I’ve tried setting both &hereClass and &selfClass with the same results. When viewing the parent page, it works great! But any children page set the "active" class both on themselves and the parent - I just want it on the child.

Desired Output

<!-- class "active" should be applied to one and ONLY one <li> at a time -->
<ul id="secondary-nav">
  <li><a href="#">Parent</a></li> <!-- id of 2 -->
  <li><a href="#">Child 1</a></li>
  <li class="active"><a href="#">Child 2</a></li>
  <li><a href="#">Child 3</a></li>
</ul><!-- /#secondary-nav -->

Actual Output

<ul id="secondary-nav">
  <li class="active"><a href="#">Parent</a></li> <!-- get the "active" class off of me! -->
  <li><a href="#">Child 1</a></li>
  <li class="active"><a href="#">Child 2</a></li>
  <li><a href="#">Child 3</a></li>
</ul><!-- /#secondary-nav -->

Wayfinder Call

[!Wayfinder? &displayStart=`true` &startId=`2` &selfClass=`active` &startItemTpl=`nav_startItemTpl` &outerTpl=`nav_outerTpl` &rowTpl=`nav_rowTpl` !]

nav_startItemTpl

<ul id="secondary-nav"><li[+wf.classes+]><a href="[+wf.link+]">[+wf.linktext+]</a></li>[+wf.wrapper+]

nav_outerTpl

[+wf.wrapper+]</ul><!-- /#secondary-nav -->

nav_rowTpl

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

I’d love to hear any advice! I found a few threads of people having the opposite problem - which would be right for me - so I’m not sure what’s wrong here.

Thanks!

1,390 Posts

kongondo Reply #2, 17 years, 6 months ago

Hi,
Welcome to the forums!

Short answer:

The &hereClass is applied by default to all active documents - i.e. selected child-parent-grandparent etc all the way up the tree (breadcrumbs). Its default value is "active". That is why you are seeing it being applied like that.

If you want a class applied to one and only one document, i.e. <li> then use &selfClass. Give it a value other than active e.g. &selfClass=`self`. If you want to give it the value "active" then tell WF not to use the &hereClass at all or assign &hereClass another value - i.e. &hereClass=`` or &hereClass=`here` respectively.

In a hurry so didn’t check if your tpls have issues too.

cheers/k

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

69 Posts

markhurd Reply #3, 17 years, 6 months ago

Thank you so much, kongondo! Setting &selfClass to ’active’ and &hereClass to ’’ worked perfectly. I appreciate not just the response but the detailed explanation as well.

1,390 Posts

kongondo Reply #4, 17 years, 6 months ago

U r welcome Mark grin

Glad you got it working... if you want you can edit this thread’s title to "solved - &displayStart....."

/k

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