Month: May
April 2015
June 2015

Posted on

Collapse-O/Pro-Matic CSS Tricks II – Font Awesome Arrows

First make sure Font Awesome is installed.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Or use a plugin such as Font Awesome Icons to have it installed for you.

We are going to use the following two Font Awesome Arrows:

<i class="fa fa-arrow-circle-down"></i>

<i class="fa fa-arrow-circle-up"></i>

Next we want to create a new class for these arrows. We are going to use the name awesomearrows. The class definitions need look like so:

.collapseomatic.awesomearrows {
    background-image: none;
}
.collapseomatic.awesomearrows:before {
    font-family: FontAwesome;
    content: "\f0ab";
}
.colomat-close.awesomearrows {
    background-image: none;
}
.colomat-close.awesomearrows:before {
    font-family: FontAwesome;
    content: "\f0aa";
}

Now we need to assign the trigclass attribute our value of ‘awesomearrows’

[expand title="Trigger Text" trigclass="awesomearrows"]Target Content[/expand]
Posted on

Collapse-Pro-Matic Setall with Highlander Grouping

This is a demonstration of how to use Highlander Grouping and Setall trigclass to manage the expand/collapse all triggers:

[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" rel="my_group-highlander"/]
[expand title="expand 1" rel="my_group-highlander"]this is the first expand item[/expand]
[expand title="expand 2" rel="my_group-highlander"]this is the second expand item[/expand]
[expand title="expand 3" rel="my_group-highlander"]this is the thrid expand item[/expand]
[expand title="expand 4" rel="my_group-highlander"]this is the thrid expand item[/expand]
Expand All
expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the thrid expand item
expand 4
this is the thrid expand item
Posted on

T(-) Countdown Second Tuesday of The Month

This is a test to see if using t=’second tuesday’ will schedule a T(-) Countdown correctly:

[tminus t="second tuesday"]
weeks
0
1
days
0
4
hours
1
1
minutes
2
7
seconds
2
9

Yup, looks like it works just fine.
It’s no T(-) Countdown Control, but in a pinch, it will work.

Edit.. nope, this will just countdown to the second Tuesday from today. To countdown to the second Tuesday of the MONTH you need to add the month and year.

[tminus t="may 2015 second tuesday"]
weeks
-50
-3
days
0
-3
hours
-1
-3
minutes
-3
-3
seconds
-3
-1
Posted on

Collapse-Pro-Matic Expand UP Test

Above and Beyond

In this example we simply add the trigpos=”below” to place the trigger below the target area:

[expand id="aboveandbeyond" title="Above & Beyond" trigpos="below"]This is an example of an expand element that has the trigger below the target.[/expand]

This is an example of an expand element that has the trigger below the target.
Above & Beyond

Up Up & Away

In this example we will use the roll-your-own method to not only place the trigger below the target, but also:

  1. position the target absolutely so that the trigger does not move down
  2. attempt to make the content animate UP from the trigger

HTML
<div id="absolute">
<div id="target-upaway" class="collapseomatic_content">This is an example of an expand element that will "Slide Up" on top of the trigger when expanded and "Slide Down" into the trigger when collapsed.</div>
<div id="upaway" class="collapseomatic">Up Up & Away</div>
</div>

Notice that we have wrapped both the target and trigger elements in a div that has been assigned the id of “absolute”. We give this wrapping div absolute positioning and anchor it so many pixels off the bottom of the page using the following CSS:

CSS
#absolute {
position: absolute;
bottom: 60px;
padding-bottom:2%;
z-index: 100;
}

This is an example of an expand element that will “Slide Up” on top of the trigger when expanded and “Slide Down” into the trigger when collapsed.
Up Up & Away