michael.futreal.com > jQuery > vjustify plugin

vjustify

The Problem

Unequal column heights make CSS layouts difficult to manage when the height of content cannot be known in advance, particularly in scenarios where absolute positioning is in use. There are a variety of strategies to deal with this issue — here's a jQuery based fix.

Example

Yada yada

Integer porta ipsum ac tellus. Integer sit amet metus. Phasellus elit mi, ullamcorper ac, cursus nec, laoreet et, diam. Nulla velit. Nam urna arcu, ullamcorper dignissim, tristique non, tincidunt a, nisl. Nullam facilisis mi at nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin a orci ut nunc tempus aliquet. Cras vel nisi. Nunc dui risus, venenatis a, accumsan vitae, consequat ac, est. Fusce eget velit. Cras est. Nam diam. Sed ultricies. Phasellus tempor porttitor magna. Praesent ultrices molestie diam.

snake picture

Ut vulputate. Suspendisse ut nisi. Etiam metus. Nullam ut metus. Vivamus ante. Sed turpis. In rutrum sollicitudin nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ac ante. Sed convallis ultricies justo. Vivamus lorem eros, ullamcorper nec, facilisis condimentum, fermentum ut, tortor. Vestibulum urna purus, ultrices sit amet, pulvinar vel, consequat quis, velit. Aenean tincidunt erat sed est.

Yada yada!

Integer porta ipsum ac tellus. Integer sit amet metus. Phasellus elit mi, ullamcorper ac, cursus nec, laoreet et, diam. Nulla velit. Nam urna arcu, ullamcorper dignissim, tristique non, tincidunt a, nisl. Nullam facilisis mi at nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin a orci ut nunc tempus aliquet. Cras vel nisi. Nunc dui risus, venenatis a, accumsan vitae, consequat ac, est. Fusce eget velit. Cras est. Nam diam. Sed ultricies. Phasellus tempor porttitor magna. Praesent ultrices molestie diam.

The Code

Plugin


jQuery.fn.vjustify=function() {
    var maxHeight=0;
    this.each(function(){
        if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
    });
    this.each(function(){
        $(this).height(maxHeight + "px");
        if (this.offsetHeight>maxHeight) {
            $(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
        }
    });
};

Using the Plugin

A call to


$(".jqColumn").vjustify();

will do the trick, assuming you've assigned class="jqColumn" to all elements needing vertical justification. Use of the plugin assumes that the browser is able to determine the height of all elements at .vjustify() runtime, which can be a problem in certain scenarios. See the warning below.

Obviously, you can apply .vjustify via any jQuery mechanism for objectifying elements.

Issues and Warning

In Firefox 2.0, at least, $(document).ready() functions are executed before images are actually loaded. In other words, Firefox seems consider the DOM ready for scripting prior to a complete load.

The upshot of this is that any use of vjustify() plugin within a $(document).ready() context (a typical jQuery convention) may get the wrong height of any blocks that contain <img> elements that don't explicitly specify their height attribute. .vjustify() works fine in contexts where the height is specified (or known because all elements have fully loaded).

Find out more about this issue and a work around. When I have time, perhaps I'll create a more jQuery appropriate work around.