Free WebDesign Resource – oNeTer.Com

Setting Equal Heights with jQuery

Posted on 23. Jan, 2009 by Oneter in scripts and codes

We wrote a script to “equalize” the heights of boxes within the same container and create a tidy grid — with little overhead.


Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. When developing complex web applications or site designs we’ve found that it often makes the most sense from a usability and performance standpoint to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element’s minimum height to that of the tallest element. When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.

JQuery technology based on the practical use of the code. Keyword: high background jQuery js css

Free Download the code:equalHeights_design.oneter.com.zip

Preview Address:
http://www.filamentgroup.com/examples/equalHeights/

Related posts:

1. JQuery-based multiple-choice text box (JS + CSS) JQuery technology based on the practical use of the...
2. jQuery Based adjust font size on your Page (JS + CSS) JQuery technology based on the practical use of the...
3. jQuery Based pagination Plugin (JS+CSS) JQuery technology based on the practical use of the...
4. coda-slider – JQuery Based smooth switch With tab effect (JS + CSS) JQuery technology based on the practical use of the...
5. JQuery based News auto play slider (js css) JQuery technology based on the practical use of the...

Related posts brought to you by Yet Another Related Posts Plugin.

Tags: css, jQuery, js