Collapse-Pro-Matic Advanced External Triggers

There are times when it would be nice to turn ANY element into an external trigger for a collapse element. So as of Collapse-Pro-Matic v 1.2.9f we have added:

  • new colomat_trigger class that turns anything into a trigger
  • new external_trigger shortcode element to enter the ids of the elements that should be used as an external trigger
  • new data-external-element attribute that can be used for roll-your-own collapse elements
  • new colomat_expand_only class that prevents the external trigger from collapsing the target, only expand
  • new colomat_collapse_only class that prevents the external trigger from expanding the target, only collapse

And this is how it works:

take any element, make sure it has a unique id and the colomat_trigger class assigned.

<h4 id="funkmaster" class="colomat_trigger">Bootsy</h4>

Bootsy

additional external link can be assigned, and external links that will only expand (not collapse) the target:

<h4 id="flash" class="colomat_trigger colomat_expand_only">Grandmaster Flash</h4>

Grandmaster Flash

Next, assign the ID of the external id (or multiple ids) using the external_trigger attribute:

[expand title="Who has the funk?" external_trigger="funkmaster flash"]You got the funk![/expand]
Who has the funk?
Glory be, baby, you got the funk!

Collapse-Pro-Matic Class Triggers

As of version 1.3.2 of Collapse-Pro-Matic an external trigger can also be assigned to any element using only class names. For example, using a WordPress menu element, where only the classes can be assigned. The following classes must be added to the trigger:

  • collapseomatic
  • noarrow
  • colomatclasstrigger
  • colomatid-[the_target_id]

[expand title="This is the Master Trigger" id="multi-trigger"]

This is the Master Trigger
This is some text that when you click on the trigger you are able to read with your eyes. Well, your eyes are able to see the text, but I guess it’s actually your brain that reads the words and makes sense of them. But jokes on you! There is no sense to be made from these words because they are just pure jibber-jabber.

Links

The following is a link that has an href attribute of “#multi-trigger” and a class of “expandanchor”. Clicking this will scroll-to and expand-only the element.

<a class="expandanchor" href="#multi-trigger">Anchor Link to Multi-Trigger%lt;/a>

Anchor Link to Multi-Trigger

Buttons

Buttons are not links, however if it contains the same href and class values as the link above it will expand-only the target, just not scroll to it.

<button class="expandanchor" href="#multi-trigger">Button to Multi-Trigger</button>

Buttons Wrapped in a Link

This is basically a button that is wrapped in a link described above. Notice that the text link must be clicked, not the button.

<a class="expandanchor" href="#multi-trigger"><button>Anchor Button linked to Multi-Trigger</button></a>

Link Wrapped in a Button

This is a link that is wrapped in a button as described above:

<button><a class="expandanchor" href="#multi-trigger">Button Anchor linked to Multi-Trigger</a></button>

Special Applications: Buttons

Here are a few ordinary buttons, each assigned with a) a unique id, and b) colomat_trigger colomat_expand_only and snap-shut classes like so:

<button id="button_one" class='colomat_trigger colomat_expand_only snap-shut'>Button One</button>

Each button needs to correspond to a target. Normally to create the target it would be part of the trigger but we add the narrow and hidden classes using the trigclass attribute and remove the target padding using the targclass attribute like so:

[expand title="Button 1" external_trigger="button_one" rel="buttons-highlander" trigclass="noarrow hidden" targclass="no_left_margin"]Button One[/expand]

We then added the following CSS under the Custom CSS area of the theme (if available) or the collapse-pro-matic plugin settings:

.hidden {
   display: none;
}
.no_left_margin {
   margin-left: 0;
}
Content One
Content Two
Content Three

Collapse-Pro-Matic – Pesky Hash-Bang URLs

This is a hash-bang: #!
Hash-bangs cause havoc or a number of reasons, but there is at least one example that directly affects how Collapse-O-Matic and Collapse-Pro-Matic process URLs. Take external triggers, for example:

[expand title="question 1" id="q1"]answer 1[/expand]
[expand title="question 2" id="q2"]answer 2[/expand]
<a class="expandanchor" href="#q1">expand question 1</a>
<a class="expandanchor" href="https://spacedonkey.de/2207/collapse-pro-matic-pesky-hash-bang-urls/#q2">
question 1
answer 1
question 2
answer 2
Internal link to expand question 1 from the same page.
External link to expand question 2 from anywhere.

So far, so good. But now, we add a link with a hash-bang:

<a class="expandanchor" href="https://spacedonkey.de/2207/collapse-pro-matic-pesky-hash-bang-urls/#!/monkey/wrench/#q2">answer 2 with a hash-bang monkey-wrench</a>

answer 2 with a hash-bang monkey-wrench

Collapse-Pro-Matic New Highlander Grouping Class Tricks

