JAVASCRIPT   6

jQuery.equalHeights.js

Guest on 10th May 2021 04:52:52 PM

  1. /*--------------------------------------------------------------------
  2.  * JQuery Plugin: "EqualHeights" & "EqualWidths"
  3.  * by:      Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
  4.  * Download by http://www.jb51.net
  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 (scott@filamentgroup.com)
  54.    Maggie Wachs (maggie@filamentgroup.com)
  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.  
  76. Number.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')) / getWindowWidth()).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. };

Raw Paste


Login or Register to edit or fork this paste. It's free.