Class: Equalheights

Responsiville. Equalheights

A utility class that takes a set of elements and gives them all the same height, ie the height of the tallest of them. It is responsive and allows for grouping the elements in rows. It can run in an automatic way so that it groups elements in the same way that they naturally flow in rows as they are being rendered by the browser.

new Responsiville.Equalheights(options)

responsiville.equalheights.js, line 63
Creates and initialises the equal heights elements.
Name Type Description
options Object The initialisation options of the module.
Properties:
Name Type Description
options.debug boolean Whether to print debug messages in the browser console.
options.slug boolean A special codename for the instance of the element, to be used as a class on its container and as a key in arrays where it is grouped with other elements of its kind.
options.container string The parent element under which the elements will be found. If null then the direct parent of the elements will be taken into account.
options.elements string The element that contains the elements which will eventually take up the same height. If left null then the direct elements if the parent will be taken into account.
options.children string Sometimes it's not the actual elements themselves that we want to make equal height but some other elements inside them, so that we can have consistent rows of of content. This option is a selector that defines which children inside the specified elements should become equal height.
options.resize string Whether to also run on window resize, as well as each breakpoint change. Of course, throttled.
options.checkImages string Whether to check for images inside the elements that are going to get equal heights and run when the images have all been loaded and all element heights have been finalised.
options.enter string Comma separated list of breakpoints in which the module enters, wihch means it is enabled.
options.leave string Comma separated list of breakpoints in which the module leaves, which means it is disabled.
Author:
  • Nevma, info@nevma.gr
License:
  • Nevma Copyright (c) http://www.nevma.gr
Fires:

Extends

Members

staticResponsiville.Equalheights.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Equalheights.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

Methods

staticResponsiville.Equalheights.autoRun(){void}

responsiville.equalheights.js, line 244
Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

disable(){void}

responsiville.equalheights.js, line 377
Disables the equalheights.
Fires:
Returns:
Type Description
void

enable(){void}

responsiville.equalheights.js, line 303
Enables the equalheights.
Fires:
Returns:
Type Description
void

equalise(startIndex, endIndex){void}

responsiville.equalheights.js, line 508
Makes all elements inside the given range take up equal height.
Name Type Description
startIndex int The starting point of the range inside the given elements array.
endIndex int The ending point of the range inside the given elements array.
Returns:
Type Description
void

imageError(event){void}

responsiville.equalheights.js, line 472
Runs when an image inside an element in the equal heights module has aborted loading due to any error.
Name Type Description
event Event The image error event that originally fired.
Fires:
Returns:
Type Description
void

imageLoaded(event){void}

responsiville.equalheights.js, line 436
Callback that runs when an image inside an element in the equal heights module has successfully loaded.
Name Type Description
event Event The image loaded event that originally fired.
Fires:
Returns:
Type Description
void

runElements(){void}

responsiville.equalheights.js, line 577
Runs through elements and groups them in bunches, ie groups that take up full rows of content pertaining to the given container and for each breakpoint, in order to make them take up equal heights. The algorithm used to achieve this is based on iterating over the given elements and detecting where a new row of elements has begun (row refers to what the user sees according to what the browser has rendered).
Fires:
Returns:
Type Description
void

setupEvents(){void}

responsiville.equalheights.js, line 265
Sets up event handlers necessary for the object to function properly.
Returns:
Type Description
void

Events

disabled

responsiville.equalheights.js, line 413
Called after the module has been disabled.

enabled

responsiville.equalheights.js, line 357
Called after the module has been enabled.

init

responsiville.equalheights.js, line 182
Called after the module has been initialised.