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 Footnotes1 plugin to allow for filtering before and after the footnote content. The modified plugin is available at Github 2

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
R2-D2 (phonetically spelled Artoo-Detoo, and called “R2” or “Artoo” for short) is a robot character in the Star Wars universe. An astromech droid (referred to in the novel as a ‘thermocapsulary dehousing assister’), R2-D2 is a major character in all six Star Wars films. Along with his protocol droid companion C-3PO, he joins or supports Anakin Skywalker, Luke Skywalker, Princess Leia, and Obi-Wan Kenobi in various points in the saga. R2-D2 was played by Kenny Baker. Along with Anakin Skywalker (Darth Vader), Obi-Wan Kenobi, and C-3PO, he is one of only four characters to appear in all six Star Wars films.
R2-D2 was designed by John Stears and Tony Dyson specially created by Australian firm Petric Engineering and English firm C&L Developments. Many scenes also made use of radio controlled and CGI versions of the character. Both the original props of R2-D2 and C-3PO used in filming are used as audio-animatronics in the queue area of Disneyland’s Star Tours ride.

Design

George Lucas’s creation of R2-D2 was influenced by Akira Kurosawa’s 1958 feature film The Hidden Fortress (USA release 1962), particularly Tahei and Matakishi, the two comic relief characters that serve as sidekicks to General Makabe. Lucas also drew inspiration from the robots Huey, Dewey, and Louie from Douglas Trumbull’s 1972 film Silent Running.
The name is said to derive from when Lucas was making one of his earlier films, American Graffiti. Sound editor Walter Murch states that he is responsible for the utterance which sparked the name for the droid. Murch asked for Reel 2, Dialog Track 2, in the abbreviated form “R-2-D-2”. Lucas, who was in the room and had dozed off while working on the script for Star Wars, momentarily woke when he heard the request and, after asking for clarification, stated that it was a “great name” before falling immediately back to sleep.[1]
R2-D2 stands for Second Generation Robotic Droid Series-2, according to a Star Wars encyclopedia published after the release of the film Star Wars: A New Hope.

Original trilogy

In Star Wars Episode IV: A New Hope, both R2-D2 and C-3PO are introduced on board the Tantive IV, along with Princess Leia of Alderaan, when they are fired upon by an Imperial Star Destroyer. Leia jams inside an opening in R2-D2 an information disc containing the plans for the Death Star battle station, along with encoding a distress message on the droid’s holographic projector. The droids then escape in a pod that crashes on Tatooine near Kenobi’s desert abode.
R2-D2 and C-3PO are then abducted by Jawas and bought by Owen Lars, step-uncle of Luke Skywalker. While Luke cleans the sand out of R2-D2’s gears, he discovers a fragment of Leia’s message, and removes the droid’s restraining bolt to see more; once free of the bolt, R2 claims to have no knowledge of the message. That night, R2 leaves the farm to seek out Obi-Wan Kenobi. Soon, by way of fate, Luke is forced to leave Tatooine with Obi-Wan, Han Solo, and Chewbacca, and they attempt to deliver R2-D2 to the Rebel Alliance. Along the way, they are pulled in by the Death Star’s tractor beam, but eventually rescue Princess Leia and escape. R2-D2 delivers the plans to the Rebel Alliance, and becomes Luke’s astromech droid during the attack on the station. R2 is severely damaged during the battle, but is restored before the ceremony at the end of the film.
In Star Wars Episode V: The Empire Strikes Back, R2-D2 accompanies Luke to Dagobah, and later to Cloud City, where he helps to rescue and repair a heavily damaged C-3PO and to override city security computers. He also manages to fix the Millennium Falcon’s hyperdrive, resulting in a last-minute escape from Imperial forces.
In Star Wars Episode VI: Return of the Jedi, R2-D2 plays a critical role in the rescue of Han, Luke and Leia from Jabba the Hutt, and later joins the Rebel strike team on Endor. He is badly damaged during the fight between the Imperial troops and the Rebels, but is repaired in time for the celebration marking the second Death Star’s destruction.
R2-D2 is male, as far as by state of androids. In A New Hope, Obi-Wan Kenobi states in gender specific, “Plug-in, he should be able to interpret the entire Imperial network.”
Source: Wikipedia
click here to close & scroll to trigger

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"/]

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!

Collapse-Pro-Matic Expand_On Attribute

[expand title="Trigger Text" expand_on="is_search"]Target Text[/expand]

Trigger Text
Target 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
Target 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
Target Text

test

Here, at the very bottom of this page is a little collapse element to test the internal WordPress Search.

grapple
It’s both a hook… and a kind of wrestling thing.

Responsive Countdown Test

Here are the responsive countdown styles.

carbonite-responsive

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
3
Seconds
0
0

cloud-city

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
4
Seconds
0
2

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Collapse-O-Matic Left And Right Arrows

Normally, expand elements display the arrow on the left:
[expand title="trigger"]target[/expand]

trigger
target

However, we can move the arrow all the way to the right by assigning the the trigger the arrowright class:
[expand title="trigger" trigclass="arrowright"]target[/expand]

trigger
target

We can move the trigger closer to the text by changing the width of the trigger element using css:

CSS
.shorty {
width: 70px;
}

[expand title="trigger" trigclass="arrowright shorty"]target[/expand]

trigger
target

What if we want both left and right arrows? We first start with a roll-your-own expand element with no arrows by assigning the noarrow class to the trigger:

<div class="collapseomatic noarrow" id="my_double_arrow_01">trigger</div>
<div id="target-my_double_arrow_01" class="collapseomatic_content">target</div>
trigger
target

Then we manually upload the arrows we want to use and place them in the title:

<div class="collapseomatic noarrow" id="my_double_arrow_02"><img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /> trigger <img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /></div>
<div id="target-my_double_arrow_02" class="collapseomatic_content">target</div>
trigger
target

Finally we need to add a swap title element for the close arrows:

<div class="collapseomatic noarrow" id="my_double_arrow_03"><img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /> trigger <img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /></div>
<div id="swap-my_double_arrow_03" alt="" class="colomat-swap" style="display:none;"><img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-up.png" width="12" height="14" /> target <img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-up.png" width="12" height="14" /></div>
<div id="target-my_double_arrow_03" class="collapseomatic_content">target</div>
trigger
target

New Plugin Test: Collapse Command

This is a test of the Collapse Command stystem:
[expand cid="1398"/]

Test Expand Element
This is the content of the expand element early_oculous
Third Example – No Content

Trigger Shortcode

[expand_trig cid="1403"]

Test Expand Two

[expand_trig cid="1398" id="monkey"]

Test Expand Element

Target Shortcode

[expand_targ cid="1403"]

And this is some crazy text with a "quote" and a 'single quote' and some other wacky characters!ΓΌ#;

[expand_targ cid="1398" id="monkey"]

This is the content of the expand element early_oculous