Author: admin
May 2014
July 2014

Posted on

Collapse-O-Matic Scroll On Close Demos

We need some filler text here. Rather than use the boring latin placeholder text here are a few facts about:

The Millennium Falcon

The Millennium Falcon, originally known as YT-1300 492727ZED, was a modified YT-1300 light freighter with a storied history stretching back to the decades before the Clone Wars and the rise of the Galactic Empire. Manufactured by the Corellian Engineering Corporation in 60 BBY, the light freighter was first owned by Corell Industries Limited and underwent several name changes before being bought by the smugglers Kal and Dova Brigger in 48 BBY, and the ship eventually ended up as the property of the secretive Republic Group under the name Stellar Envoy by 29 BBY. The Envoy was destroyed in a collision with a bulk freighter above Nar Shaddaa, but it was rebuilt and served various owners under different names before Quip Fargil named it after the bat-falcon, and it eventually fell into the hands of Lando Calrissian after a game of sabacc—but Calrissian himself lost the ship in another game of sabacc to the smuggler Han Solo several years later.
Source: Wookieepedia

[expand title="Close-n-Scroll" scrollonclose="500"]Closing this will auto scroll the element to 500 pixels from the top.[/expand]

Close-n-Scroll
Closing this will auto scroll the element to 7000 pixels from the top of the page.

[expand title="Close-n-Scroll Auto" scrollonclose="auto"]Closing this should auto scroll the page so the element is displayed at the top of the page.[/expand]

Close-n-Scroll Auto
Closing this should auto scroll the page so the element is displayed at the top of the page.

[expand title="R2D2 Wiki" id="r2d2wiki"]Target Content <span class="collapseomatic colomat-close scroll-to-trigger" id="bot-r2d2wiki">click here to close & scroll to triggere</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

Posted on

Print-O-Matic Multiple Targets

This is some text that is wrapped in an element with a class of elem1

This is some other text that is just out flapping in the wind, not being wrapped up by anything.

This is some more text that is also wrapped up in an element, but this time with a class of elem2

[print-me target=".elem1" /]

Print elem1

[print-me target=".elem2" /]

Print elem2

[print-me target=".elem1, .elem2" /]

Print Both

Print Article and Element 1

Posted on

Print-O-Matic Print Previous Element

The idea behind this feature comes form walpap on this thread.

Well, let’s see what it would take to do this. First we need to have a few paragraphs of text, this being the first. The idea is that after this sentence we will place a print-me shortcode and some funky targeting placeholder that will tell the function to print the element immediately preceding the print button.

Our first idea was to use %prev% as a place holder that sets the target to the element above the print button. We could also define %next% to print the element immediately following a print button.

This is an example of a text block that can be printed by clicking the print button placed at the start of this sentence. Now first lets see what this all looks like when the buttons are placed inline like that. One thing to keep in mind when using next, is the text to print must be placed in an element. For example between two p or span tags.

Posted on

Collapse-Pro-Matic Improved Expand/Collapse/Toggel All

expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the third expand item
expand 4
this is the forth expand item

expand 5 my_group
this is the first expand item
expand 6
this is the second expand item
expand 7
this is the third expand item
expand 8
this is the forth expand item

Expand All
Collapse All

Expand All
Expand 5-8
Collapse 5-8
Expand 5-8

Posted on

Collapse-Pro-Matic Setall Expand/Collapse Toggle

This is an example of the expand all/collapse all trigger using the setall trigclass:

[expand title="Expand All" swaptitle="Collapse All" trigclass="setall"/]
[expand title="expand 1"]this is the first expand item[/expand]
[expand title="expand 2"]this is the second expand item[/expand]
Expand All
expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the third expand item
expand 4
this is the forth expand item

Now, what if all items where expanded one by one… then we would want the setall trigger to know this and auto switch to the collapse all function. To do this we would need to associate them to the same group using the rel grouping attribute:

