Simple example of using Collapse-Commander with sub-elements:
[expand cid="3279" /]Master Blaster
Since 1.3.3 we can use order and orderby attributes
[expand cid="3279" orderby="title" order="ASC" /]
Master Blaster
Print-Pro-Matic Print External URL
This is a test to see if print-pro-matic can print an external URL:
[print-me url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSC6kmo4lmXRBc7QHMmg_s2Dq4LBg0FHclszFjAhCW_wYo814nBWM_mQhAryRayPNdQJLCXw0gNVbPo/pubhtml"/]
There will be an issue with cross domain origin, however a url on the same domain can be printed:
[print-me url="https://spacedonkey.de/donkey/donkey-in-a-bucket/"/]Print-O-Matic non existing element test
This is a test to see how print-o-matic and print-pro-matic handle targeting a non-existing element:
No element? no problem… do nothing.
Now what happens if we have one element that does not exist in a list of elements:
This is a little div with an id of ‘printbox’
Print-O-Matic External Print Trigger – Target by Class
As of print-o-matic version 2.0.1 the ability to use class to target a print element in external print triggers has been added. Basically it works the same as using the data-print_target attribute but instead uses a unique classname in the format of printtarget-<target_id>.
Step 1
Create a target element. The element below is a div with an id of ‘my_print_target’:
<div id="my_print_target">This is the print target wrapped in a div with an element of 'my_print_target' as explained above</div>This is the print target wrapped in a div with an element of ‘my_print_target’ as explained above
Step 2
Add an external trigger using the new class-trigger method. We’ll use a simple button like so:
<button id="my_print_button" class="printomatic printtarget-#my_print_target">Print Trigger</button>
Step 3
Like in the original example, we need to add the hidden print trigger using a print-me shortcode with the same id as our external trigger and a printstyle=”external” attribute:
[print-me id="my_print_button" printstyle="external"/]Collapse-O-Matic and Easy Footnotes Test
This is a test of how collapse-o-matic and easy footnotes can work togher. We have modified the Easy Footnotes[note]Easy Footnotes on the WordPress Plugin Repo at: https://wordpress.org/plugins/easy-footnotes/[/note] plugin to allow for filtering before and after the footnote content. The modified plugin is available at Github [note]https://github.com/baden03/easy-footnotes [/note]
The filters used as follows:
add_filter( 'before_footnote', 'pre_footnote', 1);
function pre_footnote($footnote_content) {
$footnote_content .= 'content to place before the footnotes';
return $footnote_content;
}
add_filter( 'after_footnote', 'post_footnote', 1 );
function post_footnote($footnote_content) {
$footnote_content .= 'content to place after the footnoes';
return $footnote_content;
}
Collapse Pro Matic – Scroll Target
Scroll to here on close
The above will be used as our ‘scroll target’ and was created using the following:
<h2 id="scroll2me">Scroll to here on close</h2>The scrolltarget attribute allows any external element to be used as the location to scroll to for scroll-on-close triggers. The scrolltarget attribute accepts any jQuery selector by ID (#id_name), class (.class_name), or element tag (article).
For example:
scrolltarget="#my_id" would target a unique element that has an ID of my_id.
[expand title="R2D2 Wiki" ID="r2d2wiki" scrolltarget="#scroll2me"]
...
<span class="collapseomatic colomat-close scroll-to-trigger" id="bot-r2d2wiki">click here to close & scroll to target</span>
[/expand]R2D2 Wiki
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.
- 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]
- 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”/]]
Adding Collapse-O-Matic to Static HTML
Collapse-O-Matic is a WordPress plugin. But what if you wanted to use it on a static HTML page?
Well, that just might work.
Step 1: make sure jQuery is installed
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Step 2: install collapse.js
You will need to download the latest version of Collapse-O-Matic and then find and upload just the collapse.js file. It’s located in the js sub-folder.
<script src="http://yourdomain.com/path_to_js/collapse.js"></script>
Step 3: Use the Roll-Your-Own Method
Now that you have all the jQuery scripts installed, you can simply follow the standard roll-your-own method to create the expand elements.
Good luck!
T(-) Countdown Control Seconds Only
[tminus cid="1451" omitweeks="true" omitdays="true" omithours="true" omitmins="true"]
Collapse-Pro-Matic Expand_On Attribute
[expand title="Trigger Text" expand_on="is_search"]Target Text[/expand]
Trigger Text
This new conditional expand feature is based on a request by user thisimnot. We introduce a new attribute called expand_on that accepts a comma separated list of WordPress Conditional Tags that will auto-expand the element if true.
For example. The following element should be displayed as collapsed when viewing the front (blog) page, but when viewing the single post or the search results page it will be shown as expanded.
[expand title="Trigger Text" expand_on="is_single, is_search"]Target Text[/expand]
Trigger Text
Adding Custom Conditional
To create a custom conditional that checks for a custom query_var, for example, is_hilite:
Step 1: Place the following in your child theme’s function.php file:
//Add query vars
add_filter( 'query_vars', 'my_query_vars' );
function my_query_vars( $qvars ) {
$qvars[] = 'hilite';
return $qvars;
}
//Add custom hilite conditional
function is_hilite(){
if(get_query_var( 'hilite')){
return true;
}
return false;
}The shortcode:
[expand title="Trigger Text" expand_on="is_hilite"]Target Text[/expand]Example:
Trigger Text
Here, at the very bottom of this page is a little collapse element to test the internal WordPress Search.
grapple