This is a test of a new highlander grouping class system that allows CSS and jQery to target the various stages of highlander grouping elements. The following elements have the rel="animal-highlander" attribute assigned. When a single element is expanded, then all closed elements in the group will be assigned a class of animal-highlander_closed. When all elements are collapsed none of the elements in the group will have this class assigned.

CSS

.animal-highlander_closed {
    color: #cccccc;
}

Shortcode

[expand title="Monkeys" rel="animal-highlander"]...[/expand]
[expand title="Donkeys" rel="animal-highlander"]...[/expand]
[expand title="Ninjas" rel="animal-highlander"]...[/expand]

Example

Monkeys
A monkey is a primate of the Haplorrhini suborder and simian infraorder, either an Old World monkey or a New World monkey, but excluding apes and humans. There are about 260 known living species of monkey. Many are arboreal, although there are species that live primarily on the ground, such as baboons. Monkeys are generally considered to be intelligent. Unlike apes, monkeys usually have tails. Tailless monkeys may be called “apes”, incorrectly according to modern usage; thus the tailless Barbary macaque is called the “Barbary ape”.
Donkeys
The donkey or ass, Equus africanus asinus,[1][2] is a domesticated member of the Equidae or horse family. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years. There are more than 40 million donkeys in the world, mostly in underdeveloped countries, where they are used principally as draught or pack animals. Working donkeys are often associated with those living at or below subsistence levels. Small numbers of donkeys are kept for breeding or as pets in developed countries.
Ninjas
A ninja (忍者?) or shinobi (忍び?) was a covert agent or mercenary in feudal Japan who specialized in unorthodox warfare. The functions of the ninja included espionage, sabotage, infiltration, and assassination, and open combat in certain situations.[1] Their covert methods of waging war contrasted the ninja with the samurai, who observed strict rules about honor and combat.[2] The shinobi proper, a specially trained group of spies and mercenaries, appeared in the Sengoku or “warring states” period, in the 15th century,[3] but antecedents may have existed in the 14th century,[4] and possibly even in the 12th century (Heian or early Kamakura era).[5][6]

Extra Elements

What if we wanted a non-expand element to also be affected by the magic shown above? For example, what if an image should only be displayed when none of the highlander grouped elements where expanded. Hmmm, good question. Let’s see. The first idea would be to simply assign the same rel="[group_name]-highlander" attribute to the image. This will work, but what if it’s simply not possible to assign a rel attribute to an image? We have expanded the plugin to also search for any element that has a class that matches the value of the expand groups rel value. So simply add a [group_name]-highlander class to any element you want assigned the [group_name]-highlander_closed class when a single element is expanded.

CSS

.duck-highlander_closed {
    display: none;
}

External Element

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/grillhead-225x300.jpg" alt="grillhead" width="225" height="300" class="alignnone size-medium wp-image-338 duck-highlander" />

Shortcode

[expand title="Huey" rel="duck-highlander"]...[/expand]
[expand title="Dewey" rel="duck-highlander"]...[/expand]
[expand title="Louie" rel="duck-highlander"]...[/expand]

Example

grillhead

Huey
Huey was named after Huey Long (1893–1935) of Louisiana.
Dewey
Dewey was named after Admiral George Dewey (1837–1917) of the Spanish–American War.
Louie
Louie was named after animator Louie Schmitt (1908–1993).

Print-Pro-Matic Inject Logo Before Print Element

This is a quick test to inject a logo at the top of a print-pro-matic page using only css.
In this case, the print element has a class of #post-2182 and it is targeted as normal:

[print-me target="#post-2182"]

However now we add the following css to the our theme:

@media print {
   #post-2182::before {
      content: url(https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-300x223.jpg);
   }
}

This will place the logo in the ::before pseudo class of the targeted print element on the print page. however if the images does NOT exist on the page then it will not have enough time to load before print is triggered. Let’s try it out:

[print-me target="#post-2182" pause_before_print="500"/]

Probably now image right? Now click the print icon again. Image. How to solve this?

Guess we need to use top_html and bottom_html to define custom content and provide a bit of pause_before_print time.

Print-Pro-Matic External CSS Test

Print-Pro-Matic allows loading in an external css file for the print view, rather than have to manually entered all definitions in to the Custom CSS area.

For example, this should load in a css file that gives the target element a lovely purpley dotted border:

[print-me css_url="https://spacedonkey.de/wp-content/uploads/2015/07/purpeat.css" target=".purpeoeater"]

Flyin’ Purple People Eater

Well, bless my soul rock ‘n roll flying’ purple people eater
Pigeon-toed under-growed flyin’ purple people eater
One-eyed one-horned it was a people eater
What a sight to see!

Collapse-O-Matic Collapse-Pro-Matic Inline Test

Test 1

