├── jquery.equalheightcolumns.min.js
├── README.md
├── jquery.equalheightcolumns.js
└── index.html


/jquery.equalheightcolumns.min.js:
--------------------------------------------------------------------------------
1 | /* equalHeightColumns.js 1.2, https://github.com/PaulSpr/jQuery-Equal-Height-Columns */
2 | (function(e){e.fn.equalHeightColumns=function(t){defaults={minWidth:-1,maxWidth:99999,setHeightOn:"min-height",defaultVal:0,equalizeRows:false,checkHeight:"height"};var n=e(this);t=e.extend({},defaults,t);var r=function(){var r=e(window).width();var i=Array();if(t.minWidth<r&&t.maxWidth>r){var s=0;var o=0;var u=0;n.css(t.setHeightOn,t.defaultVal);n.each(function(){if(t.equalizeRows){var n=e(this).position().top;if(n!=u){if(i.length>0){e(i).css(t.setHeightOn,o);o=0;i=[]}u=e(this).position().top}i.push(this)}s=e(this)[t.checkHeight]();if(s>o){o=s}});if(!t.equalizeRows){n.css(t.setHeightOn,o)}else{e(i).css(t.setHeightOn,o)}}else{n.css(t.setHeightOn,t.defaultVal)}};r();e(window).resize(r);n.find("img").load(r);if(typeof t.afterLoading!=="undefined"){n.find(t.afterLoading).load(r)}if(typeof t.afterTimeout!=="undefined"){setTimeout(function(){r();if(typeof t.afterLoading!=="undefined"){n.find(t.afterLoading).load(r)}},t.afterTimeout)}}})(jQuery)


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | jQuery-Equal-Height-Columns
 2 | ===========================
 3 | 
 4 | A simple jQuery plugin that makes the matched elements of equal height, based on the tallest element. Very useful if you have multiple horizontally aligned elements with a background that need to be of the same height. Every elements height is usually very unpredictable, especially if the page is responsive. Fixed heights are not the answer.
 5 | 
 6 | Usage of this plugin is simple. You just match the elements that need to be of the same height, and the plugin does the rest. If you make a responsive website that starts as a single column layout but changes into a multi column one from a certain viewport width, you can use the minWidth option to be sure that only than the plugin is applied.
 7 | 
 8 | 
 9 | Example call:
10 | 
11 |       $('.blocks li').equalHeightColumns({
12 |         minWidth: 500,
13 |         maxWidth: 1000
14 |       });
15 | 
16 | 
17 | Example HTML:
18 | 
19 |     <ul class="blocks">
20 |       <li>
21 |         <h2>...</h2>
22 |         <p>....</p>
23 |       </li>
24 | 
25 |       <li>
26 |         <h2>...</h2>
27 |         <p>...</p>
28 |         <p>...</p>
29 |         <p>...</p>
30 |       </li>
31 | 
32 |       <li>
33 |         <h2>...</h2>
34 |         <p>...</p>
35 |         <p>...</p>
36 |       </li>
37 |     </ul>
38 | 
39 | 
40 | Example CSS:
41 | 
42 |       .blocks{
43 |         list-style: none;
44 |         width: 50%;
45 |         margin: 0px auto;
46 |         overflow: hidden;
47 |         margin-bottom: 20px;
48 |       }
49 |       .blocks li{
50 |         background: #eee;
51 |         margin: 0 1%;
52 |         padding: 0 2%;
53 |         width: 27.33333%;
54 |         float: left;
55 |       }
56 | 
57 | 
58 | New 1.1 options
59 | ---------------
60 | 
61 | 	afterLoading: 'iframe'
62 | 
63 | 'afterLoading' attaches a load event to the selector in 'afterLoading' and fires the resize code.
64 | 
65 | 	afterTimeout: 500
66 | 	
67 | 'afterTimeout' takes time in miliseconds and fires the resize code after that timeout.
68 | 
69 | If you set both 'afterTimeout' and 'afterLoading' the 'afterLoading' code will also be fired after the timeout. This way you can make sure that dynamically added content (like social media related iframes) are present in the DOM.
70 | 
71 | New 1.2 options
72 | ---------------
73 | 
74 | 	equalizeRows: false
75 | 	
76 | Set this option to 'true' to equalize every row individually. This way every colum is set to the tallest column in the row which can result in every row having a different height.
77 | 
78 | 	checkHeight: 'height'
79 | 	
80 | This option determines what method to use to determine a columns height. If you use box-sizing: border-box, it might be better to set this option to innerHeight. This might become the default in a future version since it seems to work well in most cases.


