ApplyTo Functions

Once you have initialized the generativeText object with it's rules and options, you can apply generativeText to any HTML element. There are various functions to do that.

.applyToElementById( idOfElement )

The most common one, applyToElementById( idOfElement ), will apply the generativeText transformations to the element with the id specified. Takes as parameter a string with the id of the element to be transformed.

.applyToElementsByClassName( className )

applyToElementByClassName( className ), will apply the generativeText transformations to ALL the elements with the specified className. Takes as parameter a string with the name of the class of the elements to be transformed.

.applyToElement( element )

applyToElement( element ), will apply the generativeText transformations to the DOM element provided as a parameter.

Takes as parameter an HTML element to be transformed. ( Result of document.getElementById() or a newly created DOM element with document.createElement() ). This is useful if you want to apply generativeText transformations to newly created DOM objects that still don't exist on the page.

.applyToElementsSequentially( collectionOfElements ).

This option is different than the other ones, it will take a collection of HTML elements as parameter and then will apply the generativeText transformations by counting a step on each element. This means that instead of splitting the element's text into spans and applying CSS directives to each new span, it leaves the element as is and applies the CSS directives directly on each element sequentially.

Example

On the following example we are creating two different rulesets and then applying them sequentially to two different sets of elements. One to all the elements with class="legibility" and the other to all elements with class="communication". As you can see, when using .applyToElementsSequentially() the CSS directives are not applied to the letters or words of the element but to the element itself.

Don't mistake legibility with communication.

JS HTML


var ruleLegibility = {
    transformSkewX: {
        min: 80,
        max: 0,
        steps: true,
    }
}
var skewLegibility = new generativeText(ruleLegibility);
skewLegibility.applyToElementsSequentially( document.getElementsByClassName("legibility") );

var ruleCommunication = {
    transformSkewX: {
        min: 0,
        max: -90,
        steps: true,
    }
}
var skewCommunication = new generativeText(ruleCommunication);
skewCommunication.applyToElementsSequentially( document.getElementsByClassName("communication") );


<div>Don't mistake <span class="legibility">legibility</span> with communication.</div>
<div>Don't mistake <span class="legibility">legibility</span> with <span class="communication">communication</span>.</div>
<div>Don't mistake <span class="legibility">legibility</span> with <span class="communication">communication</span>.</div>
<div>Don't mistake <span class="legibility">legibility</span> with <span class="communication">communication</span>.</div>
<div>Don't mistake <span class="legibility">legibility</span> with <span class="communication">communication</span>.</div>
<div>Don't mistake <span class="legibility">legibility</span> with <span class="communication">communication</span>.</div>
<div>Don't mistake <span class="legibility">legibility</span> with <span class="communication">communication</span>.</div>
<div>Don't mistake legibility with <span class="communication">communication</span>.</div>