Adjusted Gruntfile and restructured code

Author: pixelprogrammer

Gruntfile.js

@@ -12,7 +12,8 @@ module.exports = function( grunt ) {
 				" *  <%= pkg.description %>\n" +
 				" *  <%= pkg.homepage %>\n" +
 				" *\n" +
-				" *  Made by <%= pkg.author.name %>\n" +
+				" *  Author <%= pkg.author.name %>\n" +
+				" *  Website <%= pkg.author.url %>\n" +
 				" *  Under <%= pkg.license %> License\n" +
 				" */\n"
 		},
@@ -22,35 +23,34 @@ module.exports = function( grunt ) {
 				banner: "<%= meta.banner %>"
 			},
 			dist: {
-				src: [ "src/jquery.boilerplate.js" ],
-				dest: "dist/jquery.boilerplate.js"
+				src: [ "src/jquery.col-same-height.js" ],
+				dest: "dist/jquery.col-same-height.js"
 			}
 		},
 
 		uglify: {
 			dist: {
-				src: [ "dist/jquery.boilerplate.js" ],
-				dest: "dist/jquery.boilerplate.min.js"
+				src: [ "src/jquery.col-same-height.js" ],
+				dest: "dist/jquery.col-same-height.min.js"
 			},
 			options: {
 				banner: "<%= meta.banner %>"
 			}
 		},
-
+		jshint: {
+			all: ["src/jquery.col-same-height.js"]
+		},
 		watch: {
-			files: [ "src/*", "test/**/*" ],
-			tasks: [ "default" ]
+			files: [ "src/*.js" ],
+			tasks: [ "build" ]
 		}
 
 	} );
 
 	grunt.loadNpmTasks( "grunt-contrib-concat" );
 	grunt.loadNpmTasks( "grunt-contrib-jshint" );
-	grunt.loadNpmTasks( "grunt-jscs" );
 	grunt.loadNpmTasks( "grunt-contrib-uglify" );
-	grunt.loadNpmTasks( "grunt-contrib-coffee" );
 	grunt.loadNpmTasks( "grunt-contrib-watch" );
-	grunt.loadNpmTasks( "grunt-karma" );
 
 	grunt.registerTask( "build", [ "jshint", "concat", "uglify" ] );
 };

README.md

@@ -23,6 +23,8 @@ If you have some columns you wish to set as the same height as each other just g
 
 In your javascript file, target those elements with that class and initialize the plugin for those elements
 
+## JavaScript
+
 ```javascript
 $(document).ready(function() {
 	$('.col-same-height').colSameHeight();
@@ -33,6 +35,8 @@ $(document).ready(function() {
 
 You might not want the columns to be the same height on certain screen sizes. Lets say the columns stack on top of each other when the width of the screen is less than 800px. We can define our own callback breakpoint functions. Lets take our example from before and add a `data-col-break` attribute. The value you set will be the name of the callback function. In this case we will name it 'lg':
 
+## HTML
+
 ```html
 <div class="col-same-height" data-col-break="lg">
 	some text
@@ -47,6 +51,8 @@ You might not want the columns to be the same height on certain screen sizes. Le
 
 Now lets define our own callback method. It should return true if we want the columns to be the same height or false if we don't.
 
+## JavaScript
+
 ```javascript
 $(document).ready(function() {
 	$('.col-same-height').colSameHeight({
@@ -64,4 +70,32 @@ $(document).ready(function() {
 })
 ```
 
-Now when you play around with the size of the window you can see that the columns will only be the same height when the window is 800px or larger.
+Now when you play around with the size of the window you can see that the columns will only be the same height when the window is 800px or larger.
+
+# Grouping Columns
+
+While its easy to separate your columns from eachother by just doing this in your script file:
+
+```javascript
+$('.col-same-height').colSameHeight();
+$('.col-same-height-alt').colSameHeight();
+```
+
+You can reuse the same class if needed and just add them to a group with the `data-col-group` attribute like so
+
+```html
+<!-- row 1 -->
+<div class="col-same-height" data-col-group="row-1"></div>
+<div class="col-same-height" data-col-group="row-1"></div>
+<div class="col-same-height" data-col-group="row-1"></div>
+<!-- row 2 -->
+<div class="col-same-height" data-col-group="row-2"></div>
+<div class="col-same-height" data-col-group="row-2"></div>
+<div class="col-same-height" data-col-group="row-2"></div>
+```
+
+This allows you to group your columns within your HTML.
+
+# Known Issues
+
+- Columns within an element with css `display: flex` have some issues when resizing the window. The height is slightly off

