Collapse-O-Matic Nested SwapTitles

[expand title="Fiction" rel="fiction" swaptitle="Is like non-non-fiction"]
[expandsub1 title="Star Wars" rel="submenu-highlander" swaptitle="Hyperspeed" expanded="true"]Target Content[/expandsub1]
[expandsub1 title="Star Trek" rel="submenu-highlander" swaptitle="Warpspeed"]Target Content[/expandsub1]
[/expand]

Fiction

Star Wars
Target Content

Star Trek
Target Content

T(-) Countdown Time Sync Issue

Test of a new system of recalculating the remaining time to make sure timers stay in sync.

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

T(-) Countdown Control – Separating the Time Units

Normally a countdown groups the units of time (weeks, days, hours, minutes and seconds) into a single countdown unit. But what if you wanted to break out these units and have them displayed on different parts of the page?

Step One. We will need to add a new attribute that tells the countdown NOT to display any of the digits. This way all the countdown scripts and details are still loaded, but the countdown is not displayed. Something like:

[tminus cid="123" hidden="true" style="cloud-city"/]

Step Two. A new shortcode will need to be created for displaying the time unit. We will need to know the countdown id (cid) the time unit to be displayed, and the style to be used, if other than the default style set up on the plugin settings. If a custom style is used it must be defined in both the countdown and the units like so:

[[tminus_digit cid="123" unit="hours" style="cloud-city"/]]

The final set will be to modify the countdown script to locate the time units, even if they are not wrapped in a countdown dashboard.

Let’s get started.

Here is a hidden countdown:

Now we add all the digits, starting with weeks:
[tminus_digit cid=”281″ id=”explode” unit=”weeks” style=”cloud-city” omitweeks=”false”/]

Days:
[tminus_digit cid=”281″ id=”explode” unit=”days” style=”cloud-city”/]

Hours:
[tminus_digit cid=”281″ id=”explode” unit=”hours” style=”cloud-city”/]

Minutes:
[tminus_digit cid=”281″ id=”explode” unit=”minutes” style=”cloud-city”/]

Seconds:
[tminus_digit cid=”281″ id=”explode” unit=”seconds” style=”cloud-city”/]

Print-Pro-Matic: Add PDF to Print Page

The following is an example of how to add a pdf document to be printed along with a target using the new add_print_url attribute.

First, we need a simple target to print:

<div id="print_target">This is the simple print target for the page</div>

Now, we simply add our print-me shortcode and use the add_pdf_url attribute to include a pdf document to be printed:

[print-me target="#print_target" add_pdf_url="https://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf" pause_time="3000"/]

Direct PDF Print

As of version 1.2.6 we have introduced a new shortcode to print-pro-matic, just for printing PDFs.Note: the ability to print pdf files from javascript is currently not supported in FireFox. Therefore the PDF will open in a new tab and the user can print from there.

[print-pdf pdf_url="https://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf"/]

This will produce a simple button that will print the pdf:

The optional attirbutes for the print-pdf shortcode are as follows:
id
The ID attribute will assign a custom ID to the button. If no ID is assigned a random id will be assigned.

title
The title attribute will assign the text of the print button. If no title is assigned, the button will have the tex of: ‘Print PDF’

class
The class attribute will assign the button a custom class.

tag
The tag attribute will change the trigger element from the default button to, say a div. For example:

[print-pdf pdf_url="url_to_pdf" tag="div"/]

img_url
The img_url attribute is used to define the image URL to use as a trigger. Using a trigger image will override standard print trigger, replacing it with the chosen image.

[print-pdf img_url="url_to_trigger_image"/]

width
Use the width attribute along with the img_url to define the image width.

height
Use the height attribute along with the img_url to define the image height.

alt
Use the alt attribute along with the img_url to define the image alt value.

Demo of Trigger Image:

[print-pdf img_url="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" alt="" width="600" height="447" pdf_url="https://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf"]

redirect_url
Full url to redirect the user to after either a) the print dialogue closes or b) the pdf is loaded into a new tab (depending on which browser is being used)

