A Pluginoven Test Site
Quick test of all the animation effects with Collapse-O-Matic v 1.8.3:
[expand title="slideToggle" animation_effect="slideToggle" duration="2000"]content[/expand][expand title="slideFade" animation_effect="slideFade"]content[/expand][expand title="fadeOnly" animation_effect="fadeOnly"]content[/expand]This is a test of nesting grouping. First, nested highlander grouping:
[expand title="This" rel="main-highlander"]
[expandsub1 title="This One" rel="this-highlander"]One[/expandsub1]
[expandsub1 title="This Two" rel="this-highlander"]Two[/expandsub1]
[expandsub1 title="This Three" rel="this-highlander"]Three[/expandsub1]
[/expand]
[expand title="That" rel="main-highlander"]
[expandsub1 title="That One" rel="that-highlander"]One[/expandsub1]
[expandsub1 title="That Two" rel="that-highlander"]Two[/expandsub1]
[expandsub1 title="that Three" rel="that-highlander"]Three[/expandsub1]
[/expand]This is a test of the new findme options available with collapse-o-matic. In addition to the values of ‘auto’ and a fixed numeric offset, the findme attributes now supports ‘trigger’ and ‘target’.
[expand title="trigger" findme="target"]hidden content[/expand]For target to make sense, there would need to be content between the trigger and target. We do this using the roll-your-own method:
<div class="collapseomatic find-me" id="my_example" title="trigger text" data-offset="-60" data-findme="target">trigger text</div>
some bulky content. Notice the offset of -60, this is to compensate for the sticky menu element at the top of the page.
<div id="target-my_example" class="collapseomatic_content ">Target Content</div>This is some bulky content… how about a picture of a donkey.
we should only have to calculate year, month and week time units once, as they will likely change only one time per viewing. Even so, we will need to properly calculate the amount of days, weeks and months remain, depending on how many time units are currently being displayed. We use a test of +410 days and 10 seconds from now to test how the change over works for the larger time units.
This test should show everything: Years, Months, Weeks, Days… and the rest.[tminus t="+410 days +10 sec" style="TIE-fighter"/]
This test should show everything: Years, Months, Weeks, Days… and the rest.[tminus t="+396 days +10 sec" omitweeks="true" style="TIE-fighter"/]
This test should show everything: Years, Months, Weeks, Days… and the rest.[tminus t="+394 days +10 sec" omitmonths="true" style="TIE-fighter"/]
This test should show everything: Years, Months, Weeks, Days… and the rest.[tminus t="+394 days +10 sec" omitmonths="true" omityears="true" style="TIE-fighter"/]
This test should show: Years and days.[tminus t="+366 days +10 sec" omitmonths="true" omitweeks="true" style="TIE-fighter"/]
This test should show only days:[tminus t="+45 days" omityears="true" omitmonths="true" omitweeks="true"/]
This is a quick test to try out the new years and month options added in version 2.3.20… this looks like it might end up being version 2.4.0 at this rate. Yup, it will be a major release.
This test should show everything: Years, Months, Weeks, Days… and the rest.[tminus t="+410 days +10 sec" style="c-3po"/]
This test will omit the years, resulting in expanded months.[|tminus t="+410 days" omityears="true" style="c-3po"/]]
This test will display the years, but convert months to weeks.[tminus t="+410 days" omitmonths="true" style="c-3po"/]
The title, pretty much says it all. No years, no Months… just a whole lott’a weeks:[tminus t="+410 days" omityears="true" omitmonths="true" style="c-3po"/]
Days for days…[tminus t="+410 days" omityears="true" omitmonths="true" omitweeks="true" style="c-3po"/]
No weeks, but the rest.[tminus t="+410 days" omitweeks="true" style="c-3po"/]
No months, no weeks.[tminus t="+410 days +10 secs" omitmonths="true" omitweeks="true" style="c-3po"/]
No years, no weeks.[tminus t="+410 days" omityears="true" omitweeks="true" style="c-3po"/]
This is a test of print-pro-matic using wp_localize to pass js vars to the js file. it also passes print-only elements.
Like this one with the .printonly class listed in the shortcode
And here is the shortcode:[print-me print_only=".printonly"/]
Actually, this should not be passed via shortcode, but rather only defined in the option page.[print-me /]
This is just a simple test where we pass some pause_time and a special target
[print-me target=".print_this" do_not_print=".printomat" pause_before_print="4000"/]This is a test where a scroll-to target will open an expand, however will then scroll back to the top of the page–or actually an element at the top of the page defined as:<h2='top'>Scroll Target at Top<H2>
This is just some filler text to move the expand item a bit further down the screen. In fact, why not just throw in an image and save us all a heap of blibber blabber text. Here is a photo of a donkey stuck in a manhole cover. Silly donkey, you are not a man… you’re a donkey.
Now we place an expand element with a defined ID and scrolltarget value:[expand title="trigger text" id="monkey" scrolltarget="#top"/]
So navigating directly to
https://spacedonkey.de/3439/scroll-targets-and-url-hash/#monkey
will scroll down to the monkey element, open it, then scroll back up to the top element. This bouncing around is quite annoying.
This is a test where we introduce a new attribute called hash_trigger. This is an secondary id that will be use to expand but not scroll to a collapse element based on the url anchor hash. For example. We create an expand element like so:[expand title="trigger text" id="smashing" hash_trigger="pumpkins"/]
Now when we link directly to the page with the url anchor hash of #smashing it will scroll to and expand the element above as normal. However, if we use the url anchor hash of #pumpkins it will only expand the element and NOT scroll anywhere , providing:
1. there is no other element with an ID of pumpkins
2. there is no scroll-to attribute defined on this expand element.
Note: to assign the hash_trigger using the roll-your-own method, simply assign a data-hash-trigger attribute to the trigger element:
<div class="collapseomatic" id="smashing" title="trigger text" data-hash-trigger="pumpkins">trigger text</div>
In the case of a large gallery of images, it could happen that a page break would split images across pages.
For example, what happens when this gallery is printed?
Here is an example of how to pimp the collapse-o-matic expand to use a grey bar style using CSS.
Be sure you are using the div ad your default tag in the plugin settings.
The CSS:
.greybar {
border: 1px dotted #aaaaaa;
padding: 7px;
background-position: 98% center;
background-color: #cccccc;
}The Code:
[expand trigclass="arrowright greybar" title="Monkeys Are Fast"]...[/expand]To give the target content a border, use the targclass attribute:
The CSS:
.blueborder {
border: 1px dotted blue;
border-top: none;
margin-left: 0;
padding: 5px;
}The Code:
[expand trigclass="arrowright greybar" targclass="blueborder" title="Monkeys Are Fast"]...[/expand].de_flag {
background-image: url(https://lipis.github.io/flag-icon-css/flags/4x3/de.svg);
background-size: 64px 16px;
background-repeat: no-repeat;
background-position: -10px center;
padding: 7px 7px 7px 42px;
}then add the new class to the trigclass attribute:
[expand trigclass="arrowright greybar de_flag" title="Deutschland"]...[/expand]
