Test Transclusion

Real Elvish Transclusion. For example: Chesterton said nothing. That quote is transcluded by ID from the magenta source below. In this case, the transcluded text replaces the content of a q element that pulled it in (if it failed, you would instead see the actual content of the q element, in this case the word "nothing").

    #pullQuote {
        --dynamic:transclude('html', getNode("#battersea") );
    }

"I feel an almost savage envy on hearing that London has been flooded in my absence, while I am in the mere country. My own Battersea has been, I understand, particularly favoured as a meeting of the waters. Battersea was already, as I need hardly say, the most beautiful of human localities. Now that it has the additional splendour...."
-- G. K. Chesterton

Transclusion can be dynamic: As Lincoln said, nothing You can change the source, which is the value of the typing box below. You just set an onchange handler in the usual way (say, by adding onchange="updateDynamicElements();" to the body element), and then write this AJICSS rule:

    #lincoln {
        --dynamic:transclude('html', getNode("#textBox1").value);
    }

This quote will be transcluded:

Different styles can apply to a transcluded copy than apply to the source. By default, each transclusion is wrapped inside a span with a special class set, so you can easily get at them as a class from CSS.

You can not only put a transclusion in place of content (as shown above), but also at the start or end, inside or outside, like the following quote which is pulled by this paragraph (not by any separate element within it):

    #pullToEnd {
        --dynamic:transclude('append', getNode("#battersea"));
    }

The preceding examples use constant IDs to identify what to transclude. This example instead pulls from whatever ID is specified on the pulling element's "rid" attribute: [failed], or falls back to the contained/original content if that fails. The rule is shown below (you can write it much more briefly using convenience functions as in previous examples, but this works fine too):

    #use-rid {
        --dynamic:transclude('html',
            document.getElementById(dynTarget.getAttribute('rid')).innerHTML);
    }

You can write and use any Javascript you like (for example, referring to your own functions or libraries). But it's easier with AJICSS because you save the effort of triggering updates, finding and iterating over selected elements, setting up the context for each one, and constructing and annotating the transcluded copies. And you can say "_('#foo') instead of "document.getElementById('foo'); though if you prefer you can use jQuery for that sort of thing, and still pass the results to AJICSS to get dynamic CSS, transclusion, etc.

For some more basic examples of AJICSS, click here.

Dynamic style and transclusion via AJIϹϚϚ