Collapse-O-Matic Numbers as ID Issue

This is a quick post to test the issue when using numbers as IDs as brought up in this thread:
https://wordpress.org/support/topic/multiple-titles-open-when-clicking-on-one/

To recreate this we will use two collapse elements with the ID’s of 1,2,3, 11, 12 and 13.

Trigger One
Content for ID one

Trigger Two
Content for ID two

Trigger Three
Content for ID three


Trigger Eleven
Content for ID eleven

Trigger Twelve
Content for ID twelve

Trigger Thirteen
Content for ID thirteen

The issue is the toggle selectors where using the following jQuery selector:

jQuery('[id^=target][id$='+id+']')

As of collapse-o-matic version 1.7.9 the selector is a more exact:

jQuery('#target-'+id)

T(-) Countdown Omitweeks Width Issue

This post investigates issues with the width of a countdown that has the weeks omitted. Since the width should auto-adjust based on the displayed time units.

c-3po

We’ll start with the c-3po style based on this issue on the WordPress Forums.

[tminus t="2018-04-11" omitweeks="true" style="c-3po"/]

Years
0
0
Months
0
1
Days
1
9
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Days
1
8
Hours
0
0
Minutes
0
0
Seconds
0
0

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

[tminus t="2018-04-11" omitweeks="true" style="c-3po-mini" minutes="mins." seconds="secs."/]

Years
0
0
Months
0
1
Days
2
4
Hours
0
0
mins.
0
0
secs.
0
0

Years
0
0
Months
0
3
Days
2
1
Hours
0
0
mins.
0
0
secs.
0
0

Years
0
0
Months
0
3
Weeks
0
3
Days
0
0
Hours
0
0
mins.
0
0
secs.
0
0

sith

[tminus t="2018-04-11" omitweeks="true" style="sith"/]

Years
0
0
Months
0
1
Days
1
9
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Days
1
8
Hours
0
0
Minutes
0
0
Seconds
0
0

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

carbonlite

[tminus t="2018-04-11" omitweeks="true" style="carbonlite"/]

Years
0
0
Months
0
1
Days
1
9
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Days
1
8
Hours
0
0
Minutes
0
0
Seconds
0
0

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

cloud-city

[tminus t="2018-04-11" omitweeks="true" style="cloud-city"/]

Years
0
0
Months
0
1
Days
1
9
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Days
1
8
Hours
0
0
Minutes
0
0
Seconds
0
0

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

Jedi

[tminus t="2018-04-11" omitweeks="true"/]

Years
0
0
Months
0
1
Days
1
9
Hours
0
0
Minutes
0
0
Seconds
0
0

Years
0
0
Months
0
3
Days
1
8
Hours
0
0
Minutes
0
0
Seconds
0
0

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

circle

[tminus t="2018-04-11" style="circle" omitweeks="true"/]

Years
0
0
Months
0
1
Days
1
9
Hours
0
0
Minutes
0
0
Seconds
0
0

Collapse-O-Matic Inline Trigger with Block Target

Shortcode

This is an example of some text that has a trigger placed inline, meaning that the trigger does not break the flow of the text. However, when this triggerhidden content is clicked and the target is expanded, the target would break the paragraph as a display: block element. Naturally, when the element is collapsed, the inline flow returns.

...However, when [expand tag="span" title="this trigger" targtag="span"]hidden content[/expand] is clicked...

The Roll-Your-Own Method

This is an example of some text that has a trigger placed inline, using the roll-your-own method. However, when this trigger

hidden content

is clicked and the target is expanded, the target would break the paragraph as a display: block element. Naturally, when the element is collapsed, the inline flow returns.

...However, when <span title="this trigger" class="collapseomatic" id="testme2">this trigger</span><div class="collapseomatic_content" id="target-testme2">hidden content</div>
is clicked...

Limited Time Offer Demo

This is an example of how a limited time offer would work in conjunction with content in a collapse-o-matic expand element.

This demo uses T(-) Countdown Control with a cookie that tracks when the offer expires for each unique visitor. Once the countdown reaches zero, T(-) Countdown Events will remove any special offer items.

For this demo, we’ll set the special timer for just two minutes. The offer will then be removed for 24 hours, and then after the 24 hours are past, the offer will reset.

Details
this is where the details of the special are presented

Collapse-Pro-Matic Maptastic Resize Trigger

The maptastic class has two uses.

  1. The primary use is when a shortcode or other dynamically loaded element (such as a google map, for which the class is named) needs time and space to calculate it’s display size in the target.
  2. The secondary use is to initially ‘hide’ the targets off-page when many collapse elements are being used to prevent the ‘flickering’ effect where the hidden elements are displayed while the page loads, then are hidden once the javascript is finally triggered on document load.

In this post we focus on the primary use. To demonstrate this, we are going to add a google map in a collapse element without using the maptastic class. This is a standard google map embed direct form maps.google.com:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2370.176761299221!2d9.967689000000014!3d53.55461200000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b18f6cbedab441%3A0x6678f70133d32916!2sMillerntor-Stadion!5e0!3m2!1sen!2s!4v1420013219192" width="800" height="600" frameborder="0" style="border:0"></iframe>

St. Pauli

That works fine, because the map has iframe has a specific width and height assigned.

Now we will assign a map using a google_maps shortcode and also assign the target a class of maptastic. maptastic is a class that is part of the collapse plugin:

.maptastic {
    position: absolute !important;
    left: -10000px !important;
    display:block !important;
    max-width: 9999px;
}

All together, the complete shortcode will look like this:
(this is the one we need to fix… it should work with just maptastic)

[expand title="St. Pauli" targclass="maptastic"][google_maps id="1875"][/expand]

St. Pauli
[google_maps id=”1875″]

See how the map is not the correct width? But once we resize the window it will then display correctly.

Now we are going to create a new class for our target that gives it a width of 100%

.mapclass {
   width: 100%;
}

and assign it to the target as well:

[expand title="St. Pauli" targclass="maptastic mapclass"][google_maps id="1875"][/expand]

St. Pauli
[google_maps id=”1875″]

This is the map without being placed in an expand element:

[[google_maps id="1875"]]

[google_maps id=”1875″]

This is w/o using maptastic and just using expand=”true”:

[expand title="St. Pauli" expanded="true"][google_maps id="1875"][/expand]

St. Pauli
[google_maps id=”1875″]

Everything is fine. OK… we need to tweak maptastic.

Collapse-Pro-Matic New Slide Effect: Toggle

This is a test of the new slide effect for that has been added to Collapse-Pro-Matic version 1.1.6.

For this to work on ALL expand elements, simply set the Animation Effect to Directional Slide in Collapse-Pro-Matic options page. To set only a single expand element using the shortcode, the animation_effect attribute set to ‘toggle’:

[expand title="Trigger" animation_effect="toggle" direction="left"]Target Content[/expand]
Trigger
Target Content

To best appreciate how this effect works, it would be best to create a target with a fixed width and height. Using the roll-your-own method the attributes are assigned using data-* format. Here is an example that wraps a fixed size target element in a slightly larger container:

<div class="collapseomatic" id="hortest" title="Trigger" data-animation-effect="toggle" data-direction="left">Trigger One</div>
<div style="width: 400px; height: 400px; border: 1px dotted #ccc;">
<div id="target-hortest" class="collapseomatic_content" style="width: 300px; Height: 300px; background: #ccc;">Target Content</div>
</div>
Trigger One
This is the target content div that is linked to the trigger one above. It is wrapped in a div so that there is no change to the vertical size of the page when it slides on and off.
Trigger Two
This example has no wrapping div, lets see what happens to the vertical scroll of the page when it slides on and off page.

Collapse-Pro-Mtic 1.1.6 includes three new attributes that override the global default settings, allowing single expand elements to have there own animation-effect, distance and direction attributes. Using the roll-your-own method they defined using the data-* attribute like so:

<div class="collapseomatic" id="hortesthree" title="Trigger" data-animation-effect="toggle" data-direction="right">Trigger Three</div>
Trigger Three
This example should slide in from the right
Trigger Four
This example should slide both… whatever that is

Collapse-O-Matic ImageMap Test

Anne asks: Is there a way to use this plugin with image maps?

And by ‘this plugin’ she means Collapse-O-Matic. Well, Anne, that’s a good question! Let’s see what we can figure out here. First we need an image with an image map. We’ll pick something easy… like this:

pie_chart_500

Pie I have not yet eaten
The pie is a lie

Now clearly we will need to use the roll-your-own method to assign the triggers and target elements. So each of the image map area elements will need the collapseomatic class assigned. And since we do not want arrows assigned, we will also give each area element the class of noarrow.

<area id="noteaten" class="collapseomatic noarrow" shape="poly" coords="x, y, z, n" />

Now we just need to add in our target elements:

<div id="target-noteaten" class="collapseomatic_content ">Target Content</div>