[jQuery] No more faux columns

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.2912" name=GENERATOR></HEAD>
<BODY>
<DIV>I'd
love to see an example of this, with and without.</DIV>
<DIV> </DIV>
 
<BLOCKQUOTE>
<DIV class=OutlookMessageHeader dir=ltr align=left>-----Original Message----- From: discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com]On Behalf Of Yehuda
Katz Sent: Wednesday, July 12, 2006 4:07 PM To: jQuery
Discussion. Subject: [jQuery] No more faux
columns </DIV>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: <div id="sidebar"
class="column"> // your sidebar here </div> <div id="content"
class="column"> // your content here </div> <div id="rightbar"
class="column"> // your rightbar here </div> you
could do: $(document).ready(function()
{ 
$("div.column").maxHeight() }); 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">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)
{ </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. -- Yehuda
Katz Web Developer (ph) 718.877.1325 (fax) 718.686.4288
</BLOCKQUOTE></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Topic Participants
andy

[jQuery] No more faux columns

[jQuery] No more faux columns

Topic Participants

andy