[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" rel="my_group"/]
[expand title="expand 1" rel="my_group"]this is the first expand item[/expand]
[expand title="expand 2" rel="my_group"]this is the second expand item[/expand]
Expand All
expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the third expand item
expand 4
this is the forth expand item

Group and Toggle Group

[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" group="my_group2"/]
[expand title="expand 1" group="my_group2"]this is the first expand item[/expand]
Expand All
expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the third expand item
expand 4
this is the forth expand item
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" togglegroup="my_group3"/]
[expand title="expand 1" togglegroup="my_group3"]this is the first expand item[/expand]
Expand All
expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the third expand item
expand 4
this is the forth expand item

Testing Continues Here and also on this post

Posted on

Collaspe-O-Matic In Comments

This is a test using the Collapse-Pro-Matic / Collapse-O-Matic plugin in the comments area.

1. Does the shortcode work in the comments? Probably not by default. Let’s see.
[expand title="Read More"]This is the expanded text of the comment. I have a good feeling this will not be allowed by default.[/expand]
Nope.

2. Does the shortcode work when the following is added to the functions.php file?
add_filter( 'comment_text', 'do_shortcode' );
Yes is does.

Posted on

Swapexcerpt Test

Shortcode Method

Here we use both the swaptitle and swapexcerpt attributes to define the alternate trigger text and excerpt text. Note that the text is immediately replaced with no slide or fade effects.

[expand title="Trigger 1" swaptitle="Trigger 2" excerpt="This is the content that will be shown While Trigger 1 is displayed" swapexcerpt="This is the content that will be shown While Trigger 2 is displayed" trigclass="noarrow"][/expand]

Trigger 1
This is the content that will be shown While Trigger 1 is displayed

Roll-Your-Own Method

Here we define:

  1. Original Trigger Text
  2. Swap Trigger Text
  3. Original Excerpt Text
  4. Swap Excerpt Text

<div class="collapseomatic noarrow" id="some_unique_id" title="Trigger 1">Trigger 1</div>

<div id='swap-some_unique_id' style='display:none;'>Trigger 2</div>

<div id="excerpt-some_unique_id" class="collapseomatic_excerpt ">This is the content that will be shown While Trigger 1 is displayed</div>

<div id="swapexcerpt-some_unique_id" style="display:none;">This is the content that will be shown While Trigger 2 is displayed</div>

Trigger 1
This is the content that will be shown While Trigger 1 is displayed

New Toggle Target Feature: swaptarget

Now for a new feature that allows us to use a single trigger with a swaptitle that toggles between two targets. This first example will use both the shortcode and a bit of roll-your-own trickery.

1. create the initial expand element with a unique id and a swaptitle:

[expand id="bert" title="Trigger 1" swaptitle="Trigger 2" trigclass="noarrow"]This is the Content that will be shown while Trigger 2 is displayed[/expand]

2. create second target area and assign it an id of swaptarget-name_of_first_target. also it must have a class of both collapseomatic_content and colomat_close:

<div id="swaptarget-bert" class="collapseomatic_content colomat_close">This is the Content that will be shown while Trigger 1 is displayed</div>

Trigger 1
This is the Content that will be shown while Trigger 2 is displayed

This is the Content that will be shown while Trigger 1 is displayed

Swaptarget Roll-Your-Own Method

This final example is how you could accomplish the same as above using only the roll-your-own method:

<div class="collapseomatic noarrow" id="ernie" title="Trigger 1">Trigger 1</div>

<div id='swap-ernie' style='display:none;'>Trigger 2</div>

<div id="target-ernie" class="collapseomatic_content ">This is the Content that will be shown while Trigger 2 is displayed</div>

<div id="swaptarget-ernie" class="collapseomatic_content colomat_close">This is the Content that will be shown while Trigger 1 is displayed</div>

Trigger 1
This is the Content that will be shown while Trigger 2 is displayed
This is the Content that will be shown while Trigger 1 is displayed. This will have a bit more content than the toggled version simply because we want to test a method that prevents the content below from bouncing up and down with the toggle. One idea would be to wrap this in a Div and give it a fixed height. Let’s start here and see what we can do.

New Fixed Height Feature: lockheight

Here we have the ability to lock the height of the largest target div so as we toggle between targets the height stays fixed. This is accomplished by wrapping the target divs in a lockheight div as follows:

<div class="collapseomatic noarrow" id="bigbird" title="Trigger 1">Trigger 1</div>

<div id='swap-bigbird' style='display:none;'>Trigger 2</div>

<div id="lockheight-bigbird">

<div id="target-bigbird" class="collapseomatic_content ">This is the Content that will be shown while Trigger 2 is displayed. This will have a bit more content than the toggled version simply because we want to test a method that prevents the content below from bouncing up and down with the toggle. One idea would be to wrap this in a Div and give it a fixed height. Let's start here and see what we can do.</div>

<div id="swaptarget-bigbird" class="collapseomatic_content colomat_close">This is the Content that will be shown while Trigger 1 is displayed.</div>

</div>

Trigger 1
This is the Content that will be shown while Trigger 2 is displayed. This will have a bit more content than the toggled version simply because we want to test a method that prevents the content below from bouncing up and down with the toggle. One idea would be to wrap this in a Div and give it a fixed height. Let’s start here and see what we can do.
This is the Content that will be shown while Trigger 1 is displayed.
Posted on

Collapse-Pro-Matic Expand UP Test

Above and Beyond

In this example we simply add the trigpos=”below” to place the trigger below the target area:

[expand id="aboveandbeyond" title="Above & Beyond" trigpos="below"]This is an example of an expand element that has the trigger below the target.[/expand]

This is an example of an expand element that has the trigger below the target.
Above & Beyond

Up Up & Away

In this example we will use the roll-your-own method to not only place the trigger below the target, but also:

  1. position the target absolutely so that the trigger does not move down
  2. attempt to make the content animate UP from the trigger

HTML
<div id="absolute">
<div id="target-upaway" class="collapseomatic_content">This is an example of an expand element that will "Slide Up" on top of the trigger when expanded and "Slide Down" into the trigger when collapsed.</div>
<div id="upaway" class="collapseomatic">Up Up & Away</div>
</div>

Notice that we have wrapped both the target and trigger elements in a div that has been assigned the id of “absolute”. We give this wrapping div absolute positioning and anchor it so many pixels off the bottom of the page using the following CSS:

CSS
#absolute {
position: absolute;
bottom: 60px;
padding-bottom:2%;
z-index: 100;
}

This is an example of an expand element that will “Slide Up” on top of the trigger when expanded and “Slide Down” into the trigger when collapsed.
Up Up & Away