January 2022 – Space Donkey

Fri, 28th January, 2022

Archive URL for CPT

Testing the use of get_post_type_archive_link to generate archive permalinks for cpts

Wed, 20th January, 2021Mon, 25th January, 2021

Print-Pro-Matic Optional No-Print

In this example, the option to include a specific element is provide by using a checkbox. This feature was introduced in Print-Pro-Matic version 2.0-beta-210121

This is a Donkey

The default print target will be the article element. The image of the donkey has been assigned a class of ‘logo’. Now we need to create our print trigger and a checkbox:

[print-me title="Print Trigger"/]

<label><input type="checkbox" id="ppm_odnp" value=".logo">Donkey Free Print</label>

The checkbox must have an ID of ppm_odnp (because print-pro-matic optional do not print is a bit long). The value is the optional do not print selector, so .logo is for items with a class of ‘logo’, while #logo is an item with an id of ‘logo’.

Here is a working demonstration.

Print Trigger

Donkey Free Print

Wed, 20th January, 2021Mon, 25th January, 2021

Archive-Pro-Matic Yearly Grid

First the CSS:

ul.grid_flow {
	list-style: none;
}

ul.grid_flow li {
	display: inline-block;
}

ul.grid_flow li:not(:first-child):before {
	content: '|';
}

Next the Shortcode:

[archives type="yearly" order="ASC" class="grid_flow"/]

And here are the results:

Fri, 5th January, 2018Thu, 8th February, 2018

Countdown Test – Local Computer Time

This is a test of a countdown that will launch at a specific time.
The time should not affected on the visitors local computer time.

weeks

-31

-1

days

-4

hours

-2

-1

minutes

-4

seconds

-5

-2

[ajax_dropdown 3171]

Wed, 3rd January, 2018Mon, 18th February, 2019

Collapse-Pro-Matic Spacing

monkey
this is a monkey

This is some text

Here is a headline

100-1 First thing
100-2 Second Thing

a. First Sub thing
b. Second sub thing

100-3 Third Thing
100-4 Forth Thing
100-5 Fifth Thing

I am bold.
Some info:
Here is some info that explains more about thing five.

100-6 Sixth Thing
100-7 Seventh Thing

Numbered List Items

<ul class="numbers">
    <li data-pos="2">one</li>
    <li data-pos="2">two
        <ul>
            <li data-pos="2">two.one</li>
            <li data-pos="2">two.two</li>
            <li data-pos="2">two.three</li>
        </ul>
    </li>
</ul>

- one

- two
  - - two.one
  - - two.two
  - - two.three

- three
  - - three.one
  - - three.two
      - three.two.one – this is a much longer piece of text that will wrap around and should display how the padding and offset of the numbering works with a longer text.
      - three.two.two

four

CSS:

ul.numbers {
    counter-reset: levelone;
    list-style: none;
}

ul.numbers > li {
    counter-increment: levelone;
}

ul.numbers > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") ". ";
}

ul.numbers ul {
    counter-reset: leveltwo;
    list-style: none;
}

ul.numbers ul > li {
    counter-increment: leveltwo;
}

ul.numbers ul > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") "." counters(leveltwo, ".") ". ";
}

ul.numbers ul ul {
    counter-reset: levelthree;
    list-style: none;
}

ul.numbers ul ul > li {
    counter-increment: levelthree;
}

ul.numbers ul ul > li[data-pos]:before {
    content: attr(data-pos) "." counters(levelone, ".") "." counters(leveltwo, ".") "." counters(levelthree, ".") ". ";
}

Wed, 25th January, 2017Wed, 6th May, 2020

Rel Attribute in Span and Div Tags

This is just a simple test of a span with a rel attribute:
Monkeys are funny.

and now a div:

Donkeys are also funny.

Fri, 20th January, 2017Sun, 24th May, 2020

Print-O-Matic and WordPress Charts

Here is an example of using Print-O-Matic to print a WordPress Chart using wp-charts.

[wpcharts type=”piechart” legend=”false” titles=”Title 1, Title 2, Title 3, Title 4″ values=”3,7,5,12″ id=”my_chart”]

[print-me target="%prev%"/]

