vJustify | JavaScriptSource

vJustify

Michael Futreal Oct 20, 2008

General

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. While there are a variety of strategies to deal with this issue, here's a jQuery-based fix.


Notes

Using the Plugin

The jQuery library is required.

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.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: vjustify.js


Head

Paste this code into the HEAD section of your HTML document.


Leave a Response

(2 comments)

I can understand your wanting more information. That is why there is a link to the author's site listed under the "Notes" tab.

Lee Jan 16, 2009

The NOTES part of your write up was very vague for me. Certainly that may be testimony to my lack of years of experience or in-depth knowledge. What would be helpful is example code where a couple or three columns are being "justified" and what the code would look like. For example, where does the code lines go that satisfy the following statements....[br /][br /]A call to $(".jqColumn").vjustify(); will do the trick, assuming you've assigned class="jqColumn" to all elements needing vertical justification.[br /][br /]It would be good to show how to assign the class.[br /][br /]Also not easy to understand was how to load the library.[br /][br /]All of these issues kept me from using the code at this point. I am going to try to use Niftycorners again which I have use 1 time before.

Peter McCall Nov 20, 2008