can IF make a div visible based on an operator?

265 Posts

rootsdiv Reply #1, 14 years, 8 months ago

Hi,

I'm converting a 'static' site into MODX and I have a a submenu which has a variable amount of <li> items. The containing <ul id="subnav"> is set to height: 240px; overflow: hidden; which will hide any more than 9 <li> items.

If there are more than 9 <li> items then there is a hard-coded <div> which contains 'up/down' arrows which vertically scroll the list so that any extra <li> items come into view. (i'm doing this with jcarousel slider).

Here's the hard-coded div:

<div class="view-more">
  <p>... more samples</p>
</div>

For the MODX build I want to know whether i can use IF (in conjunction with Wayfinder) to allow me to make the <div class="more-samples"> dynamically appear, thus negating the need for 2 different templates for the subnav (i.e. one with and one without the 'more-samples' div).

Here's my stab at the logic for IF - please note that &subject and &then are what I would like to happen, with &operator being the only 'real-world' property value:

If the amount of <li> in <ul subnav> is greater than 9, then make <div more-samples> visible:

[[If?
&subject=`<ul id="subnav"><li>`
&operator=`>9`
&then=`<div class="more-samples"> visible`
]]

Is this feasible with IF, and if so, what is the correct syntax please???

Thanks in advance.

116 Posts

Wanze Reply #2, 14 years, 8 months ago

So the hard-coded div is after the navigation list or inside?
If its after, i would write a little snippet that counts for me the children of your desired Parent and returns a Chunk with the div inside, if there are more than 9 Children.
Snippet updownDiv:

<?php
$query = $modx->newQuery('modResource', array('parent' => $parentId));
$children = $modx->getCount('modResource',$query);
if($children > 9){
  return $modx->getChunk('navigation_div');
}
return '';

And then in your template under the menu generated with wayfinder:

[[updownDiv? &parentId=`<<yourParentId here>>`]]

Not tested ;-)

265 Posts

rootsdiv Reply #3, 14 years, 8 months ago

@Wanze
Many thanks for getting back so fast!
The div is immediately after the list.
This looks a likely fix, but at the moment I'm ironing out a little battle between jcarousel and wayfinder.
As soon as I can get this done then I'll get this snippet rolling, please leave it with me [ed. note: rootsdiv last edited this post 14 years, 8 months ago.]

265 Posts

rootsdiv Reply #4, 14 years, 8 months ago

EDIT > now grappling with css issues - wayfinder and jcarousel aren't sitting well together right now. I'll iron these out and get back to you!

265 Posts

rootsdiv Reply #5, 14 years, 8 months ago

Sorry for the delay, got the earlier css issues sorted.
I tried the snippet but 'navigation_div' doesn't seem to want to load. The snippet is exactly how you suggest so here's how I set everything else up:

My Wayfinder generated menu:

<nav id="subnav" class="jcarousel jcarousel-skin-tango">
  <ul class="subnavlist">
    <li><a href="01.html">01</a></li>
    <li><a href="02.html">02</a></li>

    ... ...

    <li><a href="09.html">09</a></li>
    <li><a href="10.html">10</a></li>
    <li><a href="11.html">11</a></li>
  </ul>
[[!updownDiv? &parentId=`subnavlist`]]

The 'navigation_div' chunk:

<div id="more-samples">
  <p class="chevron">... more samples</p>
</div>

Can you see anything glaringly obviously wrong here?
Thanks

116 Posts

Wanze Reply #6, 14 years, 8 months ago

Hi rootsdiv,
In the "&parentId" Parameter, you should put the Resource-ID of the Parent which contains the children of your menu. This should be the same ID as the "&startId" for your Wayfinder call.
If you don't display hidden or unpublished resources with Wayfinder, then the Snippet should be extended to only query those documents.

Does it work this way? Is your menu structure deeper than one level?

265 Posts

rootsdiv Reply #7, 14 years, 8 months ago

Hi Wanze,
Thanks! that worked, of course it's the Resource ID as the Parent !!!

Weird thing is, I had to edit the snippet slightly:

if($children > 10)

I tried '>= 9' but it just didn't work - really illogical, but I'll go with what works. Many thanks for this, much appreciated!

There is a slight hangup though - this is working with jcarousel which has a couple of up/down arrows to scroll the menu items which are hidden. These buttons are positioned via css so are immune to the snippet.

So for my next question - if I may wink

With a bit of customisation would this snippet also be able to load a specific stylesheet based on the same criteria?

The css i load in my templates is via a chunks:
css-common or css-common-dynamic-subnav

The second chunk is the same as the 1st but with the jcarousel styling added.

Will the snippet be able to load the second css chunk, or do you reckon I'll need to start delving into the jCarousel code?

Thanks again

116 Posts

Wanze Reply #8, 14 years, 8 months ago

You're welcome.
That's very weird, because 11 is greater than 9 so in both ways, the if expression should be true ;-)
Can you separate the jcaroussel styling in a css file?
Then you could load it like that into the head of your resource:

<?php
$query = $modx->newQuery('modResource', array('parent' => $parentId));
$children = $modx->getCount('modResource',$query);
if($children > 9){
  $modx->regClientCSS('assets/css/custom.jcaroussel.css');
  return $modx->getChunk('navigation_div');
}
return '';

265 Posts

rootsdiv Reply #9, 14 years, 8 months ago

Hi Wanze
Thanks for the reply, sorry for my late response, been away from this one for almost a day, an eternity wink

Yep, I could separate the css, I'll have a dig at this as soon as I can get back onto the project. Also, looking at that part of the snippet I could think of other uses, I'll start experimenting.
Will feed back as soon as, thanks again.

265 Posts

rootsdiv Reply #10, 14 years, 8 months ago

Hi Wanze

This is working perfectly! thanks a million.

I've added a bit extra to dynamically load the .js script files for jCarousel which works perfectly too. So ... from here i'm going to start digging into snippet writing - php isn't my specialism but I can follow what you've written no prob and can see the blindingly obvious benefits.

The last hang (hopefully) - I'm building this site at a subdomain - I'm getting all sorts weirdness with FURL's, an example of this is that the css loaded via this snippet drops out. I've done what I know so-far to get furl's at a subdom working properly but no joy.

The host runs with CPanel and I've seen that CP can cause problems with subdom sites - for example see: https://forums.modx.com/thread/72358/sef-urls-and-subdomains#dis-post-402608

So i'm gonna transfer the whole site to a subdirectory and pick it up from there - will come back when done.

Thanks again, for the snippet