Works in 2.0.
Pre 2.0:
It seems we need to wrap the chart shortcode in a div so we can target that div and include it’s related javascript.
Still not. maybe we also need to include the chart js on the page?
Nope. It seems the HTML Canvas element is not cloning it’s content that was generated by the javascript… hmmm.

Wed, 11th January, 2017Wed, 28th February, 2018

Archive-Pro-Matic Alpha List Subheadings

Archive-Pro-Matic version 1.0.4 introduces two new attributes: alpha_headings and alpha_tag

[archives type="alpha" cat_id="4" limit="30" alpha_headings="true"/]

[archives type="alpha" cat_id="4" limit="30" alpha_headings="true" alpha_tag="strong"/]

Sun, 24th January, 2016Thu, 14th July, 2016

Collapse-Pro-Matic Bellevue Test

weeks

days

hours

minutes

seconds

Mon, 18th January, 2016Fri, 5th January, 2018

Collapse-O-Matic Grouping and Expandall Issues

If we set up two groups for the sole purpose of creating expand/collapse all triggers that will only expand/collapse the related group we currently have to create something like:

Science Fiction:

[expand title="Star Wars" rel="fiction"]Alliance to Restore the Republic vs. Galactic Empire[/expand]
<span class="expandall" rel="fiction">Expand All Science Fiction</span>
<span class="collapseall" rel="fiction">Collapse All Science Fiction</span>

Pure Science:

[expand title="Space Race" rel="history"]USA vs. USSR[/expand]
<span class="expandall" rel="history">Expand All Pure Science</span>
<span class="collapseall" rel="history">Collapse All Pure Science</span>

Rel Example:

Science Fiction

Star Wars
Alliance to Restore the Republic vs. Galactic Empire
Star Trek
United Federation of Planets vs. Klingon Empire vs. Romulan Star Empire vs. Cardassian Union vs. the Borg vs. the Dominion
Battlestar Galactica
Twelve Colonies vs. Cylon Empire

Expand All Science Fiction
Collapse All Science Fiction

Pure Science

Space Race
USA vs. USSR
Ansari X Prize
Scaled Composites vs. Many Others

Expand All Pure Science
Collapse All Pure Science

So this works, but what if we do NOT what the expanding of one group to automatically collapse any open items of other groups?

As of Collapse-O-matic version 1.7.1, two new attributes have been introduced to deal with exactly this issue. For the shortcode:
togglegroup='your_group_name'
and for the roll-your-own method:
data-togglegroup='your_group_name'

Science Fiction:

[expand title="Star Wars" togglegroup="fiction"]Alliance to Restore the Republic vs. Galactic Empire[/expand]
<span class="expandall" data-togglegroup="fiction">Expand All Science Fiction</span>
<span class="collapseall" data-togglegroup="fiction">Collapse All Science Fiction</span>

Pure Science:

[expand title="Space Race" togglegroup="history"]USA vs. USSR[/expand]
<span class="expandall" data-togglegroup="history">Expand All Pure Science</span>
<span class="collapseall" data-togglegroup="history">Collapse All Pure Science</span>
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" togglegroup="history"/]

Group Example:

Science Fiction

Star Wars
Alliance to Restore the Republic vs. Galactic Empire
Star Trek
United Federation of Planets vs. Klingon Empire vs. Romulan Star Empire vs. Cardassian Union vs. the Borg vs. the Dominion
Battlestar Galactica
Twelve Colonies vs. Cylon Empire

Expand All Science Fiction
Collapse All Science Fiction

Pure Science

Space Race
USA vs. USSR
Ansari X Prize
Scaled Composites vs. Many Others

Expand All Pure Science
Collapse All Pure

Expand All*

Adding Highlander Grouping:

[expand title="Monkey" togglegroup="animal" rel="animal-highlander"]monkeys are fast[/expand]
[expand title="Donkey" togglegroup="animal" rel="animal-highlander"]donkeys are strong[/expand]
<span class="expandall" data-togglegroup="animal">Expand All Animals</span>
<span class="collapseall" data-togglegroup="animal">Collapse All Animals</span>
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" togglegroup="animal"/]

Monkey
Monkeys are fast
Donkey
Donkeys are strong

Expand All Animals
Collapse All Animals

Expand All*

*collapse-pro-matic only