[print-pdf pdf_url="url_to_pdf" redirect_url="http://starwars.wikia.com/wiki/Main_Page"/]

Putting it all Together

Here we will have a trigger image that redirects on print close:

[print-pdf img_url="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" alt="" width="600" height="447" pdf_url="https://spacedonkey.de/wp-content/uploads/2012/06/RomeSweetRome1-8v22.pdf" redirect_url="http://starwars.wikia.com/wiki/Main_Page" title="Ninja Power"]

Collapse-O-Matic External Triggers for Nested Element

Here is a nested expand to test this issue.

[expand title="Level 1" id="q1" rel="top-highlander" trigclass="must-be-one" expanded="true"]
   [expandsub1 title="Nested Level a1" id="a1" rel="a-highlander"]answer a1[/expandsub1]
   [expandsub1 title="Nested Level a2" id="a2" rel="a-highlander"]answer a2[/expandsub1]
[/expand]
[expand title="Level 2" id="q2" rel="top-highlander" trigclass="must-be-one"]
   [expandsub1 title="Nested Level b1" id="b1" rel="b-highlander"]answer b1[/expandsub1]
   [expandsub1 title="Nested Level b2" id="b2" rel="b-highlander"]answer b2[/expandsub1]
[/expand]

Level 1

Nested Level a1
answer a1

Nested Level a2
answer a2


Level 2

Nested Level b1
answer b1

Nested Level b2
answer b2

Here are some external triggers:

<a class="expandanchor" href="#q1">Level 1</a>
<a class="expandanchor" href="#a1">Level 1a</a>
<a class="expandanchor" href="#a2">Level 1b</a>
<a class="expandanchor" href="#q2">Level 2</a>
<a class="expandanchor" href="#b1">Level 2a</a>
<a class="expandanchor" href="#b2">Level 2b</a>

Level 1
Level 1a
Level 1b
Level 2
Level 2a
Level 2b

T(-) Countdown Control – Calculating Labor Day & Other Holidays

Using the new %this year% and %this_easter% placeholders introduced with T(-) Countdown Control version 1.8.0, it’s easy to calculate holidays such as labor day like so:

Launch Strtotime: september %this_year% first monday

As of version 1.8.2, using these shortcodes will automatically recalculate for next year’s date after the holiday has past. Holidays should be set as recurring ‘Yearly’ and they will automatically be rescheduled for next year.

Other Holidays can be calculated in the same manner:

  • New Years: first day of january %this_year%
  • Martin Luther King, Jr. Day: january %this_year% third monday
  • President’s Day: february %this_year% third monday
  • Easter: %this_easter%
  • Ascension Day: %this_easter% + 40 days
  • Pentecost: %this_easter% + 50 days
  • Memorial Day: last monday of may
  • Independence Day: july 4 %this_year%
  • Labor Day: september %this_year% first monday
  • Columbus Day: october %this_year% second monday
  • Veteran’s Day: november 11 %this_year%
  • Thanksgiving Day: november %this_year% fourth thursday
  • Christmas Day: december 25 %this_year%

Tests

Ascension Day

Years
0
0
Months
0
5
Weeks
0
1
Days
0
2
Hours
0
9
Minutes
2
4
Seconds
5
2

Eight Days before Thanksgiving

november %this_year% fourth thursday + 14 hours 30 minutes – 8 days

Years
0
0
Months
1
1
Weeks
0
1
Days
0
6
Hours
2
3
Minutes
5
4
Seconds
5
2

Print-Pro-Matic Advanced External Triggers

There are times when it would be nice to turn ANY element into an external print trigger. This is a feature often asked for when trying to hook up a Visual Editor button to be a print trigger. As of Print-Pro-Matic v 1.1.4e we have added:

  • new printme_trigger class that turns anything into a print trigger
  • new external_trigger shortcode element to enter the id or ids of the element(s) that should be used as an external trigger

And this is how it works:

First we need an element that has a unique id. There must also be the ability to add the printme_trigger class to it.

<button id="my_button" class="printme_trigger">Print</button>

