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,

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:
http://forums.modx.com/index.php/topic,60416.msg343587.html#msg343587

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.

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 http://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 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: