Wayfinder - Setting default one item as active straight away?

36 Posts

LewisSellers Reply #1, 13 years, 6 months ago

Hi Everyone!

I've posted a few questions on here over the last few days, you're all great!!

In part of the site we're building, we've got a slider that shows the different programs that are available within the category. Basically, this is a grid of 3, where the the left and the right ones are partly faded, and the middle on shows as active.

We've got the JQuery working and the styling and we're now moving it into MODx. Because of the number of categories and the different programs available in each category, we need to automate this, so we're using wayfinder to build it up.

I've got the script in and it works once the first scroll has occured, but when the page first loads, none of the classes have the 'active' class associated with them. Instead, you have to wait a few seconds before the slider first scrolls and then an active class is assigned.

Hopefully this makes sense, I can't really post the URL on here but if you PM me, I can share it!

Kind regards,
Lewis

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 13 years, 6 months ago

The jquery plugin you're using should take care of that. Wayfinder just provides the unordered list that the javascript wants to work with.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

36 Posts

LewisSellers Reply #3, 13 years, 5 months ago

Quote from: sottwell at Mar 30, 2013, 02:02 PM

The jquery plugin you're using should take care of that. Wayfinder just provides the unordered list that the javascript wants to work with.

Hey,

Well, prior to me putting it into MODx, it worked perfectly and worked exactly how it should have. However, once I've put it into MODx, it doesn't show the active state until It does the first rotation. That's what's confusing me a little bit.

The wayfinder call I have is:

[[!Wayfinder?
&outerTpl=`programOuter`
&rowTpl=`programRow1`
&hereClass=`active`
&level=`1`
]]

The outer is simply the UL + the wf.wrapper class.

programRow1 contains the following:

<li class="slide [[+wf.classnames]]">
                                <div class="pro-item">
                                    <div class="pro-content">
                                        <div class="top">
                                            <h3 class="pro-title">[[+wf.title]]</h3>
                                            <p class="pro-locations">
                                                [[+locations]]
                                            </p>
                                        </div>
                                        <div class="description">
                                            <p>
                                                [[+description]]
                                            </p>
                                            <div class="pro-more">
                                                <a href="[[+wf.link]]"><span>Find Out More</span></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pro-photo">
                                        <div class="clearfix">
                                            <img src="[[+image1]]" alt="" />
                                            <img src="[[+image2]]" alt="" />
                                        </div>
                                        <div class="mask"></div>
                                    </div>
                                </div>
                            [[+wf.wrapper]]</li>

Does this help debug anything at all?

Kind regards,
Lewis

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 13 years, 5 months ago

Is there a classname for the first item in the original, but not in the MODx-generated version? Check a view source in your browser and make sure that it's exactly like the static version that works.

You should also be aware that wf.classnames will insert the class names without the class="..." attribute key. It's used if you are specifying a class attribute already in the tpl, and want to add the dynamic classnames like "first" or "last" or "active".

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

36 Posts

LewisSellers Reply #5, 13 years, 5 months ago

Thanks for this, I'll take a look and see if I can figure it out.

It's a bit of a strange one and I was pretty sure I'd got it right first time but there's obviously something missing!

Just on a separate note, is there a way to pull in the ID of a child page using wayfinder? For example in the following structure:

Top Level Menu
------ Sub Menu
------------ Sub Sub Menu

Would it be possible to bring in the titles of the 'sub sub menu' pages from the 'top level menu' ?

I've got a list of resources within the sub sub menu that I want to pull in from the top level menu page. Again, automating the process is the nicest way of doing it if possible!

Kind regards,
Lewis [ed. note: LewisSellers last edited this post 13 years, 5 months ago.]

36 Posts

LewisSellers Reply #6, 13 years, 5 months ago

Hi All,

Does anyone have any ideas on how I can achieve the above?

Thanks you in advance.
Lewis

☆ A M B ☆
894 Posts

benmarte Reply #7, 13 years, 5 months ago

For your first issue if you haven't solved it can you provide a link we can check?

For your wayfinder sub sub menu issue try using the &includeDocs parameter to see if it will work check out the wayfinder documentation for more info.

Good Luck.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX