Structure
Equalizers Main Element
Information
Equalizers are used to make the contents of varying heights the same height. This can be used in conjunction with other components such as the Promo/Marketing Tiles. This will make sure that the grid content have an equal height so that they are not jagged.
Visual Example
This example makes use of the Promo/Marketing Tiles to show what they would look like once content has been equalized.
Bacon Ipsum
A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon?
Bacon Ipsum
A member lorem ipsum because who doesn't love bacon?
Bacon Ipsum
A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon?
Code Usage
There are two main classes to take into account when implementing the equalizer component. This includes:
- __mst_equalizer: The parent class/element that is used to search for content to be equalized.
- __mst_equalizer_child: The child class/element that will be equalized.
What the equalizer plugin does is searches through all of the parent elements for child elements that need to be equalized. It will then iterate over those child elements to determine which one is the largest. Once determined it applies this height to all other elements that have been marked to be equalized.
HTML Example using Promo/Marketing Tiles:
Bacon Ipsum
A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon?
Bacon Ipsum
A member lorem ipsum because who doesn't love bacon?
Bacon Ipsum
A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon? A member lorem ipsum because who doesn't love bacon?
Javascript Initialization:
To initialize the equalizer class, simply add the following script tag to the base of the page.
$('.__mst_equalizer').__mstEqualizer();