Author: admin
October 2012
December 2012

Posted on

Print-O-Matic Test

Posted on

Collapse-O-Matic: Changing Parent Element

This is the parent element with an id of ‘parent-superman’

Trigger Open

I am some awesome content that is magically visible when the trigger above is clicked. To close this amazing content, either click the Trigger Close trigger above, or the Internal Close Trigger below:
Internal Close Trigger
This is the parent element with an id of ‘parent-superman’

Trigger Open

I am some awesome content that is magically visible when the trigger above is clicked. To close this amazing content, either click the Trigger Close trigger above, or the Internal Close Trigger below:
Internal Close Trigger
Posted on

Element Wrap Test

The new elwraptag and elwrapclass attributes:

[expand title="trigger test" elwraptag="div" elwrapclass="classy"]target content[/expand]

This is the first element wrapped in a div
content to cause wonder and amazement.
This is the second element wrapped in a classy div
content to cause wonder and amazement.
This is the third element not wrapped
content to cause wonder and amazement.
Posted on

Skinny Collapse Wrap

This is the first element and it's short
content to cause wonder and amazement.
This is a bit longer second element, longer than the first element
content to cause wonder and amazement.

Ordered Lists

  1. Lorem ipsum dolor sit amet dolor sit ipsum, dolor ipsum sit amet dolor sit ipsum?
    2. Content here
  2. Lorem ipsum dolor sit amet dolor sit ipsum, dolor ipsum sit amet dolor sit ipsum?
    3. Content here
  3. Lorem ipsum dolor sit amet dolor sit ipsum, dolor ipsum sit amet dolor sit ipsum?
    4. Content here
  4. Lorem ipsum dolor sit amet dolor sit ipsum, dolor ipsum sit amet dolor sit ipsum?
    5. Content here
  5. Lorem ipsum dolor sit amet dolor sit ipsum, dolor ipsum sit amet dolor sit ipsum?
    6. Content here
Posted on

Non-Text Expand Test

Using notitle=true and tag=div

this is some content
this is some other content
here is some more content

Using no attributes, preceding text, div wrapped

This is the first line
this is some content
Here we have the second line
this is some other content
And finally line number three
here is some more content


Using tag=li, ul wrapped

  • this is some content
  • this is some other content
  • here is some more content
Posted on

entente test

Orginal

How do I purchase an item as a gift?

When you decide what item you want to purchase, right click the item and choose “touch” from the options. A blue menu will appear, choose “Gift” and follow the instructions.

Fixed

How do I purchase an item as a gift?

When you decide what item you want to purchase, right click the item and choose “touch” from the options. A blue menu will appear, choose “Gift” and follow the instructions.

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 Snap Close Test

[expand title="The Big Lebowski" trigclass="snap-shut" rel="dude-highlander" tag="h2"]Target Content[/expand] [expand title="Walter" trigclass="snap-shut" rel="dude-highlander" tag="h2"]Target Content[/expand] [expand title="Donny" rel="dude-highlander" tag="h2"]Target Content[/expand]

The Big Lebowski

Target Content

Walter

Target Content

Donny

Target Content
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…