[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><SPAN class=546433321-12072006><FONT face=Arial color=#0000ff
size=2>Yes...I think I know what you're talking about, but I'm having trouble
visualizing it.</FONT></SPAN></DIV>
<P><FONT size=2><!----------------//------<BR>andy matthews<BR>web
developer<BR>certified advanced coldfusion programmer<BR>ICGLink,
Inc.<BR>andy@icglink.com<BR>615.370.1530
x737<BR>--------------//---------></FONT> </P>
<BLOCKQUOTE>
<DIV class=OutlookMessageHeader dir=ltr align=left><FONT face=Tahoma
size=2>-----Original Message-----<BR><B>From:</B> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com]<B>On Behalf Of </B>Yehuda
Katz<BR><B>Sent:</B> Wednesday, July 12, 2006 4:26 PM<BR><B>To:</B> jQuery
Discussion.<BR><B>Subject:</B> Re: [jQuery] No more faux
columns<BR><BR></FONT></DIV>With and without what? the plugin applied?<BR><BR>
<DIV><SPAN class=gmail_quote>On 7/12/06, <B class=gmail_sendername>Andy
Matthews</B> <<A href="mailto:andy@icglink.com">andy@icglink.com</A>>
wrote:</SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">
<DIV>
<DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>I'd love to see an example
of this, with and without.</FONT></SPAN></DIV>
<DIV> </DIV>
<P><FONT size=2><!----------------//------<BR></FONT></P></DIV>
<DIV><SPAN class=sg><FONT size=2>andy matthews<BR>web developer<BR>certified
advanced coldfusion programmer<BR>ICGLink, Inc.<BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:andy@icglink.com"
target=_blank>andy@icglink.com</A><BR>615.370.1530
x737<BR>--------------//---------></FONT></SPAN></DIV>
<DIV>
<P></P></DIV>
<DIV><SPAN class=e id=q_10c6497e8779c7b7_3>
<BLOCKQUOTE>
<DIV dir=ltr align=left><FONT face=Tahoma size=2>-----Original
Message-----<BR><B>From:</B> <A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com </A>[mailto:<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com</A>]<B>On Behalf Of </B>Yehuda
Katz<BR><B>Sent:</B> Wednesday, July 12, 2006 4:07 PM<BR><B>To:</B> jQuery
Discussion.<BR><B>Subject:</B> [jQuery] No more faux
columns<BR><BR></FONT></DIV>Hey guys,<BR><BR>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. <BR><BR>The plugin (code mostly written by John with some
modification by me) is as follows:<BR><BR> $.fn.maxHeight =
function(){<BR> var m = 0;<BR> return
this.each(function(){<BR> if((h =
parseInt($(this).css('height') > m) m = h; <BR>
}).css("height", m + "px");<BR> };<BR><BR>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. <BR><BR>For example, if your markup looked
like this:<BR><BR><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><BR><BR>you
could do:<BR><BR><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><BR><BR>and there'll
be no more need for faux columns. <BR><BR>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.<BR><BR>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):<BR><BR>
<DIV style="MARGIN-LEFT: 40px"><SPAN
style="FONT-FAMILY: courier new,monospace">Find css: function(a,b)
{<BR><BR>At the end of the function, replace:<BR>}) : jQuery.css( this[0],
a );<BR><BR>with: <BR>}) : jQuery.curCSS( this[0], a );<BR><BR>Then, find
return p == "height" ? oHeight : oWidth; <BR><BR>After the semicolon, and
before var r, add:<BR><BR>return jQuery.curCSS(e,p); };<BR>jQuery.curCSS =
function(e,p) {<BR><BR></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><BR><SPAN
style="FONT-FAMILY: courier new,monospace"></SPAN><BR>-- <BR>Yehuda
Katz<BR>Web Developer<BR>(ph) 718.877.1325<BR>(fax)
718.686.4288 </BLOCKQUOTE></SPAN></DIV>
<DIV></DIV></DIV><BR>_______________________________________________<BR>jQuery
mailing list<BR><A onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss@jquery.com">discuss@jquery.com</A><BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://jquery.com/discuss/"
target=_blank>http://jquery.com/discuss/</A><BR><BR><BR></BLOCKQUOTE></DIV><BR><BR
clear=all><BR>-- <BR>Yehuda Katz<BR>Web
Developer<BR>(ph) 718.877.1325<BR>(fax) 718.686.4288
</BLOCKQUOTE></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/