Month: January
December 2012
February 2013

Posted on

Collapse-O-Matic > Highlander & Findme Test

Here are some examples of using the findme and the highlander grouping together:

[expand title="Monkeys" rel="animal-highlander" tag="div" findme="auto"]...[/expand]
[expand title="Donkeys" rel="animal-highlander" tag="div" trigclass="redletter" findme="1200"]...[/expand]
Monkeys
A monkey is a primate of the Haplorrhini suborder and simian infraorder, either an Old World monkey or a New World monkey, but excluding apes and humans. There are about 260 known living species of monkey. Many are arboreal, although there are species that live primarily on the ground, such as baboons. Monkeys are generally considered to be intelligent. Unlike apes, monkeys usually have tails. Tailless monkeys may be called “apes”, incorrectly according to modern usage; thus the tailless Barbary macaque is called the “Barbary ape”.
The New World monkeys (superfamily Ceboidea) are classified within the parvorder of Platyrrhini, whereas the Old World monkeys (superfamily Cercopithecoidea) form part of the parvorder Catarrhini, which also includes the hominoids (apes, including humans). Thus, as Old World monkeys are more closely related to hominoids than they are to New World monkeys, the monkeys are not a unitary (monophyletic) group.
Donkeys
The donkey or ass, Equus africanus asinus,[1][2] is a domesticated member of the Equidae or horse family. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years. There are more than 40 million donkeys in the world, mostly in underdeveloped countries, where they are used principally as draught or pack animals. Working donkeys are often associated with those living at or below subsistence levels. Small numbers of donkeys are kept for breeding or as pets in developed countries.
A male donkey or ass is called a jack, a female a jenny or jennet;[3][4][5] a young donkey is a foal.[5] Jack donkeys are often used to produce mules.
Asses were first domesticated around 3000 BC,[6] or 4000 BC, probably in Egypt or Mesopotamia,[7] and have spread around the world. They continue to fill important roles in many places today. While domesticated species are increasing in numbers, the African wild ass and another relative, the Onager, are endangered. As beasts of burden and companions, asses and donkeys have worked together with humans for millennia.
Ninjas
A ninja (忍者?) or shinobi (忍び?) was a covert agent or mercenary in feudal Japan who specialized in unorthodox warfare. The functions of the ninja included espionage, sabotage, infiltration, and assassination, and open combat in certain situations.[1] Their covert methods of waging war contrasted the ninja with the samurai, who observed strict rules about honor and combat.[2] The shinobi proper, a specially trained group of spies and mercenaries, appeared in the Sengoku or “warring states” period, in the 15th century,[3] but antecedents may have existed in the 14th century,[4] and possibly even in the 12th century (Heian or early Kamakura era).[5][6] In the unrest of the Sengoku period (15th–17th centuries), mercenaries and spies for hire became active in the Iga Province and the adjacent area around the village of Kōga, and it is from their ninja clans that much of our knowledge of the ninja is drawn. Following the unification of Japan under the Tokugawa shogunate (17th century), the ninja faded into obscurity, being replaced by the Oniwabanshū body of secret agents.[7] A number of shinobi manuals, often centered around Chinese military philosophy, were written in the 17th and 18th centuries, most notably the Bansenshukai (1676).[8] By the time of the Meiji Restoration (1868), the tradition of the shinobi had become a topic of popular imagination and mystery in Japan. Ninja figured prominently in folklore and legend, and as a result it is often difficult to separate historical fact from myth. Some legendary abilities purported to be in the province of ninja training include invisibility, walking on water, and control over the natural elements. As a consequence, their perception in western popular culture in the 20th century was based more on such legend and folklore than on the historical spies of the Sengoku period.
click here to close
[expand title="This title text is in red, font color='blue'>blue, green, and orange"]Isn't it colourful?[/expand]
This title text is in red, blue, green, and orange
Isn’t it colourful?
[expand title="Example word" tag="div"]this is a test, nothing to see here.[/expand]
Example word
this is a test, nothing to see here.
Posted on

Collapse-O-Matic > Line of Trigger Images

Step One

Create each expand element using the title element as the image tag. Assign it a trigclass=”noarrow” and give it an alt attribute that makes sense:

[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one"]This is the content of the first image[/expand]

Step Two

Wrap each expand element in a div with a unique class. We used ‘birdwire‘ because it makes all the images nice and need in a row like… birds on a wire! Hmmm, maybe we should have used ducksrow. Anyway, each element will now look like so:

<div class="birdwire">[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one"]This is the content of the first image[/expand]</div>

Final Step

Add the following to your theme’s style.css:


.birdwire {
display: inline;
float: left;
margin-right: 1.625em;
width: 160px;
}

And Blam-O! The images line up and float left like so:

This is the content of the first image
This is the content of the second image
This is the content of the third image

After you will want to add <div style="clear: both"> </div> to force new content to show up below, fresh in it’s own line.

Highlander Grouping

Now, say you want to add highlander grouping. The code now would look like:
<div class="birdwire">[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one" rel="ninja-highlander"]This is the content of the first image[/expand]</div>

This is the content of the first image
This is the content of the second image
This is the content of the third image

Grid of Images

In the above examples, the targets are displayed directly below the related triggers. The following example shows how to place a line of image triggers that will display the targets below all images using the roll-your-own method:

The Triggers

<div class="birdwire">
<img id="nj1" src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-150x150.jpg" class="collapseomatic noarrow" rel="ninjtee-highlander"/>
</div>
<div class="birdwire">
<img id="nj2" src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-150x150.jpg" class="collapseomatic noarrow" rel="ninjtee-highlander"/>
</div>

The Targets

<div style="clear: both;"> </div>
<div id="target-nj1" class="collapseomatic_content">Target content for first trigger</div>
<div id="target-nj2" class="collapseomatic_content">Target content for second trigger</div>
Target content for first trigger
Target content for second trigger