<h7>Test Header</h7>
<strong>Strong Text</strong>
This is a bit of text that goes on for awhile just to create the illusion that there is something important to say. After some time we might want to create a little teaser for [expand title="Read more" swaptitle="Read Less" trigclass="arrowright" targpos="inline" targtag="span" trigpos="below"]this text that was hidden but now is not. [/expand]

Test Header
Strong Text
This is a bit of text that goes on for awhile just to create the illusion that there is something important to say. After some time we might want to create a little teaser for this text that was hidden but now is not.

Read more

What if we placed all of this inside a LI element:

  • Test Header
    Strong Text
    This is a bit of text that goes on for awhile just to create the illusion that there is something important to say. After some time we might want to create a little teaser for this text that was hidden but now is not.
    Read more

Paragraphs

If the shortcode needs to be placed inside a paragraph, it’s best to use the roll-your-own method like so:

This is a paragraph of text that we just are going to throw in here. You might not like the text, as it really just rambles on and on, but it does fill the purpose of filler text. this is the <div id="target-paratest" class="collapseomatic_content_inline colomat-inline span_fix" style="display: inline;">last text in the first paragraph.
<p>This is the next paragraph of text</p>
<p>This is the final paragraph of text</p></div> <span class="collapseomatic span_fix noarrow" id="paratest" title="Read more..." tabindex="0">Read more...</span> <span id="swap-paratest" class="colomat-swap" style="display:none;">Read less...</span>
<p>Now let's see what happens.</p>

This is a paragraph of text that we just are going to throw in here. You might not like the text, as it really just rambles on and on, but it does fill the purpose of filler text. this is the

last text in the first paragraph.
This is the next paragraph of text

This is the final paragraph of text

Read more…

Now let’s see what happens.

Column-Matic Responsive CSS

This is a quick demo on how to set up responsive columns with Column-Matic. In this demo will will display three columns that will then stack vertically once the screen size drops below a certain width.

The CSS

.my_column {
    width: 23%;
    margin-left: 5%;
    padding-left: 5%;
}

@media (max-width: 450px) {
    .my_column {
        width: 95%;
        margin: 0 auto;
                padding: 3px;
        clear: both;
        border: none;
    }
}

Shortcode

[[column class="my_column"]...[/column]][[column class="my_column"]...[/column]][[column class="my_column"]...[/column]][[end_columns]]

Result

[column class=”my_column”]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/column][column class=”my_column”]Ex cum quas aeque, alii constituto nam in. Id vocibus mandamus suscipiantur vim, mel ad ipsum convenire maluisset. His vocent accusata torquatos an, ei dicat tation pro, et suavitate definitiones pro. Mei perfecto tincidunt ea, omnesque efficiendi interesset in mei.[/column][column class=”my_column”]Lorem ipsum dolor Cu eam probo phaedrum philosophia, sed eu iisque persius repudiandae. An ferri mollis deseruisse qui, te dicit mnesarchum est, nonumy docendi tincidunt sit cu. Mei at munere admodum.[/column]
[end_columns]

Collase-O-Matic Roll-Your-Own Inline Target Above

This is some text that goes on a bit and then there will be a simply read-more link after this run-on sentence finally ends. It also features a bit more text that is originally hidden, but then pops up when the read-more link is clicked. read more

This was done using the following code structure:

<span id="target-monkey1" class="collapseomatic_content_inline colomat-inline span_fix">It also features a ...</span> <span id="monkey1" class="collapseomatic" title="read more">read more</span><span id="swap-monkey1" style="display: none;">read less</span>

Collapse-O-Matic – Inline Roll-Your-Own Triggers

This is a follow-up post to Collapse-O-Matic > Line of Trigger Images. This time we want to have the triggers in-line but the content to be displayed below the trigger line. To do this we first must use the roll-your-own method.

Triggers:

<span class="collapseomatic" id="item_one" data-group="item-highlander">Trigger One</span> <span class="collapseomatic" id="item_two" data-group="item-highlander">Trigger Two</span> <span class="collapseomatic" id="item_three" data-group="item-highlander">Trigger Three</span>

Targets:

<div id="target-item_one" class="collapseomatic_content ">Target One</div>
<div id="target-item_two" class="collapseomatic_content ">Target Two</div>
<div id="target-item_three" class="collapseomatic_content ">Target Three</div>

The Results:

Trigger One Trigger Two Trigger Three
Target One
Target Two
Target Three

Collaspse-Commander

The same thing with collapse commander would look like this:

[expand_trig cid="2119" /] [expand_trig cid="2120" /] [expand_trig cid="2121" /]
[expand_targ cid="2119" /] [expand_targ cid="2120" /] [expand_targ cid="2121" /]

Results:
Item One Item Two Item Three

Target One
Target Two
Target Three