jquery.equalheights.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  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. (function ($) {
  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. // just in case you need it...
  34. $.fn.equalWidths = function(px) {
  35. $(this).each(function(){
  36. var currentWidest = 0;
  37. $(this).children().each(function(i){
  38. if($(this).width() > currentWidest) { currentWidest = $(this).width(); }
  39. });
  40. if(!px || !Number.prototype.pxToEm) currentWidest = currentWidest.pxToEm(); //use ems unless px is specified
  41. // for ie6, set width since min-width isn't supported
  42. if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'width': currentWidest}); }
  43. $(this).children().css({'min-width': currentWidest});
  44. });
  45. return this;
  46. };
  47. })(jQuery);
  48. /*--------------------------------------------------------------------
  49. * javascript method: "pxToEm"
  50. * by:
  51. Scott Jehl (scott@filamentgroup.com)
  52. Maggie Wachs (maggie@filamentgroup.com)
  53. http://www.filamentgroup.com
  54. *
  55. * Copyright (c) 2008 Filament Group
  56. * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
  57. *
  58. * Description: Extends the native Number and String objects with pxToEm method. pxToEm converts a pixel value to ems depending on inherited font size.
  59. * Article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/
  60. * Demo: http://www.filamentgroup.com/examples/pxToEm/
  61. *
  62. * Options:
  63. scope: string or jQuery selector for font-size scoping
  64. reverse: Boolean, true reverses the conversion to em-px
  65. * Dependencies: jQuery library
  66. * Usage Example: myPixelValue.pxToEm(); or myPixelValue.pxToEm({'scope':'#navigation', reverse: true});
  67. *
  68. * Version: 2.0, 08.01.2008
  69. * Changelog:
  70. * 08.02.2007 initial Version 1.0
  71. * 08.01.2008 - fixed font-size calculation for IE
  72. --------------------------------------------------------------------*/
  73. (function ($) {
  74. Number.prototype.pxToEm = String.prototype.pxToEm = function(settings){
  75. //set defaults
  76. settings = jQuery.extend({
  77. scope: 'body',
  78. reverse: false
  79. }, settings);
  80. var pxVal = (this == '') ? 0 : parseFloat(this);
  81. var scopeVal;
  82. var getWindowWidth = function(){
  83. var de = document.documentElement;
  84. return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
  85. };
  86. /* When a percentage-based font-size is set on the body, IE returns that percent of the window width as the font-size.
  87. For example, if the body font-size is 62.5% and the window width is 1000px, IE will return 625px as the font-size.
  88. When this happens, we calculate the correct body font-size (%) and multiply it by 16 (the standard browser font size)
  89. to get an accurate em value. */
  90. if (settings.scope == 'body' && $.browser.msie && (parseFloat($('body').css('font-size')) / getWindowWidth()).toFixed(1) > 0.0) {
  91. var calcFontSize = function(){
  92. return (parseFloat($('body').css('font-size'))/getWindowWidth()).toFixed(3) * 16;
  93. };
  94. scopeVal = calcFontSize();
  95. }
  96. else { scopeVal = parseFloat(jQuery(settings.scope).css("font-size")); };
  97. var result = (settings.reverse == true) ? (pxVal * scopeVal).toFixed(2) + 'px' : (pxVal / scopeVal).toFixed(2) + 'em';
  98. return result;
  99. };
  100. })(jQuery);