Category: collapse-o-matic
November 2012
January 2013

Posted on

Collapse-O-Matic > Multiple Triggers

First create a standard collapse element and assign it an id:
[expand title="This is the Master Trigger" id="multitrig"]

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.

Now if an additional trigger link is needed, just insert a span with “collapseomatic noarrow” class and and id that is ‘bot-[the_target_id]’ like so:
<span class="collapseomatic noarrow" id="bot-multitrig">This is a second trigger</span>
This is a second trigger

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. Check out collapse-pro-matic advanced external triggers for more information and a working demo.

Posted on

Collapse-O-Matic Centered Titlte

This title is Left
This is left stuff that makes the wonky wank wonder spank

To center the text first add the following to the theme’s style.css file:
.centron {
text-align: center;
}

Next, add the trigclass=”centron” attributes to the expand shortcode:
[expand title="This title is Centered" trigclass="centron"]

This title is Centered
This is the text that makes the baw-bitty-baw-ba-baw-ba-baw-baw ditty bitty baw ditty dong de up chuck the monkey

Note: if the default tag is not already set to div, the tag=”div” attribute will need to be added as well.

Posted on

Collapse-O-Matic – Table Test

Various ways the Collapse-O-Matic plugin may be used in conjunction with tables.

Expanding The Entire Table

This is straight forward. We simply wrap a table in an expand element:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td>Three</td><td>Four</td></tr>
   </tbody>
</table>
View Table
One Two
Three Four

Expanding A Row

This is a bit more tricky. Notice, what happens when we wrap to wrap a table row in a div:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <div style="border: 1px dotted blue">
         <tr><td>Three</td><td>Four</td></tr>
      </div>
   </tbody>
</table>
One Two
Three Four

Se how the div is rendered outside of the table? To place the div INSIDE of the table, the div needs to be wrapped in td tags like so:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr>
         <td colspan="2">
            <div style="border: 1px dotted blue">
               <table>
                  <tbody>
                     <tr><td>Three</td><td>Four</td></tr>
                  </tbody>
                </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>
One Two
Three Four

Well, now the row we want to use as the target content is inside the table, but as you can see, the inner table is not matching the column layout. So what if we use the table’s TR as the collapse element:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td colspan="2" class="collapseomatic" id="singlerow">Trigger</td></tr>
      <tr class="collapseomatic_content" id="target-singlerow">
          <td>Three</td><td>Four</td>
      </tr>
   </tbody>
</table>
One Two
Trigger
Three Four

Perfect! This works well for expanding and collapsing a SINGLE Table Row.

Expanding Multiple Rows

Collapse-O-Matic only allows a trigger to control a single target area. One of the many features of the pro version, Collapse-Pro-Matic is the added ability to have a single trigger control multiple targets. To add extra targets to a trigger, the ID must be in the format of target[n]-id as follows:

<div id="monkey" class="collapseomatic">Trigger</div>
<div id="target1-monkey" class="collapseomatic_content">content</div>
<div id="target2-monkey" class="collapseomatic_content">content</div>

So in our example of the table, we would hook up multiple rows like so:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td colspan="2" class="collapseomatic" id="singlerow">Trigger</td></tr>
      <tr class="collapseomatic_content" id="target1-singlerow">
          <td>Three</td><td>Four</td>
      </tr>
      <tr class="collapseomatic_content" id="target2-singlerow">
          <td>Five</td><td>Six</td>
      </tr>
      <tr class="collapseomatic_content" id="target3-singlerow">
          <td>Seven</td><td>Eight</td>
      </tr>
   </tbody>
</table>
One Two
Trigger
Three Four
Five Six
Seven Eight
Posted on

Collapse-O-Matic Top & Bottom Trigger Test

This is how to place a trigger at the top and bottom of a expand element:

[expand title="Read more..." swaptitle="Read less..." id="swine"]...content...
<span class="collapseomatic colomat-close" id="bot-swine">Read less...</span>
[/expand]
Read more...
Swine frankfurter non in shoulder. Tri-tip boudin prosciutto pork ball tip elit flank. Incididunt id ex, fugiat cillum turducken andouille sirloin est.
Read less…
Posted on

Map Test

Collapse-O-Matic Map Test

Hamburg Harbor
[google-map-v3 width=”350″ height=”200″ zoom=”12″ maptype=”roadmap” mapalign=”center” directionhint=”false” language=”default” poweredby=”false” maptypecontrol=”true” pancontrol=”true” zoomcontrol=”true” scalecontrol=”true” streetviewcontrol=”true” scrollwheelcontrol=”false” draggable=”true” tiltfourtyfive=”false” addmarkermashupbubble=”false” addmarkermashupbubble=”false” addmarkerlist=”53.542443,9.963925{}aircraftcarrier.png{}Beautiful Hamburg Harbor” bubbleautopan=”true” showbike=”false” showtraffic=”false” showpanoramio=”false”]

Print-O-Matic GPX Map Track Text

[sgpx gpx=”/wp-content/uploads/gpx/Baarn Hilversun Vuursche – 11 km TR.gpx”]

It seems the map is also injecting the following CSS:

.wpgpxmaps { clear:both; }
#content .wpgpxmaps img,
.entry-content .wpgpxmaps img,
.wpgpxmaps img { max-width: none; width: none; padding:0; background:none; margin:0; border:none; }
.wpgpxmaps .ngimages { display:none; }
.wpgpxmaps .myngimages { border:1px solid #fff;position:absolute;cursor:pointer;margin:0;z-index:1; }
.wpgpxmaps_summary .summarylabel { }
.wpgpxmaps_summary .summaryvalue { font-weight: bold; }
.wpgpxmaps .report { line-height:120%; }
.wpgpxmaps .gmnoprint div:first-child { }
.wpgpxmaps .wpgpxmaps_osm_footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 13px;
margin: 0;
z-index: 999;
background: WHITE;
font-size: 12px;
}

.wpgpxmaps .wpgpxmaps_osm_footer span {
background: WHITE;
padding: 0 6px 6px 6px;
vertical-align: baseline;
position: absolute;
bottom: 0;
}

So we need to add that to the print page using the custom print page css filed in print-o-matic settings.