AJIϹϚϚ: Asynchronous Javascript in CSS

This paragraph is green, not because of the usual "style" attribute or properties, but because the myColor attribute on it has the value "green". That means you can control rendering for markup that isn't HTML, or even isomorphic to it.

All it takes with AJICSS is including the library and then adding a special property in your CSS:

    #test1 {
        --dynamic:setCSS('color', getValue('@myColor'));
    }

setCSS() is one of several functions provided by AJICSS to do handy hypertexty things, while getValue() is a convenience function that (among other uses) can get the value of an attribute from the element being styled. But if you like typing, you can use regular Javascript DOM code like event.target.getAttribute('myColor') instead.

Imho, that's simple enough that you don't even need to know Javascript (though for fancier things you probably should).

You can also walk around your document, examine attributes, content, or anything else, and do a style change in response:

The rule to accomplish this is similar the the one above, but of course has to fetch the color property from the previous element. $() and prev() are convenience functions from jQuery, a popular Javascript library that is not required, but plays well with AJICSS. dynTarget is simply a variable that holds the current Node being styled:

    .someClass {
        --dynamic:setCSS('color', $(dynTarget).prev()[0].style.color);
    }

A single rule may apply to many elements, selected in exactly the usual CSS fashion; and may check and use any information, not just copy styles to new places. For example:

The rule to accomplish this is:

    .copyColor {
        --dynamic:setCSS('color', $(dynTarget).prev().attr("colorIt"));
    }

These rules select elements in exactly the normal way for CSS. There's just an extra property, but with very special effects.

The font-size of elephant is specified by an equation in the CSS, that refers to the value in the text box below (change it and see):

This font-size will be doubled:

This is the rule ("sizeBox" is the HTML ID of the typing box):

    #test6 {
        --dynamic:setCSS('font-size', ($('#sizeBox')[0].value * 2) + "pt");
    }

AJICSS automatically finds all CSS rules that use --dynamic, and evaluates the property separately for each element that each such rule applies to, using each element as the context for the evaluation (so the rule doesn't even have to do anything to find or specify the target element). Normally it does this only once, when the document is loaded; but you can also trigger an update from any other event you like, in the usual Javascript fashion. To respond to changes to the textbox, add the attribute below to it, or an ancestor that should trigger update (this document has it on the body element):

    onchange="updateDynamicElements();"

In the following table, cells with class="balance" are turned red if their value is negative, by adding a --dynamic property to the same CSS rule that makes them right-justified:

Account	Balance
Lottery	9999.99
Savings	-2000.00
Interest	0.01
Play money	-123.45

The rule is:

    td.balance {
        text-align:right;
        padding-right:4pt;
        --dynamic:setCSS('color', (_().textContent < 0) ? 'red':'' );
    }

You can also transform the text content, using the replaceText() function. It applies a regular expression replacement to all the text nodes within the target elements. For example, you could change "colour" to "color", or modernize an old text that uses the medial or long s ("ſ"), to use the modern "s" uniformly:

Modernize

¹And ſeeing the multitudes, he went vp into a mountaine: and when he was ſet, his diſciples came vnto him.

² And he opened his mouth, and taught them, ſaying,

³ Bleſsed are the poore in ſpirit: for theirs is the kingdome of heauen.

⁴ Bleſsed are they that mourne: for they ſhall be comforted.

⁵ Bleſsed are the meeke: for they ſhall inherit the earth.

⁶ Bleſsed are they which doe hunger and thirſt after righteouſneſse: for they ſhall be filled.

⁷ Bleſsed are the mercifull: for they ſhall obtaine mercie.

⁸ Bleſsed are the pure in heart: for they ſhall ſee God.

⁹ Bleſsed are the peacemakers: for they ſhall bee called the children of God.

¹⁰ Bleſsed are they which are perſecuted for righteouſneſse ſake: for theirs is the kingdome of heauen.

¹¹ Bleſsed are ye, when men ſhall reuile you, and perſecute you, and ſhal ſay all manner of euill againſt you falſly for my ſake.

¹² Reioyce, and be exceeding glad: for great is your reward in heauen: For ſo perſecuted they the Prophets which were before you.

The tagText() function is similar, but in addition to doing a regex replacement, it tags each replacement with an element and class of your choice (and puts the original text on a special attribute, so you can get at that if needed, too). One important use of this is to make glossary terms, keywords, or other important strings into links.

The very same mechanism can be used to support transclusion, which is the dynamic copying of parts of documents to new context -- the hypertext equivalent of quotation. For a demo, click here.

And for a demo of conditional visibility, modelled on the FRESS "display keyword" feature, see this.