15 jQuery Plugins for Better Web Page Element Layouts

CSS does a pretty darn good job of helping to lay out a web page… but not always. Even with all the versatility that CSS offers, it sometimes is not enough and, dare I say it, I really hate to say it – HTML tables are on [very few] occasions missed, as they can fill in the holes that CSS layout techniques may leave behind.

Thankfully we do not have to venture down the road of HTML tables, there is a White Knight that can save is, as it always does – there are jQuery plugins and its marvelous community of developers that release an endless river of powerful and always useful plugins.

jQuery Masonry

jQuery Page Layout Plugins

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Downloads & Docs »Masonry Demo

Columnizer jQuery Plugin

jQuery Page Layout Plugins

The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns.
And, yes, it’s very easy to use!

Downloads & Docs »Columnizer Demo

UI.Layout Plug-in

jQuery Page Layout Plugins

This plug-in was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any kind of UI look you need – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.
If you combine it with other jQuery UI widgets you can easily create sophisticated applications.

Downloads & Docs »UI.Layout Demo

jLayout

jQuery Page Layout Plugins

The jLayout jQuery plugin provides four layout algorithms for laying out HTML elements in web pages.
The first is border, which lays out components in five different regions. The second algorithm is grid, which lays out components in a user defined grid. The third algorithm is flexGrid, which lays out components in a grid with flexible column and row sizes. The fourth and last algorithm is flow, which lays out components in rows with components overflowing to new rows if there is not enough horizontal space.
The plugin allows you to lay out your elements with as little code as possible, and behaves correctly when used with margins, padding and borders.

Downloads & Docs »jLayout Demo

jQuery pageSlide

jQuery Page Layout Plugins

jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or "throwing") content aside to reveal a secondary content pane.
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

Downloads & Docs »pageSlide Demo

jMetronome Vertical Rhythm Example

jQuery Page Layout Plugins

A few years ago, Richard Rutter wrote Compose to a Vertical Rhythm, which described how web developers could use CSS to maintain proper vertical typographic rhythm when designing pages. The technique is fairly straightforward, requiring some basic math to ensure consistent margins and leading across all page elements.
One issue that many people face with this technique, is that vertical rhythm can easily be thrown off by non-text elements, such as images. One solution to this issue is to make sure your images always have a height that is a multiple of the line height being used by your document, and herein lies the power of this small jQuery plugin.

Downloads & Docs »jMetronome Demo

Columnize

jQuery Page Layout Plugins

jQuery Columnize is a plugin for the Javascript library jQuery which will allow you to create a newspaper-like column layout. The original HTML code only needs small adaptions, and in most cases, it is not necessary to adapt the code at all.
For a beautiful layout it is recommended to use the CSS property ›line-height‹. By setting the line height explicitly and calculate all vertical distances as multiples of the line height you ensure that all baselines are aligned to the same grid.

Downloads & Docs »Columnize Demo

js-columns

jQuery Page Layout Plugins

While CSS3 has a variety of column-style properties, these are not yet widely implemented, and none help with the creation of page-based layouts. This jQuery plugin is designed to help with the creation of newspaper-style column layouts in HTML.
This project has the following goals: display columns filling the container allow smooth paging, without a reload smoothly adjust the page when resizing the window allow columns spanning images allow interstitial content, like quotes (todo).

Downloads & Docs »js-columns Demo

jQSlickWrap – Slick text wrapping for jQuery

jQuery Page Layout Plugins

If you've ever felt the need to wrap stuff around an irregularly-shaped image using CSS's float, you may have been somewhat disappointed to find out that it's forced to wrap around the image's bounding box, rather than the actual contents of the image. jQSlickWrap will fix all that.

Downloads & Docs »jQSlickWrap Demo

Layout Background Canvas Plugin: Gradients, Rounded Corners without CSS

jQuery Page Layout Plugins

The HTML5 standard introduces the <CANVAS> element, a resolution dependent bitmap canvas on which 2D graphic objects can be rendered. With JavaScript one can draw shapes like circles, rectangles and lines on this element.
The jQuery background canvas plugin injects such a canvas element behind a div or whatever block element and provides functions to draw on it. When the background of the div is made transparent, this canvas element can be seen and it will provide the new background for the div.

Downloads & Docs »Background Canvas Demo

Equal Heights with jQuery

jQuery Page Layout Plugins

Creating the visual effect of equal-height columns or content boxes has been a challenge ever since the abandonment of table-based layouts.
When developing complex web applications or site designs you will find that it often makes sense from a usability and performance standpoint to use a simple JavaScript workaround: this 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.

Downloads & Docs »Equal Heights Demo

scale9grid

jQuery Page Layout Plugins

This plugin adds support for scaling background images using a 9-grid. Developers can specify a grid for selected elements which causes the background-image to be scaled selectively, depending on what part of the grid the background lies.

Downloads & Docs »9-Grid Scaling Demo

jPolite v2 – Lightweight jQuery Portal

jQuery Page Layout Plugins

JPolite is a pure front-end portal framework based on jQuery & BlueTrip CSS framework, with a handful of jQuery plugins already integrated. It provides a compact yet powerful foundation for custom AJAX web applications with Netvibes like user experiences.
You can use JPolite as a base for creating complex / customizable websites quickly by separating content, appearance and behavior. JPolite provides the ease of turning an HTML content block into tabbed or accordion control without extra code.

Downloads & Docs »JPolite Demo

AlignWith

AlignWith is a simple plugin that will re-position one or more HTML elements that need to be aligned with another element.
Elements can be aligned by corners, edges and centre-points – ideal for dynamic content such as menus and tooltips.

Downloads & Docs »

Scroll Horizontal Pane

jScrollHorizontalPane is a plugin based off of Kevin Luck’s jScrollPane which override’s the browsers default horizontal on any block level element with an overflow:auto style. It’s built on top of the jQuery library and uses both the dimensions plugin and the mouse wheel plugin. Provided with the download of the plugin there is a default jScrollHorizontalPane.css which can be used as a basis to edit the stylings on the scroll bar.

Downloads & Docs »

Author: (645 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments