menu
[ Updated threads · New messages · Members · Forum rules · Search · RSS ]
  • Page 1 of 1
  • 1
Coredownloadz Forum » Web developments » Programming Softwares » Columns of equals height with JQuery
Columns of equals height with JQuery
guitarmantraDate: Thursday, 2009-06-04, 7:28 AM | Message # 1
Colonel
Group: Administrators
Messages: 220
Awards: 3
Reputation: 2
Status: Offline
When using a table, all the columns of this table have the same height. During web design early days, everyone was using tables to style their web pages so creating columns of the same height weren't a problem at all. But with the rise of CSS, things changed and now, creating columns of equal height isn't an easy job.
Happilly, here's a real life saver for everyone looking to create identical columns.

As this code uses the JQuery framework, make sure you have it installed on your webiste!
Paste the following script in a new file and include it to your web page:
Code

/*--------------------------------------------------------------------
* JQuery Plugin: "EqualHeights"
* by:   Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
*
* Copyright (c) 2008 Filament Group
* Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
*
* Description: Compares the heights or widths of the top-level children of a provided element
       and sets their min-height to the tallest height (or width to widest width). Sets in em units
       by default if pxToEm() method is available.
* Dependencies: jQuery library, pxToEm method   (article:
       http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
* Usage Example: $(element).equalHeights();
         Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
* Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/

$.fn.equalHeights = function(px) {
    $(this).each(function(){
       var currentTallest = 0;
       $(this).children().each(function(i){
          if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
       });
       if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
       // for ie6, set height since min-height isn't supported
       if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
       $(this).children().css({'min-height': currentTallest});
    });
    return this;
};

Use the following code to make the top-level childs of an element having the same height:

Code

$('.container').equalHeights();
Attachments: 7614255.jpg (16.4 Kb)


www.coredownloadz.ucoz.com
 
Coredownloadz Forum » Web developments » Programming Softwares » Columns of equals height with JQuery
  • Page 1 of 1
  • 1
Search: