Mon, 29th June, 2015Mon, 29th June, 2015

Column-Matic Responsive CSS

This is a quick demo on how to set up responsive columns with Column-Matic. In this demo will will display three columns that will then stack vertically once the screen size drops below a certain width.

The CSS

.my_column {
    width: 23%;
    margin-left: 5%;
    padding-left: 5%;
}

@media (max-width: 450px) {
    .my_column {
        width: 95%;
        margin: 0 auto;
                padding: 3px;
        clear: both;
        border: none;
    }
}

Shortcode

[[column class="my_column"]...[/column]][[column class="my_column"]...[/column]][[column class="my_column"]...[/column]][[end_columns]]

Result

[column class=”my_column”]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/column][column class=”my_column”]Ex cum quas aeque, alii constituto nam in. Id vocibus mandamus suscipiantur vim, mel ad ipsum convenire maluisset. His vocent accusata torquatos an, ei dicat tation pro, et suavitate definitiones pro. Mei perfecto tincidunt ea, omnesque efficiendi interesset in mei.[/column][column class=”my_column”]Lorem ipsum dolor Cu eam probo phaedrum philosophia, sed eu iisque persius repudiandae. An ferri mollis deseruisse qui, te dicit mnesarchum est, nonumy docendi tincidunt sit cu. Mei at munere admodum.[/column] [end_columns]

Fri, 26th June, 2015Fri, 26th June, 2015

Collase-O-Matic Roll-Your-Own Inline Target Above

This is some text that goes on a bit and then there will be a simply read-more link after this run-on sentence finally ends. It also features a bit more text that is originally hidden, but then pops up when the read-more link is clicked. read moreread less

This was done using the following code structure:

<span id="target-monkey1" class="collapseomatic_content_inline colomat-inline span_fix">It also features a ...</span> <span id="monkey1" class="collapseomatic" title="read more">read more</span><span id="swap-monkey1" style="display: none;">read less</span>

Fri, 26th June, 2015Wed, 24th July, 2019

Collapse-O-Matic – Inline Roll-Your-Own Triggers

This is a follow-up post to Collapse-O-Matic > Line of Trigger Images. This time we want to have the triggers in-line but the content to be displayed below the trigger line. To do this we first must use the roll-your-own method.

Triggers:

<span class="collapseomatic" id="item_one" data-group="item-highlander">Trigger One</span> <span class="collapseomatic" id="item_two" data-group="item-highlander">Trigger Two</span> <span class="collapseomatic" id="item_three" data-group="item-highlander">Trigger Three</span>

Targets:

<div id="target-item_one" class="collapseomatic_content ">Target One</div>
<div id="target-item_two" class="collapseomatic_content ">Target Two</div>
<div id="target-item_three" class="collapseomatic_content ">Target Three</div>

The Results:

Trigger One Trigger Two Trigger Three

Target One

Target Two

Target Three

Collaspse-Commander

The same thing with collapse commander would look like this:

[[expand_trig cid="2119" /]] [[expand_trig cid="2120" /]] [[expand_trig cid="2121" /]]
[[expand_targ cid="2119" /]] [[expand_targ cid="2120" /]] [[expand_targ cid="2121" /]]

Results:
[expand_trig cid=”2119″ /] [expand_trig cid=”2120″ /] [expand_trig cid=”2121″ /]
[expand_targ cid=”2119″ /] [expand_targ cid=”2120″ /] [expand_targ cid=”2121″ /]

Mon, 22nd June, 2015Mon, 22nd June, 2015

T(-) Countdown Control Duplicate Countdowns

Notice: Undefined variable: style in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 617

Notice: Undefined variable: style in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 618

Notice: Undefined variable: cid in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 628

Notice: Undefined variable: cslug in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 631

Notice: Undefined variable: cname in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 644

Notice: Undefined variable: t in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 648

Notice: Undefined variable: style in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 617

Notice: Undefined variable: style in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 618

Notice: Undefined variable: cid in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 628

Notice: Undefined variable: cslug in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 631

Notice: Undefined variable: cname in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 644

Notice: Undefined variable: t in /var/www/vhosts/spacedonkey.de/httpdocs/wp-content/plugins/t-countdown-control/t-countdown-control.php on line 648

What happens when we display two of the exact same T(-) Countdown Control shortcodes on the same page?

Here is the first countdown:

[tminus cid="2022"]

and Here is the second:

[tminus cid="2022" id="secondcountdown"]

Sun, 21st June, 2015Sun, 21st June, 2015

Collapse-O-Matic Special Characters

This is an example of Special Characters such as umlauts and accents in a Collapse-O-Matic Shortcode:

üäöé what's that smell?

sorry, I just really like stinky cheese üäöé

Roll-your-own:

üäöé if you say so

I say so üäöé

Thu, 18th June, 2015Thu, 18th June, 2015

Collapse-O-Matic Table of Content Test

This is a test that features a table of content from the Table of Content plugin as well as a collapse-o-matic expand element AND a collapse-commander element.
[toc wrapping=”right”]

This is an H1 heading

This is a heading

This is the content area and it has a collapse element in it:

[expand title="This is the expand element"]...and this is the target content[/expand]

This is the expand element

…and this is the target content

This is another h2 heading

This is an expand element element from Collapse Commander:

[expand cid="1398"/]

This is a third h2 element

list item
list item
list item
list item

This is another H1 heading

Fourth heading element

Fifth heading, how do you like it?

Mon, 15th June, 2015Mon, 15th June, 2015

Collapse-O-Matic TrigPos Test

This is a quick test of the trigpos attribute.

Normally, an expand element shortcode looks and works like this:

[expand title="trigger"]hidden content[/expand]

trigger

hidden content

now we are going to add the trigpos attribute:

[expand title="trigger" trigpos="below"]hidden content[/expand]

hidden content

trigger

And this works exactly the same way for collapse-pro-matic, of course.

Sat, 13th June, 2015Sat, 13th June, 2015

Collapse-O-Matic FAQ Trigger by Mouse Hover

Q: Can this work on mouseover or hover?

A: This is a question we get quite often. The plugin does not work with hover. We have created custom versions for clients in the past that does this, however you really need to think through how you will deal with touch devices that do not have a ‘hover’ state.

Also, when you hover over and item, how will your user close it? On mouse HoverOut is the easy answer, but then the user can never select or click on anything in the target area.

In short, it can be done but it’s a complex interaction that needs to be well planned out.

Here is an example of a plugin we custom built for a client.

Fri, 5th June, 2015Thu, 18th June, 2015

Table of Contents Plus Test

Note: Currently de-activated to test Table of Content plugin.

This is a test that features a table of content from the Table of Contents Plus plugin as well as a collapse-o-matic expand element AND a collapse-commander element.
[toc wrapping=”right”]

This is an H1 heading

This is a heading

This is the content area and it has a collapse element in it:

[expand title="This is the expand element"]...and this is the target content[/expand]

This is the expand element

…and this is the target content

This is another h2 heading

This is an expand element element from Collapse Commander:

[expand cid="1398"/]

This is a third h2 element

list item
list item
list item
list item

This is another H1 heading

Fourth heading element

Fifth heading, how do you like it?

Thu, 4th June, 2015Fri, 8th April, 2016

T(-) Countdown Control Omit Weeks

Way to omit weeks from the countdown:

a) Add the omitweeks=”true” attribute to your shortcode (if using a shortcode)
not working

b) tick the omitweeks box in the widget settings (if using a sidebar widget)

c) tick the omitweeks box in the T(-) Countdown Control options page.