Wayfinder Last Row Template or Separator & Alternating Rows

Hello,

The design I am incorporating into modx comes with a | (pipe) symbol for a separator between menu items in a horizontal menu. So I have the '|' symbol in the rowTpl, but this then leaves a trailing pipe symbol for the last menu item.

There doesn't seem to be a way to use a different template for the first and last row with wayfinder, only different classes. I was hoping for a tplLast like getresources has.

Before I try switching to getresources or having to rework the separator as a css element somehow, I thought I would ask here to see if anyone knew a way I could work this into wayfinder somehow,

Thanks, [ed. note: paulkoan last edited this post 15 years ago.]

Have a look to this thread:
http://ttyl.modx.com/thread/40779/style-the-item-left-of-active-hover#dis-post-235641

Follow also the link inside of it:
https://forums.modx.com/index.php/topic,60416.msg343587.html#msg343587 [ed. note: ottogal last edited this post 15 years, 1 month ago.]

Ah right I see - I use an image instead of the pipe symbol, make it a background for the element, then size the last class so it is hidden. Thanks.

Seeing as I have you here, do you know how to use different classes for odd and even rows. I see that a patch for Wayfinder to add them as classes options to the call a while back, but it doesn't seem to be in the present version.

Do you know a workaround without having a class per row?

Rather than sizing the last class so it's hidden, just use &lastClass parameter to style the last list item without a background image

http://rtfm.modx.com/display/ADDON/Wayfinder+Introductory+Examples#WayfinderIntroductoryExamples-Settingclasses

It's a shame there isn't a &altClass option, BUT you should be able to find a JQuery script to alternating row highlighting.

You could just add the pipe symbol to the "menu text" in each resource - and leave it off the the last item - not the most elegant solution but straight forward. (I can think of several reasons I would not want to do it this way...)

Don't know about the odd/even rows - would be nice to have in some cases. Wayfinder does have &rowClass - which appends the number of the row to whatever text is in your call - so perhaps it would not be too hard to hack it to produce an odd/even class

Wayfinder does have &rowClass - which appends the number of the row to whatever text is in your call

I figured I could use this to do an override hack, so that if I would set then I could say



as an example. A bit hacky but it will serve for now.

However, rowClass only seems to output the word "row" - the number of the row isn't suffixed. Have you used it?

rowIdPrefix is closer but still not quite right, it uses the document ID which will not necessarily be sequential.

[ed. note: paulkoan last edited this post 15 years ago.]

My apologies - I was remembering wrong - I just looked at one of my sites and you are correct - rowClass just adds a class to each item no number appended, and rowIdPrefix, as you say appends the document ID to whatever you ask it to.

I was thinking of the rowIdPrefix one and as it happened the first site I used it on the resources had sequential numbers, I remember now since some rearranging of pages caused havoc with the css.

Sorry if I got your hopes up!

Did you try using getresouces?
For the even/odd rows the idx property could probably be used, for example (untried):

this post https://forums.modx.com/thread/70128/spend-more-time-building-less-time-maintaining#dis-post-392841 made me think about this

hi,

well, actually in this case, i would use two solutions, css to insert the pipe with after and content or knowing this won't work in many ie, js to do this to...

js to add a class a row out of two and css to give this class ths look i need...

it may sound salvage but according to the fact that it's
- purely cosmetic
- totally unobstrusive
- easy to maintain/change
- without any consequences for accessibility and semantics
i would do this...

lots of decoration things may be achieved with js, sometimes letting your html markup cleaner than when it's ovecrowded with classes or ids just for a alternate background color (he classes you inject with js are as easy to erase as they are to inject)

have swing

I was also looking for a simple solution to this. And also wanted to use a character for a separator. I figured one out that works for me.

In your row template use the [[+wf.classnames]] on a surrounding <div> instead of the link.
This will add .last to your last <div>. Put your separator in side a span or div and hide the last one using css.

Example:
rowTpl:


CSS: