https://ufafito.ru/js/equalHeights.js

1/*-------------------------------------------------------------------- 
2 * JQuery Plugin: "EqualHeights" & "EqualWidths"
3 * by:	Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
4 *
5 * Copyright (c) 2007 Filament Group
6 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
7 *
8 * Description: Compares the heights or widths of the top-level children of a provided element 
9 		and sets their min-height to the tallest height (or width to widest width). Sets in em units 
10 		by default if pxToEm() method is available.
11 * Dependencies: jQuery library, pxToEm method	(article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)							  
12 * Usage Example: $(element).equalHeights();
13   						      Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
14 * Version: 2.0, 07.24.2008
15 * Changelog:
16 *  08.02.2007 initial Version 1.0
17 *  07.24.2008 v 2.0 - added support for widths
18--------------------------------------------------------------------*/
19
20$.fn.equalHeights = function(px) {
21	$(this).each(function(){
22		var currentTallest = 0;
23		$(this).children().each(function(i){
24			if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
25		});
26		if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
27		// for ie6, set height since min-height isn't supported
28		if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
29		$(this).children().css({'min-height': currentTallest}); 
30	});
31	return this;
32};
33
34// just in case you need it...
35$.fn.equalWidths = function(px) {
36	$(this).each(function(){
37		var currentWidest = 0;
38		$(this).children().each(function(i){
39				if($(this).width() > currentWidest) { currentWidest = $(this).width(); }
40		});
41		if(!px || !Number.prototype.pxToEm) currentWidest = currentWidest.pxToEm(); //use ems unless px is specified
42		// for ie6, set width since min-width isn't supported
43		if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'width': currentWidest}); }
44		$(this).children().css({'min-width': currentWidest}); 
45	});
46	return this;
47};
48
49
50/*-------------------------------------------------------------------- 
51 * javascript method: "pxToEm"
52 * by:
53   Scott Jehl ([email protected]) 
54   Maggie Wachs ([email protected])
55   http://www.filamentgroup.com
56 *
57 * Copyright (c) 2008 Filament Group
58 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
59 *
60 * Description: Extends the native Number and String objects with pxToEm method. pxToEm converts a pixel value to ems depending on inherited font size.  
61 * Article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/
62 * Demo: http://www.filamentgroup.com/examples/pxToEm/	 	
63 *							
64 * Options:  	 								
65 		scope: string or jQuery selector for font-size scoping
66 		reverse: Boolean, true reverses the conversion to em-px
67 * Dependencies: jQuery library						  
68 * Usage Example: myPixelValue.pxToEm(); or myPixelValue.pxToEm({'scope':'#navigation', reverse: true});
69 *
70 * Version: 2.0, 08.01.2008 
71 * Changelog:
72 *		08.02.2007 initial Version 1.0
73 *		08.01.2008 - fixed font-size calculation for IE
74--------------------------------------------------------------------*/
75
76Number.prototype.pxToEm = String.prototype.pxToEm = function(settings){
77	//set defaults
78	settings = jQuery.extend({
79		scope: 'body',
80		reverse: false
81	}, settings);
82	
83	var pxVal = (this == '') ? 0 : parseFloat(this);
84	var scopeVal;
85	var getWindowWidth = function(){
86		var de = document.documentElement;
87		return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
88	};	
89	
90	/* When a percentage-based font-size is set on the body, IE returns that percent of the window width as the font-size. 
91		For example, if the body font-size is 62.5% and the window width is 1000px, IE will return 625px as the font-size. 	
92		When this happens, we calculate the correct body font-size (%) and multiply it by 16 (the standard browser font size) 
93		to get an accurate em value. */
94				
95	if (settings.scope == 'body' && $.browser.msie && (parseFloat($('body').css('font-size')) / getW

95indowWidth()).toFixed(1) > 0.0) {
96		var calcFontSize = function(){		
97			return (parseFloat($('body').css('font-size'))/getWindowWidth()).toFixed(3) * 16;
98		};
99		scopeVal = calcFontSize();
100	}
101	else { scopeVal = parseFloat(jQuery(settings.scope).css("font-size")); };
102			
103	var result = (settings.reverse == true) ? (pxVal * scopeVal).toFixed(2) + 'px' : (pxVal / scopeVal).toFixed(2) + 'em';
104	return result;
105};