--------------------------------------------------------------------------------
/jquery.equalheightcolumns.js:
--------------------------------------------------------------------------------
  1 | /*global jQuery */
  2 | /*! 
  3 | * equalHeightColumns.js 1.2
  4 | * https://github.com/PaulSpr/jQuery-Equal-Height-Columns
  5 | *
  6 | * Copyright 2014, Paul Sprangers http://paulsprangers.com
  7 | * Released under the WTFPL license 
  8 | * http://www.wtfpl.net
  9 | *
 10 | * Date: Sat Dec 13 11:30:00 2014 +0100
 11 | */
 12 | 
 13 | (function( $ ){
 14 | 
 15 |     $.fn.equalHeightColumns = function( options ) {
 16 | 
 17 |             defaults = { 
 18 |                 minWidth: -1,               // Won't resize unless window is wider than this value
 19 |                 maxWidth: 99999,            // Won't resize unless window is narrower than this value
 20 |                 setHeightOn: 'min-height',   // The CSS attribute on which the equal height is set. Usually height or min-height
 21 |                 defaultVal: 0,              // Default value (for resetting columns before calculation of the maximum height) for the CSS attribute defined via setHeightOn, e.g. 'auto' for 'height' or 0 for 'minHeight'
 22 |                 equalizeRows: false,		// Give every column in indiviual rows even height. Every row can have a different height this way
 23 | 				checkHeight: 'height'		// Which height to check, using box-sizing: border-box, innerHeight is probably more appropriate
 24 |             };
 25 | 
 26 |             var $this   = $(this); // store the object
 27 |             options     = $.extend( {}, defaults, options ); // merge options
 28 |             
 29 |             // Resize height of the columns
 30 |             var resizeHeight = function () {
 31 | 
 32 |                 // Get window width
 33 |                 var windowWidth = $(window).width();
 34 | 				var currentElements = Array();
 35 | 
 36 |                 // Check to see if the current browser width falls within the set minWidth and maxWidth
 37 |                 if( options.minWidth < windowWidth  &&  options.maxWidth > windowWidth ){
 38 |                     var height = 0;
 39 |                     var highest = 0;
 40 | 					var yPos = 0;
 41 | 
 42 |                     // Reset heights
 43 |                     $this.css( options.setHeightOn, options.defaultVal );
 44 | 
 45 |                     // Figure out the highest element
 46 |                     $this.each( function(){
 47 | 
 48 | 						if( options.equalizeRows ){
 49 | 							// Check if y position of the element is bigger, if so, it's on another row.
 50 | 							// Make sure that the height is only set relative to elements in the same row.
 51 | 							var elYPos = $(this).position().top;
 52 | 
 53 | 							if( elYPos != yPos ){
 54 | 								// new row, so set the height of the elements of the previous row
 55 | 								if( currentElements.length > 0 ) {
 56 | 									$(currentElements).css(options.setHeightOn, highest);
 57 | 									// clear the array and reset values for the new row
 58 | 									highest = 0;
 59 | 									currentElements = [];
 60 | 								}
 61 | 								// get element elYPos again since it might have changed because of the resize
 62 | 								yPos = $(this).position().top;
 63 | 
 64 | 							}
 65 | 
 66 | 							currentElements.push(this);
 67 | 						}
 68 | 
 69 | 						// do the height check and if it's the highest, set it as such
 70 | 						height = $(this)[options.checkHeight]();
 71 | 
 72 | 						if( height > highest ){
 73 | 							highest = height;
 74 | 						}
 75 | 
 76 |                     } );
 77 | 
 78 | 					if( !options.equalizeRows ){
 79 | 						// Set that height on the elements at once
 80 | 						$this.css( options.setHeightOn, highest );
 81 | 					}
 82 | 					else{
 83 | 						// set height on elements in last row
 84 | 						$(currentElements).css( options.setHeightOn, highest );
 85 | 					}
 86 | 
 87 |                 }
 88 |                 else{
 89 |                     // Add check so this doesn't have to happen everytime 
 90 |                     $this.css(options.setHeightOn, options.defaultVal);
 91 |                 }
 92 |             };
 93 | 
 94 |             // Call once to set initially
 95 |             resizeHeight();
 96 | 
 97 |             // Call on resize. Opera debounces their resize by default. 
 98 |             $(window).resize(resizeHeight);
 99 |             
100 |             // Also check if any images are present and recalculate when they load
101 |             // there might be an optimization opportunity here
102 |             $this.find('img').load( resizeHeight );
103 |             
104 |             // If afterLoading is defined, add a load event to the selector
105 |             if ( typeof options.afterLoading !== 'undefined' ) {
106 |             	$this.find(options.afterLoading).load( resizeHeight );
107 | 			}
108 | 			
109 | 			// If afterTimeout is defined use it a the timeout value
110 | 			if ( typeof options.afterTimeout !== 'undefined' ) {
111 |             	setTimeout(function(){
112 | 	            	resizeHeight();
113 | 	            	
114 | 	            	// check afterLoading again, to make sure that dynamically added nodes are present
115 | 	            	if ( typeof options.afterLoading !== 'undefined' ) {
116 | 		            	$this.find(options.afterLoading).load( resizeHeight );
117 | 					}
118 |             	}, options.afterTimeout);
119 | 			}
120 | 
121 |     };
122 | 
123 | })( jQuery );
124 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>  
  2 | 
  3 | <html lang="nl">
  4 | 
  5 | <head>
  6 | 	<meta charset="utf-8">
  7 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8 | 	
  9 | 	<!-- 
 10 | 	This website was carefully constructed by
 11 | 	Interactive Studios
 12 | 	http://www.interactivestudios.nl
 13 | 	-->
 14 | 	
 15 | 	<title>EqualHeightColumns test</title>
 16 | 	
 17 | 	
 18 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 19 | 	
 20 | 		
 21 | 
 22 | 	
 23 | 	<style type="text/css">
 24 | 		.blocks, .blocks-2{
 25 | 			list-style: none;
 26 | 			width: 50%;
 27 | 			margin: 0px auto;
 28 | 			overflow: hidden;
 29 | 			margin-bottom: 20px;
 30 | 		}
 31 | 		.blocks li{
 32 | 			background: #eee;
 33 | 			margin: 0 1% 10px;
 34 | 			padding: 0 2%;
 35 | 			width: 27.33333%;
 36 | 			float: left;
 37 | 		}
 38 | 		.blocks-2 li{
 39 | 			background: #eee;
 40 | 			margin: 0 1% 10px;
 41 | 			padding: 0 2%;
 42 | 			width: 100px;
 43 | 			float: left;
 44 | 		}
 45 | 		img{
 46 | 			max-width: 100%;
 47 | 		}
 48 | 
 49 | 	</style>
 50 | 	
 51 | </head>
 52 | 
 53 | 
 54 | <body>
 55 | 	
 56 | 
 57 | 	<ul class="blocks test-1">
 58 | 		<li>
 59 | 			<h2>jQuery Equal Height Columns</h2>
 60 | 			<p>This plugin makes multiple elements as high as the tallest element among them.</p>
 61 | 			<p>It also works great for responsive and fluid designs.</p>
 62 | 		</li>
 63 | 
 64 | 		
 65 | 
 66 | 		<li>
 67 | 			<h2>But does it have a lot of options I can set myself?.</h2>
 68 | 			<p>There are three options you can set. MaxWidth is probably useless, but hey, it's there if you want to use it.</p>
 69 | 			<p><strong>minWidth</strong>: The plugin won't do anything unless the width is wider than this value</p>
 70 | 			<p><strong>maxWidth</strong>: The plugin won't do anything unless the width is smaller than this value</p>
 71 | 			<p><strong>setHeightOn</strong>: The css attribute on which the height gets set.</p>
 72 | 		</li>
 73 | 
 74 | 		<li>
 75 | 			<h2>Does it have downsides?</h2>
 76 | 			<p>Yes. It works best on colums which are on a single line. If they span more lines the plugin won't take into account that each row probably would be better of with a different height. Now every row will have the height of the tallest element in the entire selection.</p>
 77 | 			<p>Second, you can only have a single (configurable) bounded range for which the plugin kicks-in. This could be a problem in certain responsive websites.</p>
 78 | 			
 79 | 		</li>
 80 | 	</ul>
 81 | 
 82 | 
 83 | 
 84 | 
 85 | 	<ul class="blocks test-2">
 86 | 		<li>
 87 | 			<div class="text">
 88 | 				<h2>Why this plugin?</h2>
 89 | 				<p><strong>You could do this with tables right?</strong> Yes, but it's not semantic. Also it's not flexible enough for responsive websites.</p>
 90 | 				<p><strong>But... Flexbox?</strong> It's possible, on IE10+.</p>
 91 | 				<p><strong>What about display: table-cell;?.</strong> A bit better support, but you can't pull of example 2.</p>
 92 | 			</div>
 93 | 			<p><a href="#">Don't read more</a></p>
 94 | 		</li>
 95 | 
 96 | 		
 97 | 
 98 | 		<li>
 99 | 			<div class="text">	