demo/demo.html

@@ -5,11 +5,10 @@
 </head>
 <link rel="stylesheet" type="text/css" href="styles.css">
 <body>
-	<div class="container">
+	<div class="container clearfix">
 		<div class="col col-same-height">
 			<h1>Text</h1>
 			<p>this is just going to have a little bit of text</p>
-			<img src="http://img08.deviantart.net/c3f4/i/2012/308/6/7/super_metroid_by_thiago_almeida-d5jz8cg.jpg" class="img-responsive">
 			<a class="button">A Button</a>
 		</div>
 		<div class="col col-same-height">
@@ -29,6 +28,31 @@ <h1>Last column</h1>
 			<a class="button">A Button</a>
 		</div>
 	</div>
+
+	<hr class="clear">
+
+	<div class="container clearfix">
+		<div class="col col-same-height" data-col-group="img">
+			<h1>Text</h1>
+			<p>this is just going to have a little bit of text but the image should make the height larger</p>
+			<img src="http://img08.deviantart.net/c3f4/i/2012/308/6/7/super_metroid_by_thiago_almeida-d5jz8cg.jpg" class="img-responsive">
+
+			<a class="button">A Button</a>
+		</div>
+		<div class="col col-same-height" data-col-group="img">
+
+			<h1>Some text</h1>
+			<p>When the page loads this column should be the tallest. However, the left column has an image which will need to be loaded. This will then force a refresh of the column sizes after it loads making the left column taller and the rest the same size.
+			</p>
+
+			<a class="button">A Button</a>
+		</div>
+		<div class="col col-same-height" data-col-group="img">
+			<h1>Last column</h1>
+			<p>this will also have a little bit of text</p>
+			<a class="button">A Button</a>
+		</div>
+	</div>
 </body>
 
 <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>

demo/styles.css

@@ -30,4 +30,23 @@
 .img-responsive {
 	max-width: 100%;
 	height: auto;
+}
+
+.clear {
+	margin: 20px 0;
+	clear: both;
+}
+
+.clearfix:after {
+    clear: both;
+    content: ".";
+    display: block;
+    height: 0;
+    visibility: hidden;
+}
+.clearfix {
+    display: inline-block;
+}
+.clearfix {
+    display: block;
 }

dist/jquery.col-same-height.js

@@ -0,0 +1,104 @@
+/*
+ *  col-same-height - v1.0.0
+ *  A jQuery plugin to keep columns at the same height
+ *  
+ *
+ *  Author Joseph McMurray (pixel programmer)
+ *  Website http://pixelprogrammer.net
+ *  Under ISC License
+ */
+(function($) {
+
+	var settings = null;
+
+	$.fn.colSameHeight = function(options) {
+
+		var el = this;
+
+		var defaults = {
+			breakpointCBs: {}, // breakpoint callback functions
+		};
+
+		settings = $.extend(defaults, options);
+
+		setColSameHeight(el);
+		$(window).resize(function() {
+			setColSameHeight(el);
+		});
+	};
+
+	function getCols(el) {
+		
+		var rows = {}; // we will use key maps
+		el.each(function() {
+			
+			// check if there is a break point to stop setting its height
+			var breakpoint = $(this).attr('data-col-break');
+
+			if( $.isFunction(settings.breakpointCBs[breakpoint]) ) {
+				// if false then we don't want to do anything
+				if( !settings.breakpointCBs[breakpoint].call(this) ) {
+					return;
+				}
+			}
+			
+			var group = $(this).attr('data-col-group');
+			if( !(group in rows) ) {
+				rows[group] = [];
+			}
+
+			rows[group].push(this);
+		});
+
+		return rows;
+	}
+
+	function setColSameHeight(el) {
+		// reset the height so we can calculate it
+		el.css('height', 'auto');
+		
+		var rows = getCols(el);
+		var max_height;
+		var height;
+
+		for(var group in rows) {
+
+			max_height = 0;
+
+			if( rows.hasOwnProperty(group) ) {
+
+				for( var i=0; i<rows[group].length; i++) {
+					var element = $(rows[group][i]);
+
+					var imgs = element.find('img');
+					for(var j=0; j < imgs.length; j++) {
+						attachImgHandler(imgs[j], rows[group]);
+					}
+
+					height = element.outerHeight();
+
+					if( height > max_height ) {
+						max_height = height;
+					}
+				}
+
+				$(rows[group]).css('height', max_height);
+			}
+		}
+	}
+
+	function colEqualImgLoad(e) {
+		setColSameHeight(e.data.el);
+		
+		$(e.currentTarget).off('load', colEqualImgLoad);
+	}
+
+	function attachImgHandler(img, group) {
+		// attach a load event for when the image has not fully loaded.
+		// We want to fire setColSameHeight() again as the img height from a loaded img can change the column height after the page has loaded
+		if(!$(img).prop('complete')) {
+			// pass in a reference to the group elements for the load object
+			$(img).on('load', {el: $(group)}, colEqualImgLoad);
+		}
+	}
+}(jQuery));

