Options and Settings

Right Height includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.

Global Settings

You can pass options and callbacks into Right Height through the init() function:

    // Selectors
    selector: '[data-right-height]', // The selector for content containers (must use a valid CSS selector)
    selectorContent: '[data-right-height-content]', // The selector for content (must use a valid CSS selector)

    // Calbacks
    before: function ( container ) {}, // Function that runs before content height is adjusted
    after: function ( container ) {} // Function that runs after content height is adjusted

Use Right Height functions in your own scripts

You can also call the Right Height adjust height function in your own scripts.


Set all content areas in a container to the same height.

    container, // Node that contains the content areas. ex. document.querySelector('#content-wrapper')
    options // Callbacks. Same options as those passed into the init() function.


var container = document.querySelector('#container');
rightHeight.adjustContainerHeight( container );


Destroy the current rightHeight.init(). This is called automatically during the init function to remove any existing initializations.