Alex Calara wrote:
> Much closer!
>
> I assumed that just getting all the divs in my #content div would
> still yield an array, so I ended up with this:
Sure, it was just an example of mine using ids to illustrate how I would
do it.
> If all columns are fixed width or all percentages it works fine. So,
> now all that's missing is executing this again on resize.
Put that into a function, bind that to the window's resize event and
trigger it once on load:
$(function() {
var jqColumns = $('#content div');
function adjustFooter() {
var columns = jqColumns.get().sort(function(a, b) {
return $(b).height() - $(a).height();
});
$(columns).css('position', '').eq(0).css({position: "relative"});
}
$(window).bind('resize', adjustFooter).trigger('resize');
});
Note: I save the query in a variable outside the resize function to
avoid a query on every resize.
The position style gets removed from all divs and then reattached to the
first (highest) one.
> Three columns, a narrow column with a fixed width, and a wider column
> with a percentage width. If the sidebar starts off as the tallest, it
> is set to relative, and the footer stays below it. But as the window
> gets narrower, so does the main column, and at one point, it becomes
> taller than the sidebar. Without triggering again on resize, then the
> sidebar is still the relative column.
>
> I just had a thought - my method of setting the position:relative
> directly with jQuery isn't very conducive to removing that attribute
> once we do get it to trigger on resize. toggleClass won't quite do
> what I'm after, will it?
You should maybe use a class for this:
$(columns).removeClass('highest').eq(0).addClass('highest');
And the CSS for that:
#content div {
position: absolute;
}
#content .highest {
position: relative;
}
-- Klaus
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
