-
Notifications
You must be signed in to change notification settings - Fork 29
/
jquery.syncheight.js
executable file
·115 lines (103 loc) · 3.08 KB
/
jquery.syncheight.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/**
* syncHeight - jQuery plugin to automagically Sync the heights of columns
* Made to seemlessly work with the CCS-Framework YAML (yaml.de)
* @requires jQuery v1.0.3 or newer
*
* http://blog.ginader.de/dev/syncheight/
*
* Copyright (c) 2007-2013
* Dirk Ginader (ginader.de)
* Dirk Jesse (yaml.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 1.5
*
* Changelog
* * v1.5 fixes issue with box-sizing: border-box
* * v1.4: new Method unSyncHeight() that removes previously added syncs i.e. for responsive layouts
* * v1.3: compatibility fix for jQuery 1.9.x (removed $.browser)
*
* Usage sync:
$(window).load(function(){
$('p').syncHeight();
});
* Usage unsync:
$(window).resize(function(){
if($(window).width() < 500){
$('p').unSyncHeight();
}
});
*/
(function($) {
var getHeightProperty = function() {
var browser_id = 0;
var property = [
// To avoid content overflow in synchronised boxes on font scaling, we
// use 'min-height' property for modern browsers ...
['min-height','0px'],
// and 'height' property for Internet Explorer.
['height','1%']
];
var bMatch = /(msie) ([\w.]+)/.exec(navigator.userAgent.toLowerCase()) || [],
browser = bMatch[1] || "",
browserVersion = bMatch[2] || "0";
// check for IE6 ...
if(browser === 'msie' && browserVersion < 7){
browser_id = 1;
}
return {
'name': property[browser_id][0],
'autoheightVal': property[browser_id][1]
};
};
$.getSyncedHeight = function(selector) {
var max = 0;
var heightProperty = getHeightProperty();
// get maximum element height ...
$(selector).each(function() {
// fallback to auto height before height check ...
$(this).css(heightProperty.name, heightProperty.autoheightVal);
var val = parseInt($(this).css('height'),10);
if(val > max){
max = val;
}
});
return max;
};
$.fn.syncHeight = function(config) {
var defaults = {
updateOnResize: false, // re-sync element heights after a browser resize event (useful in flexible layouts)
height: false
};
var options = $.extend(defaults, config);
var e = this;
var max = 0;
var heightPropertyName = getHeightProperty().name;
if(typeof(options.height) === "number") {
max = options.height;
} else {
max = $.getSyncedHeight(this);
}
// set synchronized element height ...
$(this).each(function() {
$(this).css(heightPropertyName, max+'px');
});
// optional sync refresh on resize event ...
if (options.updateOnResize === true) {
$(window).bind('resize.syncHeight', function(){
$(e).syncHeight();
});
}
return this;
};
$.fn.unSyncHeight = function() {
// unbind optional resize event ...
$(window).unbind('resize.syncHeight');
var heightPropertyName = getHeightProperty().name;
$(this).each(function() {
$(this).css(heightPropertyName, '');
});
};
})(jQuery);