Month: April
March 2013
June 2013

Posted on

Collapse-O-Matic Multi Triggers & Targets

Multiple Triggers

Add the format extra[n]-id to add extra external triggers for a single target:
<div id="test" class="collapseomatic">Trigger 1</div>
<div id="target-test" class="collapseomatic_content">You might think you can catch a monkey, but you can't. Monkeys are FAST!</div>
<div id="extra1-test" class="collapseomatic">Trigger 2</div>
<div id="extra2-test" class="collapseomatic">Trigger 3</div>

which should produce a little something like:

Trigger 1
You might think you can catch a monkey, but you can’t. Monkeys are FAST!
Trigger 2
Trigger 3

Multiple Targets

Multiple targets are available only in the Collapse-Pro-Matic plugin. To add extra targets, assign the ID in the format of target[n]-id as follows:
<div id="target1-monkey" class="collapseomatic_content">content</div>
<div id="monkey" class="collapseomatic">Trigger</div>
<div id="target2-monkey" class="collapseomatic_content">content</div>

which should produce a little something like:

You might think you can catch a monkey, but you can’t. Monkeys are FAST!
Trigger
You might still think you can catch a monkey, but you really can’t. Monkeys are still FAST!
Posted on

Column-Matic Responsive Test

Column-Matic Shortcode

[[column class="column_left" float=""]Yada yada, spiffy logo image with a funky monkey and a wiffle-ball bat.[/column]]
[[column class="column_right" float=""]Yippy Skippy another logo image with a ding-ding-dong touching tra-la-la.[/column]]
[[end_columns]]

CSS

For normal screens:

.column_left {
    margin-left:0;
    float:left;
    width: 40%;
}
.column_right {
    float: left;
    margin-left: 10px;
    border-left: 1px dotted red;
    padding-left: 10px;
    width: 40%; 
}

For Screens smaller than 450px wide:

@media (max-width: 450px) {
    .column_left, .column_right{
        width: 95%;
        margin: 0 auto;
                padding: 3px;
        clear: both;
        border: none;
    }
}
[column class=”column_left” float=””]Yada yada, spiffy logo image with a funky monkey and a wiffle-ball bat.[/column] [column class=”column_right” float=””]Yippy Skippy another logo image with a ding-ding-dong touching tra-la-la.[/column] [end_columns]