[jQuery] No more faux columns

[jQuery] No more faux columns

Hey guys,
Together with John, I've worked out a way to eliminate faux columns via a very light plugin to jQuery. Unfortunately, it requires a couple of small modifications to the jQuery core that I assume John will be making in some future incremental release.
The plugin (code mostly written by John with some modification by me) is as follows:
  $.fn.maxHeight = function(){
    var m = 0;
    return this.each(function(){
      if((h = parseInt($(this).css('height') > m) m = h;
    }).css("height", m + "px");
  };
Doing $(expression).maxHeight will find compare the heights of all matching elements and set them all to the largest. Essentially, this will allow you to avoid doing faux columns by simply adding the appropriate styling, for example, to a sidebar, assured it will always be either larger, or as large, as adjoining columns.
For example, if your markup looked like this:
<span style="font-family: courier new,monospace;"><div id="sidebar" class="column"></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">// your sidebar here</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></div></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"><div id="content" class="column"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">// your content here
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"></div></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
<div id="rightbar" class="column"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">// your rightbar here</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"></div></span>
you could do:
<span style="font-family: courier new,monospace;">$(document).ready(function() {</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;">  $("div.column").maxHeight()</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">});</span>
and there'll be no more need for faux columns.
I'll release a clean, tested version of this together with a simple jQuery solution for position: fixed in Internet Explorer as soon as both are done and work in the current jQuery release.
If you want to try it out, make the following modifications to
jQuery.js (I used revision 130 from svn, which seems to be the latest version of jQuery that isn't very buggy, but has the latest cool revisions):
<div style="margin-left: 40px;"><span style="font-family: courier new,monospace;">
Find css: function(a,b) {
At the end of the function, replace:
}) : jQuery.css( this[0], a );
with:
}) : jQuery.curCSS( this[0], a );
Then, find return p == "height" ? oHeight : oWidth;
After the semicolon, and before var r, add:
return jQuery.curCSS(e,p); };
jQuery.curCSS = function(e,p) {
</span></div>Note: The modifications were suggested by John off the top of his head without any testing or other checks. They work for me, but might cause unintended problems.
<span style="font-family: courier new,monospace;"></span>
<span style="font-family: courier new,monospace;"></span>
--
Yehuda Katz
Web Developer
(ph)  718.877.1325
(fax) 718.686.4288
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/