Posts

Posted on

Nested Collapse Elements with Highlander Grouping

Here is a typical nested collapse group with highlander grouping

[expand title="state1" id="state1" togglegroup="state-highlander"]
   [expandsub1 title="city1" id="city1" togglegroup="city-highlander"]bar1 bar2[/expandsub1]  
   [expandsub1 title="city2" id="city2" togglegroup="city-highlander"]bar3 bar4[/expandsub1]
[/expand]

[expand title="state2" id="state2" togglegroup="state-highlander"]
   [expandsub1 title="city3" id="city3" togglegroup="city-highlander"]bar5 bar6[/expandsub1]  
   [expandsub1 title="city4" id="city4" togglegroup="city-highlander"]bar7 bar8[/expandsub1]
[/expand]

Notice how the main level and nested sub-elements have their own highlander grouping defined. This makes it so the main level items do not affect the nested children expand/collapse states.
This is how it works:

state1
city1
bar1 bar2
city2
bar3 bar4
state2
city3
bar5 bar6
city4
bar7 bar8

Now to do the exact same thing using the roll-your-own method:

<div class="collapseomatic" id="state1"  title="state1" data-togglegroup="state-highlander">state1</div>
<div id="target-state1" class="collapseomatic_content">
   <div class="collapseomatic" id="city1" title="city1" data-togglegroup="city-highlander">city1</div>
   <div id="target-city1" class="collapseomatic_content">bar1 bar2</div>
   <div class="collapseomatic" id="city2" title="city2" data-togglegroup="city-highlander">city2</div>
   <div id="target-city2" class="collapseomatic_content ">bar3 bar4</div>
</div>

<div class="collapseomatic" id="state2" title="state2" data-togglegroup="state-highlander">state2</div>
<div id="target-state2" class="collapseomatic_content">
   <div class="collapseomatic" id="city3" title="city3" data-togglegroup="city-highlander">city3</div>
   <div id="target-city3" class="collapseomatic_content">bar5 bar6</div>
   <div class="collapseomatic " id="city4" title="city4" data-togglegroup="city-highlander">city4</div>
   <div id="target-city4" class="collapseomatic_content">bar7 bar8</div>
</div>
Posted on

Collapse-Pro-Matic Roll Your with Scroll To Elements

The roll-your-own method has already been documented, however, what if you wanted to create your own sroll-to targets for each element? How can we do this with roll-your-own?

First we create an example using the shortcode:

[expand title="trigger text" findme="auto"]hidden content[/expand]

trigger text
hidden content

Now we re-create that using the roll-your own elements:

The Trigger

<div class="collapseomatic find-me" id="my_example" title="trigger text" data-offset="-60" data-findme="auto">trigger text</div>
trigger text

The Target

<div id="target-my_example" class="collapseomatic_content ">Target Content</div>
Target Content
Posted on

Print-O-Matic External Buttons

this is a test element


As of version 1.6.7c we introduced a new printstyle value ‘external’ for Print-O-Matic. Now it is possible to create an external button to trigger a print in a less-hacky way. Here is an example of this works: To print the following div with an id of ‘print_me_please’:

<div id="print_me_please">This is our target print element</div>

First we create a kind of roll-your-own print trigger. The details that must be included are:

  1. a unique id
  2. a print-o-matic class such as printomatic or printomatictext
  3. a data-print_target attribute

For example:

<button id="my_print_button" class="printomatic" data-print_target="#print_me_please">Print Trigger</button>

Which will output:

The final thing we need to do is include a hidden print trigger using a print-me shortcode with the same id as our external trigger and the new external printstyle attribute. This shortcode must be placed someplace on the same page, and will load in all the required scripts and settings to make the print trigger work correctly.

[print-me id="my_print_button" printstyle="external"/]


This shortcode will not output anything to the page.
That’s it. You are done! Let us know on the WordPress Support Forum if you require any further assistance.

Posted on

Collapse-O-Matic Grouping and Expandall Issues

If we set up two groups for the sole purpose of creating expand/collapse all triggers that will only expand/collapse the related group we currently have to create something like:

Science Fiction:

[expand title="Star Wars" rel="fiction"]Alliance to Restore the Republic vs. Galactic Empire[/expand]
<span class="expandall" rel="fiction">Expand All Science Fiction</span>
<span class="collapseall" rel="fiction">Collapse All Science Fiction</span>

Pure Science:

[expand title="Space Race" rel="history"]USA vs. USSR[/expand]
<span class="expandall" rel="history">Expand All Pure Science</span>
<span class="collapseall" rel="history">Collapse All Pure Science</span>