100 | 				<h2>About example 1 (look up)</h2>
101 | 				<p>It uses the minWidth and maxWidth options. You can see this in effect when you resize your your browser window.</p>
102 | 			</div>
103 | 			<p><a href="#">Don't read more</a></p>
104 | 		</li>
105 | 
106 | 		<li>
107 | 			<div class="text">
108 | 				<h2>About example 2</h2>
109 | 				<p>This example wraps the main text in a wrapper div, followed by an &lt;a&gt; element. The plugin works it's magic on the wrapper div, which results in the links neatly matching up vertically.</p>
110 | 				
111 | 			</div>
112 | 			<p><a href="#">Don't read more</a></p>
113 | 		</li>
114 | 	</ul>
115 | 	
116 | 	
117 | 	
118 | 	<ul class="blocks test-3">
119 | 		<li>
120 | 			<div class="text">
121 | 				<h2>Why this plugin?</h2>
122 | 				<p>
123 | 					<img src="http://www.placehold.it/300x400" />
124 | 				</p>
125 | 			</div>
126 | 			<p><a href="#">Don't read more</a></p>
127 | 		</li>
128 | 
129 | 		
130 | 
131 | 		<li>
132 | 			<div class="text">	
133 | 				<h2>About example 1 (look up)</h2>
134 | 				<p>
135 | 					<img src="http://www.placehold.it/300x600" />
136 | 				</p>
137 | 			</div>
138 | 			<p><a href="#">Don't read more</a></p>
139 | 		</li>
140 | 
141 | 		<li>
142 | 			<div class="text">
143 | 				<p>
144 | 					<img src="http://www.placehold.it/500x300" />
145 | 				</p>
146 | 			</div>
147 | 			<p><a href="#">Don't read more</a></p>
148 | 		</li>
149 | 	</ul>
150 | 	
151 | 	
152 | 	
153 | 	<ul class="blocks test-4">
154 | 		<li>
155 | 			<div class="text">
156 | 				<h2>Why this plugin?</h2>
157 | 				<p>
158 | 					<img src="http://www.placehold.it/300x400" />
159 | 				</p>
160 | 			</div>
161 | 			<p><a href="#">Don't read more</a></p>
162 | 		</li>
163 | 
164 | 		
165 | 
166 | 		<li>
167 | 			<div class="text">	
168 | 				<h2>About example 1 (look up)</h2>
169 | 				<p>
170 | 					<img src="http://www.placehold.it/300x600" />
171 | 				</p>
172 | 			</div>
173 | 			<p><a href="#">Don't read more</a></p>
174 | 		</li>
175 | 
176 | 		<li>
177 | 			<div class="text">
178 | 				<p>
179 | 					<img src="http://www.placehold.it/500x300" />
180 | 				</p>
181 | 			</div>
182 | 			<p><a href="#">Don't read more</a></p>
183 | 		</li>
184 | 	</ul>
185 | 
186 | 
187 | 
188 | 	<ul class="blocks test-5">
189 | 		<li>
190 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
191 | 		</li>
192 | 		<li>
193 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda blanditiis consequuntur dolores.
194 | 		</li>
195 | 		<li>
196 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda.
197 | 		</li>
198 | 		<li>
199 | 			Lorem ipsum dolor sit amet.
200 | 		</li>
201 | 		<li>
202 | 			Lorem ipsum dolor.
203 | 		</li>
204 | 		<li>
205 | 			Lorem ipsum dolor sit amet, consectetur adipisicing.
206 | 		</li>
207 | 		<li>
208 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda delectus dolores esse perferendis provident quod similique voluptatem.
209 | 		</li>
210 | 		<li>
211 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda blanditiis consequuntur dolores. Aliquid eius esse, explicabo ipsam libero nemo possimus provident temporibus voluptate voluptatem. Aliquid eius esse, explicabo ipsam libero nemo possimus provident temporibus voluptate voluptatem.
212 | 		</li>
213 | 		<li>
214 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda.
215 | 		</li>
216 | 	</ul>
217 | 
218 | 
219 | 	<ul class="blocks-2 test-6">
220 | 		<li>
221 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
222 | 		</li>
223 | 		<li>
224 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda blanditiis consequuntur dolores.
225 | 		</li>
226 | 		<li>
227 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda.
228 | 		</li>
229 | 		<li>
230 | 			Lorem ipsum dolor sit amet.
231 | 		</li>
232 | 		<li>
233 | 			Lorem ipsum dolor.
234 | 		</li>
235 | 		<li>
236 | 			Lorem ipsum dolor sit amet, consectetur adipisicing.
237 | 		</li>
238 | 		<li>
239 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda delectus dolores esse perferendis provident quod similique voluptatem.
240 | 		</li>
241 | 		<li>
242 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda blanditiis consequuntur dolores. Aliquid eius esse, explicabo ipsam libero nemo possimus provident temporibus voluptate voluptatem. Aliquid eius esse, explicabo ipsam libero nemo possimus provident temporibus voluptate voluptatem.
243 | 		</li>
244 | 		<li>
245 | 			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda.
246 | 		</li>
247 | 	</ul>
248 | 	
249 | 	
250 | 	
251 | 	
252 | 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
253 | 	<script src="jquery.equalheightcolumns.js"></script>
254 | 
255 | 	<script>
256 | 		$('.test-1 li').equalHeightColumns({
257 | 			minWidth: 500,
258 | 			maxWidth: 1000
259 | 		});
260 | 
261 | 		$('.test-2 .text').equalHeightColumns();
262 | 		$('.test-3 .text').equalHeightColumns();
263 | 		
264 | 		$('.test-4 .text').equalHeightColumns({
265 | 			afterLoading : 'iframe',
266 | 			afterTimeout : 500
267 | 		});
268 | 
269 | 		$('.test-5 li').equalHeightColumns({
270 | 			//checkHeight: 'height',
271 | 			equalizeRows: true
272 | 		});
273 | 
274 | 		$('.test-6 li').equalHeightColumns({
275 | 			//checkHeight: 'height',
276 | 			equalizeRows: true
277 | 		});
278 | 	</script>
279 | 
280 |   
281 | </body>
282 | 
283 | </html>


--------------------------------------------------------------------------------