Next we add the print-me shortcode like normal… but also add the external_trigger attribute like so:

[print-me target="#intro_text" external_trigger="my_button"/]

And that’s it! Note: The external_trigger attribute can accept a comma separated list of multiple id’s. Also: When an external_trigger attribute is assigned, no standard print-pro-matic icon or text will be displayed, as the external trigger will be used instead.

Collapse-Pro-Matic Advanced External Triggers

There are times when it would be nice to turn ANY element into an external trigger for a collapse element. So as of Collapse-Pro-Matic v 1.2.9f we have added:

  • new colomat_trigger class that turns anything into a trigger
  • new external_trigger shortcode element to enter the ids of the elements that should be used as an external trigger
  • new data-external-element attribute that can be used for roll-your-own collapse elements
  • new colomat_expand_only class that prevents the external trigger from collapsing the target, only expand
  • new colomat_collapse_only class that prevents the external trigger from expanding the target, only collapse

And this is how it works:

take any element, make sure it has a unique id and the colomat_trigger class assigned.

<h4 id="funkmaster" class="colomat_trigger">Bootsy</h4>

Bootsy

additional external link can be assigned, and external links that will only expand (not collapse) the target:

<h4 id="flash" class="colomat_trigger colomat_expand_only">Grandmaster Flash</h4>

Grandmaster Flash

Next, assign the ID of the external id (or multiple ids) using the external_trigger attribute:

[expand title="Who has the funk?" external_trigger="funkmaster flash"]You got the funk![/expand]

Who has the funk?
Glory be, baby, you got the funk!

Collapse-Pro-Matic Class Triggers

As of version 1.3.2 of Collapse-Pro-Matic an external trigger can also be assigned to any element using only class names. For example, using a WordPress menu element, where only the classes can be assigned. The following classes must be added to the trigger:

  • collapseomatic
  • noarrow
  • colomatclasstrigger
  • colomatid-[the_target_id]

[expand title="This is the Master Trigger" id="multi-trigger"]

This is the Master Trigger
This is some text that when you click on the trigger you are able to read with your eyes. Well, your eyes are able to see the text, but I guess it’s actually your brain that reads the words and makes sense of them. But jokes on you! There is no sense to be made from these words because they are just pure jibber-jabber.

Links

The following is a link that has an href attribute of “#multi-trigger” and a class of “expandanchor”. Clicking this will scroll-to and expand-only the element.

<a class="expandanchor" href="#multi-trigger">Anchor Link to Multi-Trigger%lt;/a>

Anchor Link to Multi-Trigger

Buttons

Buttons are not links, however if it contains the same href and class values as the link above it will expand-only the target, just not scroll to it.

<button class="expandanchor" href="#multi-trigger">Button to Multi-Trigger</button>

Buttons Wrapped in a Link

This is basically a button that is wrapped in a link described above. Notice that the text link must be clicked, not the button.

<a class="expandanchor" href="#multi-trigger"><button>Anchor Button linked to Multi-Trigger</button></a>

Link Wrapped in a Button

This is a link that is wrapped in a button as described above:

<button><a class="expandanchor" href="#multi-trigger">Button Anchor linked to Multi-Trigger</a></button>

Special Applications: Buttons

Here are a few ordinary buttons, each assigned with a) a unique id, and b) colomat_trigger colomat_expand_only and snap-shut classes like so:

<button id="button_one" class='colomat_trigger colomat_expand_only snap-shut'>Button One</button>

Each button needs to correspond to a target. Normally to create the target it would be part of the trigger but we add the narrow and hidden classes using the trigclass attribute and remove the target padding using the targclass attribute like so:

[expand title="Button 1" external_trigger="button_one" rel="buttons-highlander" trigclass="noarrow hidden" targclass="no_left_margin"]Button One[/expand]

We then added the following CSS under the Custom CSS area of the theme (if available) or the collapse-pro-matic plugin settings:

.hidden {
   display: none;
}
.no_left_margin {
   margin-left: 0;
}

Content One

Content Two

Content Three