6 Flexible jQuery Plugins To Control Webpage Layouts Easily
Controlling layouts with CSS is a big subject these days as after dropping the table support, it is clear that the current capabilities of CSS is not enough to develop complex & flexible layouts with ease.
There is CSS Template Layout Module which offers exciting features but it is in a draft status.
Until we get those new features, there are various solutions that are developed with jQuery to manipulate page layouts for faster & cross-browser results.
Here is a collection of 6 jQuery plugins to manage page layouts easily:
jQuery Masonry
Masonry is like the flip side of CSS floats. Floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. And the result is no vertical gaps between elements of varying height.
The plugin is almost totally managed with CSS rules. It uses jQuery’s outerWidth() and innerWidth() methods to calculate the margins & paddings of elements.
UI.Layout
This is a plugin to create desktop-like layouts. It can b used to create any UI look from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms & more.
jLayout
The library provides three layout algorithms:
border, which lays out components in five different regionsgrid, which lays out components in a user defined gridflex-gridwhich offers a grid with flexible column and row sizes.
css-template-layout
The plugin aims to offer a similar functionality with the CSS Template Layout Module (which is currently in a draft status).
The script simply parses the mentioned CSS rules & displays the content accordingly.
Columnizer
The plugin automatically converts any content into a newspaper-like column format.
A default clumn widt or a static number of columns can be defined & the rest is almost done by itself.
EqualHeights
Creating equal height boxes or content holders is mostly a challenge with CSS. The plugin makes this process easy by simply calling a function.
- Tags:
Css Javascript
- Filed under: Design, Other License, Xhtml & Css
- 10 Comments
10 Responses for "6 Flexible jQuery Plugins To Control Webpage Layouts Easily"
I have a heavily javascripted site. I noticed when I tried to use any type of equal heights whether it was javascript or jquery. It interfered with the other javascripts on the page.
Would that happen with either of these?
Good list of plugins, thanks.
Nice ! thx
I used equal heights yesterday for a row of div boxes. Worked brilliantly.
[...] found an efficient and (mostly) cross-browser-compatible way to center elements without floats.6 Flexible jQuery Plugins to Control Web Page Layouts EasilyA collection of six jQuery plug-ins to manage page layouts easily.Four Methods to Create [...]
Nice script bro, i think it will be easier and faster to create template layout with this
great stuff, simple but cool
I’ve created a prototype.js port of jQuery Masonry. You can find it here: http://www.sthoughts.com/prototype-masonry/
Thanks for this great post
I really like masonry – I also figured out (with some help) how to filter /sort the divs – http://jasondaydesign.com/masonry_demo/
Thanks! I’m using EqualHeights from Flament Group, It works everywhere except IE6.