├── .gitignore ├── Gulpfile.js ├── LICENSE ├── README.md ├── bower.json ├── dist ├── equalizer.js └── equalizer.min.js ├── equalizer.js ├── package.json └── test ├── test_amd.html ├── test_browserify.js ├── test_browserify_bundle.js ├── test_flexbox.html ├── test_global.html └── test_node.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /Gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | umd = require('gulp-umd'), 3 | uglify = require('gulp-uglify'), 4 | jslint = require('gulp-jslint'), 5 | rename = require('gulp-rename'); 6 | 7 | gulp.task('umd', function() { 8 | return gulp.src('./equalizer.js') 9 | .pipe(umd()) 10 | .pipe(gulp.dest('dist')); 11 | }); 12 | 13 | gulp.task('compress', function() { 14 | return gulp.src('./dist/equalizer.js') 15 | .pipe(uglify()) 16 | .pipe(rename('equalizer.min.js')) 17 | .pipe(gulp.dest('./dist')); 18 | }); 19 | 20 | gulp.task('lint', function() { 21 | return gulp.src('./equalizer.js') 22 | .pipe(jslint()); 23 | }); 24 | 25 | gulp.task('build', ['lint', 'umd', 'compress']); 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 - 2015 Szymon Krajewski 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Equalizer 2 | =========================== 3 | ![npm version](https://img.shields.io/npm/v/equalizer.svg) 4 | ![bower version](https://img.shields.io/bower/v/equalizer.svg) 5 | ![dependencies](https://img.shields.io/david/skrajewski/equalizer.svg) 6 | ![devDependencies](https://img.shields.io/david/dev/skrajewski/equalizer.svg) 7 | 8 | Dependency free package to keep HTML elements with equal height! 9 | 10 | ## Preinstall - maybe you should use flexbox? 11 | Hey, maybe you even don't need any extra package to control this behaviour. If you can you should use `flexbox`, just add this css... 12 | 13 | ```css 14 | section { 15 | display: flex; 16 | } 17 | ``` 18 | 19 | Tada! All blocks inside section should have equal height. 20 | * [Check flexbox in caniuse.com](http://caniuse.com/#feat=flexbox) 21 | * [See example in my test directory](https://github.com/skrajewski/Equalizer/blob/master/test/test_flexbox.html) 22 | 23 | ## Install 24 | 25 | #### Using _bower_ 26 | ``` 27 | bower install equalizer 28 | ``` 29 | 30 | #### Using _npm_ 31 | 32 | ``` 33 | npm install equalizer 34 | ``` 35 | 36 | ## What is Equalizer? 37 | 38 | Equalizer is small JavaScript file. Sometimes you need to keep some block with equal height, e.g all divs in row. Equalizer gets maximum height and set it to all blocks as min-height property. 39 | 40 | Before equalize: 41 | ![before equalize](http://i.imgur.com/4NWL6Sk.png, "Blocks before equalize") 42 | 43 | After: 44 | ![before equalize](http://i.imgur.com/lq7EUcd.png, "Blocks after equalize") 45 | 46 | ## How to use 47 | 48 | ### Import directly in HTML through ` 54 | 64 | ``` 65 | 66 | ### *CommonJS* (node style), e.g. using browserify 67 | ```javascript 68 | var Equalizer = require('equalizer'); 69 | var eq = new Equalizer('.row .align'); 70 | 71 | eq.align(); 72 | ``` 73 | 74 | ### *RequireJS* (AMD) 75 | ```javascript 76 | requirejs(['equalizer'], function(Equalizer) { 77 | var blocks = new Equalizer('.row .align'); 78 | blocks.align(); 79 | }); 80 | ``` 81 | 82 | ### Simple alignment 83 | ```javascript 84 | Equalizer('.row .align').align(); 85 | ``` 86 | 87 | ## License 88 | The MIT License. Copyright © 2014 - 2016 Szymon Krajewski. 89 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Equalizer", 3 | "main": "dist/equalizer.js", 4 | "version": "1.0.0", 5 | "homepage": "https://github.com/skrajewski/Equalizer", 6 | "authors": [ 7 | "Szymon Krajewski " 8 | ], 9 | "description": "A simple way to keep elements with equal height without jQuery!", 10 | "moduleType": [ 11 | "amd", 12 | "globals", 13 | "node" 14 | ], 15 | "keywords": [ 16 | "vanilliajs", 17 | "equalizer", 18 | "js", 19 | "height", 20 | "dom", 21 | "equal" 22 | ], 23 | "license": "MIT", 24 | "ignore": [ 25 | "**/.*", 26 | "node_modules", 27 | "bower_components", 28 | "test", 29 | "tests" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /dist/equalizer.js: -------------------------------------------------------------------------------- 1 | ;(function(root, factory) { 2 | if (typeof define === 'function' && define.amd) { 3 | define([], factory); 4 | } else if (typeof exports === 'object') { 5 | module.exports = factory(); 6 | } else { 7 | root.Equalizer = factory(); 8 | } 9 | }(this, function() { 10 | /*jslint browser:true */ 11 | 12 | /** 13 | * Equalizer - A simple way to keep elements with equal height! 14 | * 15 | * @author Szymon Krajewski szykra@gmail.com 16 | * @license The MIT License (MIT) 17 | */ 18 | var Equalizer = (function () { 19 | "use strict"; 20 | 21 | /** 22 | * Initial equalizer 23 | * 24 | * @param {String|NodeList} blocks 25 | * @constructor 26 | */ 27 | function Equalizer(blocks) { 28 | if (!(this instanceof Equalizer)) { 29 | return new Equalizer(blocks); 30 | } 31 | 32 | if (typeof blocks === "string") { 33 | this.blocks = document.querySelectorAll(blocks); 34 | return; 35 | } 36 | 37 | this.blocks = blocks; 38 | } 39 | 40 | /** 41 | * Recalculate height of blocks 42 | */ 43 | Equalizer.prototype.align = function () { 44 | var maxHeight = 0, 45 | max = this.blocks.length, 46 | i; 47 | 48 | for (i = 0; i < max; i += 1) { 49 | this.blocks[i].style.minHeight = ""; 50 | 51 | maxHeight = Math.max(maxHeight, this.blocks[i].clientHeight); 52 | } 53 | 54 | for (i = 0; i < max; i += 1) { 55 | this.blocks[i].style.minHeight = maxHeight + "px"; 56 | } 57 | }; 58 | 59 | return Equalizer; 60 | }()); 61 | 62 | return Equalizer; 63 | })); 64 | -------------------------------------------------------------------------------- /dist/equalizer.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.Equalizer=e()}(this,function(){var t=function(){"use strict";function t(e){return this instanceof t?"string"==typeof e?void(this.blocks=document.querySelectorAll(e)):void(this.blocks=e):new t(e)}return t.prototype.align=function(){var t,e=0,i=this.blocks.length;for(t=0;i>t;t+=1)this.blocks[t].style.minHeight="",e=Math.max(e,this.blocks[t].clientHeight);for(t=0;i>t;t+=1)this.blocks[t].style.minHeight=e+"px"},t}();return t}); -------------------------------------------------------------------------------- /equalizer.js: -------------------------------------------------------------------------------- 1 | /*jslint browser:true */ 2 | 3 | /** 4 | * Equalizer - A simple way to keep elements with equal height! 5 | * 6 | * @author Szymon Krajewski szykra@gmail.com 7 | * @license The MIT License (MIT) 8 | */ 9 | var Equalizer = (function () { 10 | "use strict"; 11 | 12 | /** 13 | * Initial equalizer 14 | * 15 | * @param {String|NodeList} blocks 16 | * @constructor 17 | */ 18 | function Equalizer(blocks) { 19 | if (!(this instanceof Equalizer)) { 20 | return new Equalizer(blocks); 21 | } 22 | 23 | if (typeof blocks === "string") { 24 | this.blocks = document.querySelectorAll(blocks); 25 | return; 26 | } 27 | 28 | this.blocks = blocks; 29 | } 30 | 31 | /** 32 | * Recalculate height of blocks 33 | */ 34 | Equalizer.prototype.align = function () { 35 | var maxHeight = 0, 36 | max = this.blocks.length, 37 | i; 38 | 39 | for (i = 0; i < max; i += 1) { 40 | this.blocks[i].style.minHeight = ""; 41 | 42 | maxHeight = Math.max(maxHeight, this.blocks[i].clientHeight); 43 | } 44 | 45 | for (i = 0; i < max; i += 1) { 46 | this.blocks[i].style.minHeight = maxHeight + "px"; 47 | } 48 | }; 49 | 50 | return Equalizer; 51 | }()); 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "equalizer", 3 | "version": "1.0.0", 4 | "description": "A simple way to keep elements with equal height without jQuery!", 5 | "main": "dist/equalizer.min.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "devDependencies": { 10 | "gulp": "^3.8.8", 11 | "gulp-jslint": "^0.2.0", 12 | "gulp-rename": "^1.2.0", 13 | "gulp-umd": "^0.2.0", 14 | "gulp-uglify": "^1.0.1", 15 | "requirejs": "^2.1.15" 16 | }, 17 | "scripts": { 18 | "test": "echo \"Error: no test specified\" && exit 1" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "https://github.com/skrajewski/Equalizer.git" 23 | }, 24 | "keywords": [ 25 | "vaniliajs", 26 | "equalizer", 27 | "js", 28 | "height", 29 | "dom", 30 | "equal" 31 | ], 32 | "author": "Szymon Krajewski ", 33 | "license": "MIT", 34 | "bugs": { 35 | "url": "https://github.com/skrajewski/Equalizer/issues" 36 | }, 37 | "homepage": "https://github.com/skrajewski/Equalizer" 38 | } 39 | -------------------------------------------------------------------------------- /test/test_amd.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Equalizer - AMD Test 7 | 8 | 22 | 23 | 24 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum laudantium quia reprehenderit eaque, laboriosam voluptatem harum tenetur! Quisquam, reiciendis nesciunt tenetur odit modi ut, obcaecati quia praesentium adipisci deserunt!
25 | 26 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, expedita.
27 | 28 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias placeat cupiditate sapiente beatae dolorum consectetur tempore voluptatum, ut quis debitis!
29 | 30 |
31 | 32 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum laudantium quia reprehenderit eaque, laboriosam voluptatem harum tenetur! Quisquam, reiciendis nesciunt tenetur odit modi ut, obcaecati quia praesentium adipisci deserunt!
33 | 34 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, expedita.
35 | 36 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias placeat cupiditate sapiente beatae dolorum consectetur tempore voluptatum, ut quis debitis!
37 | 38 | 39 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /test/test_browserify.js: -------------------------------------------------------------------------------- 1 | var Equalizer = require('../'); 2 | var equalizerString = new Equalizer('div'); 3 | var equalizerBlock = new Equalizer(document.querySelectorAll('article')); 4 | 5 | equalizerString.align(); 6 | equalizerBlock.align(); 7 | -------------------------------------------------------------------------------- /test/test_browserify_bundle.js: -------------------------------------------------------------------------------- 1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;ot;t+=1)this.blocks[t].style.minHeight="",e=Math.max(e,this.blocks[t].clientHeight);for(t=0;i>t;t+=1)this.blocks[t].style.minHeight=e+"px"},t}();return t}); 3 | },{}],2:[function(require,module,exports){ 4 | var Equalizer = require('../'); 5 | var equalizerString = new Equalizer('div'); 6 | var equalizerBlock = new Equalizer(document.querySelectorAll('article')); 7 | 8 | equalizerString.align(); 9 | equalizerBlock.align(); 10 | 11 | },{"../":1}]},{},[2]); 12 | -------------------------------------------------------------------------------- /test/test_flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Equalizer - Flexbox Test 7 | 8 | 25 | 26 | 27 |
28 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum laudantium quia reprehenderit eaque, laboriosam voluptatem harum tenetur! Quisquam, reiciendis nesciunt tenetur odit modi ut, obcaecati quia praesentium adipisci deserunt!
29 | 30 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, expedita.
31 | 32 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias placeat cupiditate sapiente beatae dolorum consectetur tempore voluptatum, ut quis debitis!
33 |
34 | 35 |
36 | 37 |
38 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum laudantium quia reprehenderit eaque, laboriosam voluptatem harum tenetur! Quisquam, reiciendis nesciunt tenetur odit modi ut, obcaecati quia praesentium adipisci deserunt!
39 | 40 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, expedita.
41 | 42 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias placeat cupiditate sapiente beatae dolorum consectetur tempore voluptatum, ut quis debitis!
43 |
44 | 45 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /test/test_global.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Equalizer - Global Test 7 | 8 | 22 | 23 | 24 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum laudantium quia reprehenderit eaque, laboriosam voluptatem harum tenetur! Quisquam, reiciendis nesciunt tenetur odit modi ut, obcaecati quia praesentium adipisci deserunt!
25 | 26 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, expedita.
27 | 28 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias placeat cupiditate sapiente beatae dolorum consectetur tempore voluptatum, ut quis debitis!
29 | 30 |
31 | 32 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum laudantium quia reprehenderit eaque, laboriosam voluptatem harum tenetur! Quisquam, reiciendis nesciunt tenetur odit modi ut, obcaecati quia praesentium adipisci deserunt!
33 | 34 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, expedita.
35 | 36 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias placeat cupiditate sapiente beatae dolorum consectetur tempore voluptatum, ut quis debitis!
37 | 38 | 39 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /test/test_node.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Equalizer - Node Test 7 | 8 | 22 | 23 | 24 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum laudantium quia reprehenderit eaque, laboriosam voluptatem harum tenetur! Quisquam, reiciendis nesciunt tenetur odit modi ut, obcaecati quia praesentium adipisci deserunt!
25 | 26 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, expedita.
27 | 28 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias placeat cupiditate sapiente beatae dolorum consectetur tempore voluptatum, ut quis debitis!
29 | 30 |
31 | 32 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum laudantium quia reprehenderit eaque, laboriosam voluptatem harum tenetur! Quisquam, reiciendis nesciunt tenetur odit modi ut, obcaecati quia praesentium adipisci deserunt!
33 | 34 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, expedita.
35 | 36 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias placeat cupiditate sapiente beatae dolorum consectetur tempore voluptatum, ut quis debitis!
37 | 38 | 39 | 45 | 46 | 47 | --------------------------------------------------------------------------------