Rel Example:

Science Fiction

  • Star Wars
    Alliance to Restore the Republic vs. Galactic Empire
  • Star Trek
    United Federation of Planets vs. Klingon Empire vs. Romulan Star Empire vs. Cardassian Union vs. the Borg vs. the Dominion
  • Battlestar Galactica
    Twelve Colonies vs. Cylon Empire

Expand All Science Fiction
Collapse All Science Fiction

Pure Science

  • Space Race
    USA vs. USSR
  • Ansari X Prize
    Scaled Composites vs. Many Others

Expand All Pure Science
Collapse All Pure Science

So this works, but what if we do NOT what the expanding of one group to automatically collapse any open items of other groups?

As of Collapse-O-matic version 1.7.1, two new attributes have been introduced to deal with exactly this issue. For the shortcode:
togglegroup='your_group_name'
and for the roll-your-own method:
data-togglegroup='your_group_name'

Science Fiction:

[expand title="Star Wars" togglegroup="fiction"]Alliance to Restore the Republic vs. Galactic Empire[/expand]
<span class="expandall" data-togglegroup="fiction">Expand All Science Fiction</span>
<span class="collapseall" data-togglegroup="fiction">Collapse All Science Fiction</span>

Pure Science:

[expand title="Space Race" togglegroup="history"]USA vs. USSR[/expand]
<span class="expandall" data-togglegroup="history">Expand All Pure Science</span>
<span class="collapseall" data-togglegroup="history">Collapse All Pure Science</span>
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" togglegroup="history"/]

Group Example:

Science Fiction

  • Star Wars
    Alliance to Restore the Republic vs. Galactic Empire
  • Star Trek
    United Federation of Planets vs. Klingon Empire vs. Romulan Star Empire vs. Cardassian Union vs. the Borg vs. the Dominion
  • Battlestar Galactica
    Twelve Colonies vs. Cylon Empire

Expand All Science Fiction
Collapse All Science Fiction

Pure Science

  • Space Race
    USA vs. USSR
  • Ansari X Prize
    Scaled Composites vs. Many Others

Expand All Pure Science
Collapse All Pure

Expand All*

Adding Highlander Grouping:

[expand title="Monkey" togglegroup="animal" rel="animal-highlander"]monkeys are fast[/expand]
[expand title="Donkey" togglegroup="animal" rel="animal-highlander"]donkeys are strong[/expand]
<span class="expandall" data-togglegroup="animal">Expand All Animals</span>
<span class="collapseall" data-togglegroup="animal">Collapse All Animals</span>
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" togglegroup="animal"/]
  • Monkey
    Monkeys are fast
  • Donkey
    Donkeys are strong

Expand All Animals
Collapse All Animals

Expand All*

*collapse-pro-matic only

Posted on

Wonky Submit & Print-Pro-Matic Button

This is a Dr. Frankenstein experiment with Contact Form 7’s Submit button and the Print-Pro-Matic Print external trigger. When the user clicks submit, the form should also force-launch the print dialogue. Years of working in UI tells us NOT do this, but people still have music playing on page load, so what do we know.

[[contact-form-7 id="1018" title="SubPrint"/]]

To cross-breed the Submit button with the print-pro-matic print trigger, just follow the following steps.

  1. In the form: add a cf7 submit/print button, and assign it a unique ID (in this case subprint) and a class of printme_trigger like so:
[submit id:subprint class:printme_trigger]
  1. In the post that the form shortcode is displayed on: simply target the form to be printed and assign the external_trigger attribute the id of the external print/submit button:
[print-me target="#wpcf7-f1018-p2316-o1i" external_trigger="subprint"/]

Update: Submit & Print With Validation

The above will work nicely if there is no validation to consider. However if we only want to print the form after it has passes validation we need another approach.

First: We will not actually have the print triggered via clicking the submit button, so we can remove the id and class in the submit tag in the form:

[submit]

If the submit button does not trigger the print what will? If you notice in the Contact Form 7 edit page, there is an Additional Settings tab. Here we can use Contact 7 own on_sent_ok: to trigger the print like so:

on_sent_ok: "print_trigger('my_print_trigger');"

Now, finally, we must provide an ID to our hidden print-me shortcode:

[print-me id="my_print_trigger" target="#wpcf7-f1018-p2316-o1" external_trigger="on_sent_ok"/]

Demo

deactivated due to spam abuse.
[[contact-form-7 id=”1018″ title=”SubPrint”/]]