dist/jquery.col-same-height.min.js

@@ -0,0 +1,10 @@
+/*
+ *  col-same-height - v1.0.0
+ *  A jQuery plugin to keep columns at the same height
+ *  
+ *
+ *  Author Joseph McMurray (pixel programmer)
+ *  Website http://pixelprogrammer.net
+ *  Under ISC License
+ */
+!function(a){function b(b){var c={};return b.each(function(){var b=a(this).attr("data-col-break");if(!a.isFunction(f.breakpointCBs[b])||f.breakpointCBs[b].call(this)){var d=a(this).attr("data-col-group");d in c||(c[d]=[]),c[d].push(this)}}),c}function c(c){c.css("height","auto");var d,f,g=b(c);for(var h in g)if(d=0,g.hasOwnProperty(h)){for(var i=0;i<g[h].length;i++){for(var j=a(g[h][i]),k=j.find("img"),l=0;l<k.length;l++)e(k[l],g[h]);f=j.outerHeight(),f>d&&(d=f)}a(g[h]).css("height",d)}}function d(b){c(b.data.el),a(b.currentTarget).off("load",d)}function e(b,c){a(b).prop("complete")||a(b).on("load",{el:a(c)},d)}var f=null;a.fn.colSameHeight=function(b){var d=this,e={breakpointCBs:{}};f=a.extend(e,b),c(d),a(window).resize(function(){c(d)})}}(jQuery);

package.json

@@ -11,7 +11,10 @@
     "height",
     "jquery"
   ],
-  "author": "Joseph McMurray (pixel programmer)",
+  "author": {
+    "name": "Joseph McMurray (pixel programmer)",
+    "url": "http://pixelprogrammer.net"
+  },
   "license": "ISC",
   "devDependencies": {
     "grunt": "^1.0.1",

src/jquery.col-same-height.js

@@ -16,7 +16,7 @@
 		$(window).resize(function() {
 			setColSameHeight(el);
 		});
-	}
+	};
 
 	function getCols(el) {
 
@@ -61,14 +61,10 @@
 				for( var i=0; i<rows[group].length; i++) {
 					var element = $(rows[group][i]);
 
-					element.find('img').each(function() {
-						// attach a load event for when the image has not fully loaded.
-						// We want to fire setColSameHeight() again as img height can change on load
-						if(!$(this).prop('complete')) {
-							// pass in a reference to the element for the load object
-							$(this).on('load', {el: $(rows[group])}, col_equal_img_load);
-						}
-					});
+					var imgs = element.find('img');
+					for(var j=0; j < imgs.length; j++) {
+						attachImgHandler(imgs[j], rows[group]);
+					}
 
 					height = element.outerHeight();
 
@@ -77,16 +73,23 @@
 					}
 				}
 
-				$(rows[group]).each(function() {
-					$(this).css('height', max_height);
-				});
+				$(rows[group]).css('height', max_height);
 			}
 		}
 	}
 
-	function col_equal_img_load(e) {
+	function colEqualImgLoad(e) {
 		setColSameHeight(e.data.el);
 
-		$(e.currentTarget).off('load', col_equal_img_load);
+		$(e.currentTarget).off('load', colEqualImgLoad);
+	}
+
+	function attachImgHandler(img, group) {
+		// attach a load event for when the image has not fully loaded.
+		// We want to fire setColSameHeight() again as the img height from a loaded img can change the column height after the page has loaded
+		if(!$(img).prop('complete')) {
+			// pass in a reference to the group elements for the load object
+			$(img).on('load', {el: $(group)}, colEqualImgLoad);
+		}
 	}
 }(jQuery));