Posted on

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]
Posted on

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 more

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>
Posted on

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:
Item One Item Two Item Three

Target One
Target Two
Target Three
Posted on

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

Test Expand Element
This is the content of the expand element early_oculous

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?

Posted on

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.

Posted on

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.

Posted on

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

Test Expand Element
This is the content of the expand element early_oculous

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?

Posted on

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.