Month: February
January 2016
March 2016

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 Commander Templates

Test of the new Template feature in Collapse Commander. Template 1885 should expand the target above the trigger.

[expand title="Trigger Text" template_id="1885"]This is a test using template number 1885[/expand]
Trigger Text
This is a test using template number 1885

Example using cid:

[expand cid="2039"/]

Alt Test

This is a test of the alt tag in a expand element

Expand Trig:

I’m a little donkey

Expand Targ:

short and stout
short and stout
Stuck in a manhole cover until someone pulled me out.
Posted on

Collapse-O-Matic ID Tag In Link

A quick example of how to link to—and autoexpand—a collapse-o-matic element on the same page. Key: Assign the link a class of expandanchor like so:

[expand title="question 1" id="q1"]answer 1[/expand]
[expand title="question 2" id="q2"]answer 2[/expand]
[expand title="question 3" id="q3"]answer 3[/expand]
<a class="expandanchor" href="#q1">question 1</a>
<a class="expandanchor" href="#q2" rel="m_PageScroll2id">question 2</a>
<a href="#q3">question 1</a>
question 1
answer 1
question 2
answer 2
question 3
answer 3
question 1
question 2 (page scroll 2 id)
question 3 (no expandanchor class)