https://www.port-brillet.fr/js/jquery.matchHeight.js

1/**
2* jquery.matchHeight.js v0.5.2
3* http://brm.io/jquery-match-height/
4* License: MIT
5*/
6
7(function($) {
8
9    $.fn.matchHeight = function(byRow) {
10
11        // handle matchHeight('remove')
12        if (byRow === 'remove') {
13            var that = this;
14
15            // remove fixed height from all selected elements
16            this.css('height', '');
17
18            // remove selected elements from all groups
19            $.each($.fn.matchHeight._groups, function(key, group) {
20                group.elements = group.elements.not(that);
21            });
22
23            // TODO: cleanup empty groups
24
25            return this;
26        }
27
28        if (this.length <= 1)
29            return this;
30
31        // byRow default to true
32        byRow = (typeof byRow !== 'undefined') ? byRow : true;
33
34        // keep track of this group so we can re-apply later on load and resize events
35        $.fn.matchHeight._groups.push({
36            elements: this,
37            byRow: byRow
38        });
39
40        // match each element's height to the tallest element in the selection
41        $.fn.matchHeight._apply(this, byRow);
42
43        return this;
44    };
45
46    $.fn.matchHeight._apply = function(elements, byRow) {
47        var $elements = $(elements),
48            rows = [$elements];
49
50        // get rows if using byRow, otherwise assume one row
51        if (byRow) {
52
53            // must first force an arbitrary equal height so floating elements break evenly
54            $elements.css({
55                'display': 'block',
56                'padding-top': '0',
57                'padding-bottom': '0',
58                'border-top-width': '0',
59                'border-bottom-width': '0',
60                'height': '100px'
61            });
62
63            // get the array of rows (based on element top position)
64            rows = _rows($elements);
65
66            // revert the temporary forced style
67            $elements.css({
68                'display': '',
69                'padding-top': '',
70                'padding-bottom': '',
71                'border-top-width': '',
72                'border-bottom-width': '',
73                'height': ''
74            });
75        }
76
77        $.each(rows, function(key, row) {
78            var $row = $(row),
79                maxHeight = 0;
80
81            // ensure elements are visible to prevent 0 height
82            var hiddenParents = $row.parents().add($row).filter(':hidden');
83            hiddenParents.css({ 'display': 'block' });
84
85            // iterate the row and find the max height
86            $row.each(function(){
87                var $that = $(this);
88
89                // ensure we get the correct actual height (and not a previously set height value)
90                $that.css({ 'display': 'block', 'height': '' });
91
92                // find the max height (including padding, but not margin)
93                if ($that.outerHeight(false) > maxHeight)
94                    maxHeight = $that.outerHeight(false);
95
96                // revert display block
97                $that.css({ 'display': '' });
98            });
99
100            // revert display block
101            hiddenParents.css({ 'display': '' });
102
103            // iterate the row and apply the height to all elements
104            $row.each(function(){
105                var $that = $(this),
106                    verticalPadding = 0;
107
108                // handle padding and border correctly (required when not using border-box)
109                if ($that.css('box-sizing') !== 'border-box') {
110                    verticalPadding += _parse($that.css('border-top-width')) + _parse($that.css('border-bottom-width'));
111                    verticalPadding += _parse($that.css('padding-top')) + _parse($that.css('padding-bottom'));
112                }
113
114                // set the height (accounting for padding and border)
115                $that.css('height', maxHeight - verticalPadding);
116            });
117        });
118
119        return this;
120    };
121
122    /*
123    *  _applyDataApi will apply matchHeight to all elements with a data-match-height attribute
124    */
125   
126    $.fn.matchHeight._applyDataApi = function() {
127        var groups = {};
128
129        // generate groups by their groupId set by elements using data-match-height
130        $('[data-match-height], [data-mh]').each(function() {
131            var $this = $(this),
132                groupId = $this.attr('data-match-height');
133            if (groupId in groups) {
134                groups[groupId] = groups[groupId].add($this);
135            } else {
136                groups[groupId] = $this;
137            }
138        });
139
140        // apply matchHeight to each group
141        $.each(groups, function() {
142            this.matchHeight(true);
143        });
144    };
145
146    /* 
147    *  _update function will re-apply matchHeight to all groups with the correct options
148    */
149   
150    $.fn.matchHeight._groups = [];
151    $.fn.matchHeight._throttle = 80;
152
153    var previousResizeWidth = -1,
154        updateTimeout = -1;
155
156    $.fn.matchHeight._update = function(event) {
157        // prevent update if fired from a resize event 
158        // where the viewport width hasn't actually changed
159        // fixes an event looping bug in IE8
160        if (event && event.type === 'resize') {
161            var windowWidth = $(window).width();
162            if (windowWidth === previousResizeWidth)
163                return;
164            previousResizeWidth = windowWidth;
165        }
166
167        // throttle updates
168        if (updateTimeout === -1) {
169            updateTimeout = setTimeout(function() {
170
171                $.each($.fn.matchHeight._groups, function() {
172                    $.fn.matchHeight._apply(this.elements, this.byRow);
173                });
174
175                updateTimeout = -1;
176
177            }, $.fn.matchHeight._throttle);
178        }
179    };
180
181    /* 
182    *  bind events
183    */
184
185    // apply on DOM ready event
186    $($.fn.matchHeight._applyDataApi);

187
188    // update heights on load and resize events
189    $(window).bind('load resize orientationchange', $.fn.matchHeight._update);
190
191    /*
192    *  rows utility function
193    *  returns array of jQuery selections representing each row 
194    *  (as displayed after float wrapping applied by browser)
195    */
196
197    var _rows = function(elements) {
198        var tolerance = 1,
199            $elements = $(elements),
200            lastTop = null,
201            rows = [];
202
203        // group elements by their top position
204        $elements.each(function(){
205            var $that = $(this),
206                top = $that.offset().top - _parse($that.css('margin-top')),
207                lastRow = rows.length > 0 ? rows[rows.length - 1] : null;
208
209            if (lastRow === null) {
210                // first item on the row, so just push it
211                rows.push($that);
212            } else {
213                // if the row top is the same, add to the row group
214                if (Math.floor(Math.abs(lastTop - top)) <= tolerance) {
215                    rows[rows.length - 1] = lastRow.add($that);
216                } else {
217                    // otherwise start a new row group
218                    rows.push($that);
219                }
220            }
221
222            // keep track of the last row top
223            lastTop = top;
224        });
225
226        return rows;
227    };
228
229    var _parse = function(value) {
230        // parse value and convert NaN to 0
231        return parseFloat(value) || 0;
232    };
233
234})(jQuery);