Equalize

Equal Heights

Quickly equalize heights of grouped or individual elements in the page. Grouped elements are evaluated on a per row basis so that each row stays nice and neat. Manually clear heights or set the breakpoint at which heights are cleared.


Resource Files

Equalize requires the following resource files:

Js
								
									<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
									<script type="text/javascript" src="js/jquery.tm.equalize.min.js"></script>
								
							

By Group

Box 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dois nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations. Steve Jobs

Box 3
  • Sed ut perspiciatis
  • Lorem ipsum dolor
    • Accusantium
    • Ratione voluptatem
  • Sed quia non
  • Neque porro quisquam
  • Accusantium
  • Ratione voluptatem
  • Lorem ipsum dolor
    • Accusantium
    • Ratione voluptatem
Box 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dois nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Box 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dois nostrud exercitation.

Box 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dois nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, liquip ex ea commodo consequat.

Example
								
									
Content
Content
Content
Content
Content
Content
Js
								
									$( document ).ready( function(){
										$( '.equalize' ).equalHeights()
									});
								
							

Individual Items

To make one or multiple elements in different locations in the page follow the leader, add the attribute data-leader="leader-name" to the element that should be used as a reference, and data-follow="leader-name" to any element whose height should be equalized.

Leader

Equalize gets the height of this wrapper and applies it to the followers.

Follower

This box is a follower

Follower

This box is also a follower

Example
								
									
Content
Content
Content
Js
								
									$( document ).ready( function({
										$( '#leader-1' ).equalHeights({
											equalizeByGroup: false
										});
									});
								
							

Equalize Usage

To call the Equalize plugin on one or multiple elements the following call should be added before the closing body tag on document ready.

Example
								
									$( document ).ready( function(){
										$( '.equalize' ).equalHeights()
									});
								
							
Attribute Values Default Description
equlizeByGroup boolean true Whether all children within a griven group shoulde be equalized on a per row basis
updateOnResize boolean true Whether heights should update on window resize
clearUnder number 479 Breakpoint at which plugin should stop setting heights

API

The Equalize plugin offers two public methods, namely .updateHeights() and .clearHeights() which are particularly useful if more elements are dynamically appended to the page.

Leader

Equalize gets the height of this wrapper and applies it to the followers.

Follower

This box is a follower

Follower

This box is also a follower

2 Methods
Medthod Example Description
updateHeights var equalize = $( '#equalize-leader-2' ).data( 'equalizeHeights' );
equalize.updateHeights();
Will force the height of followers to update
clearHeights var equalize = $( '#equalize-leader-2' ).data( 'equalizeHeights' );
equalize.clearHeights();
Will force the height of followers to be cleared
Theme Mountain

Current Version