JavaScript: how to clear pullquotes automatically

JavaScript: how to clear pullquotes automatically

With JavaScript is pretty simple to apply clearing to pullquotes automatically.

With JavaScript is pretty simple to apply clearing to pullquotes automatically.

Pullquotes generally needs clearing when their content is actually taller than the subsequent element's computed height.

We only need to compute the actual heights of the elements and add a specific CSS class.


'use strict';

const clearPullQuotes = selector => {
    let quotes = document.querySelectorAll(selector);
    Array.prototype.forEach.call(quotes, quote => {
        let next = quote.nextElementSibling;
        let quoteHeight = quote.offsetHeight;
        let nextHeight = next.offsetHeight;

        if(nextHeight < quoteHeight) {
            quote.classList.add('fullquote');
        }
    });
};

document.addEventListener('DOMContentLoaded', () => {
   clearPullQuotes('.pullquote');
});

You can see the above code in action on the following page.