I've used the Wayfinder menu building extra with MODx Evo and am now attempting to use it with MODx Revo for a new site. It's working well apart from I can't yet see a way to have the 3rd level different to the 2nd level . See the way Wayfinder is currently outputting the menu (simplified here for clarity):
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown">
<a class="dropdown-toggle notransition" href="index.php?id=200">
Help
<i class="icon-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right " style="display: none;">
<li>
<a href="index.php?id=31">
FAQs
</a>
</li>
<li class="dropdown-submenu pull-left">
<a href="index.php?id=54">
Policies
</a>
<ul class="dropdown-menu pull-right" style="display: none;">
<li>
<a href="index.php?id=490">
Privacy Policy
</a>
</li>
<li>
<a href="index.php?id=489">
Terms and Conditions
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I need the 'Policies' sub-menu, with 'Privacy Policy' etc, to pull to the left, not to the right - defined in Wayfinder InnerTpl:
<ul class="dropdown-menu pull-right" style="display: none;">[[+wf.wrapper]]</ul>
So, is it possible with Wayfinder to have a 3rd level different to the 2nd level ???
I've browsed the docs and forums for days to no avail and hope that the amazing SO community has some insights. Thanks in advance!
I think you are going to have to do this with CSS, you can add the &levelClass to your wayfinder call [docs say " CSS class denoting every output row level. The level number will be added to the specified class (level1, level2, level3 etc if you specified 'level').]
that way when you can write some css for your third level items when you see something like:
<li class="dropdown-submenu pull-left level2">
your css could go something like:
li.dropdown-submenu.pull-left.level2 > ul {
/* css for pulling it right */
}
unfortunately the &levelClass does not do anything if you add [[+wf.classnames]] to the UL tag in the outer wrapper so you have to come at it sideways.
OR
your inner wrappers could be written to use a snippet to decide what classes to add:
<ul class="dropdown-menu [[!pullLeftOrRight? &id=`[[+wf.docid]]`]]">
[[+wf.wrapper]]
</ul>
Then in your snippet use the docid to determine where in the menu tree that subnav is.
[hopefully docid is available in the outerTpl - I'm not sure]
UPDATE
After reading your comments & the docs again, I think I have an idea that might work - check out the &categoryFoldersTpl attribute, setup your tpl for that with your pull right classes & for your 3rd level drop downs, set the rel="category" on only the third level resources as suggested in the docs. [which doesn't help anyone who wants different submenus for different levels, but may get you out of your bind]
Related
I have list of elements as below:
<div class="container-menu" _ngcontent-c13="">
<nav _ngcontent-c13="">
<ul _ngcontent-c13="">
<li _ngcontent-c13="">
<a class="" _ngcontent-c13="" href="/32info" role="link" routerlinkactive="active" ng-reflect-router-link="/32info" ng-reflect-router-link-active="active" title="Information"> Information test </a>
</li>
<li _ngcontent-c13="">
<a class="active" _ngcontent-c13="" href="/32address" role="link" routerlinkactive="active" ng-reflect-router-link="/32address" ng-reflect-router-link-active="active" title="Address"> Data address </a>
</li>
I wanted to first click on element two and then first in my test. I appealed this way:
element(by.partialLinkText('Data address')).click();
element(by.partialLinkText('Information test')).click();
but this doesn't work now. How can my tester click on these items?
To get the full compiler experience for TypeScript with Selenium WebDriverJS, add the type definitions to your project, for example using NPM.
npm install --save-dev #types/selenium-webdriver
The source code for the type definition is on GitHub,
Gretings, I have a problem with changing languages from Twig template.
My goal is to make it possible for user to switch page language according to his needs. I did everything according instruction:
Making the Locale "Sticky" during a User's Session
My question is, how to change language, which is stored in session, from Twig template?
My best guess was:
{{ app.session.set('_lang', 'en') }}
But result was, that language change needed page to be refreshed twice to show results, one to set values in session, second to load page according language stored in session. Please advise!
Solution was creating locale prefixes for all controllers and as malcolm offered, using route params:
{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'_locale': 'en'})) }}
This will allow you to get the route and the route's parameters without knowing them. Then it will override the _locale parameter with your value.
In Twig :
{{path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params')|merge({'_locale': 'en'})) }}
With the HTML/Bootstrap code
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="language_switcher" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-globe"></i></a>
<div class="dropdown-menu" aria-labelledby="language_switcher">
<a class="dropdown-item" href="{{ path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params')|merge({'_locale': 'ru'})) }}"><span class="flag flag-ru"> </span> Russian</a>
<a class="dropdown-item" href="{{ path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params')|merge({'_locale': 'en'})) }}"><span class="flag flag-us"> </span> English</a>
</div>
</li>
I have the following code
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{exp:channel:entries channel="static" sort="asc" dynamic="off"}
<li>{title}</li>
{/exp:channel:entries}
</ul>
</div><!--/.nav-collapse -->
Which is looping through a channel I have for static pages on my website. Technically it is showing all the stuff it should do. This is the code it outputs:
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Small Builders</li>
</ul>
</div>
However, when I click the link it gives me a white page. I have the htaccess from the documentation set up. I'm new to ExpressionEngine. Am I missing something completely obvious? I just want to link the the entry I've created.
If you try to go to abc.com/index/small-builders does it work? (added index)
I don't know if you're hiding index in the url or not but that can cause it.
The way I fixed this was the enable the Pages plugin on ExpressionEngine. Where I'm using ExpressionEngine 3.0.5 the plugin isn't installed/activated by default like it is on EE2.
Once this was activated I was able to assign templates and url structure no problem.
guess your post would be better on the expressionengine.stackexchange.com site.
Post it there and i´ll have a look if i can explain this to you
Let’s say that I have a carousel on my index page.
Inside the template for index, it loads a particular channel, “Foo”
<div "slider">
<ul class="slides">
{exp:low_reorder:entries set="foo" dynamic="no"}
<li class="foo_{entry_id}">
<div class="container">
<div class="row-fluid">
<div class="span12">
{foo_html}
<style type="text/css">{foo_css}</style>
</div>
</div>
</div>
</li>
{/exp:low_reorder:entries}
</ul>
</div>
That channel, naturally, has a list of content items
I want the list of content items displayed to exclude one of the items in the channel if the referrer is not bing.
Can anyone show me the way that they would go about accomplishing that? I'm not getting any traction on the ellislab forum.
I whipped up a plugin for you, which you can find here
You can wrap the item in a conditional using that plugin to check if it should be output.
What is the best way to implement this layout with jQuery Mobile (menu-grid, 6 buttons in this example)?
I've tried the jQuery Mobile grid but I had many problems such as making it full width and full height, and changing the color to whatever I want.
You can create that in your own styling for that page. Float the icons and give them a 50% width (or less if you are using borders with box-model)
Since you dont have much going on which necessary requires body here, I feel going the way of header navigation might be the easiest. Just put the following code right after the header for your page. For eg:
<div data-role='header' data-position='inline' role='banner' data-theme='f' >
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1>
<div data-role="navbar" data-theme='c'>
<ul>
<li><a href="" >
Camera
</a></li>
<li><a href="" >
Wave
</a></li>
<li><a href="" >
Lock
</a></li>
<li><a href="" >
Pencil
</a></li>
<li><a href="" >
Star
</a></li>
<li><a href="" >
Friends
</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- header -->
Since you have six items here, jquery mobile will automagically align them in a 2x3 grid formation as displayed in your mockup (atleast will take care of the width). Other than this, your best bet for height might be doing some arithmetic in css. Eg: if header bar is 12px, then set each block's height:33%-4px;
For the color settings and such, jquery mobile theme roller works out way better than doing hand made css.
Use data grid "a"
Use the below one
<div data-role="navbar" data-grid="a">