Skip to main content

10 jQuery Layout Tutorials

By Sam Deering



😳 Ever felt a little embarassed sharing your JavaScript? Let's fix it.

10 jQuery Layout Tutorials to help you with the display of HTML elements on your web pages. Browsers automatically display a tooltip when you provide a alt/title attribute. (Internet Explorer will also use the alt attribute, FireFox uses the title attribute). Learn to tweak your layouts to suit different browsers. Enjoy! :)

1. BiDi jQuery Plugin

Uses jQuery to automatically set directionality attributes of HTML elements based on first strongly directional letter in the element. Useful when you mix RTL and LTR languages in one website.


2. Align with jQuery Plugin

Align With is a simple plugin to re-position one or more HTML elements to be aligned with another element.

3. Background canvas drawing jQuery Plugin

Helps to decorate a semantic html/css layout. It places a backgroundCanvas helps to decorate a semantic html/css layout. It places a canvas object in the background and enables drawing on this canvas object.

4. Auto line-height jQuery Plugin

The best thing about packaging a reusable piece of JavaScript as a jQuery plugin is how easy it becomes to reuse it. With jQuery, jQEm and jQuery.autolineheight all linked into the HEAD of your HTML page, very little further code is required to assign the behavior to the desired element or elements in your page.

5. Tabset jQuery Plugin

A plugin that lets you choose your content and sort your tabs. A useful component that let you build a tabbed interface really easily; ad you can sort your tab as you want!

6. Masked Gallery

Build your own png mask and choose your images to slide inside!

7. 9-Grid Background Image Scaling jQuery Plugin

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 lays.

8. (mb)Gallery jQuery Plugin – Another way to present your photo gallery!

A full featured image gallery, with nay toolbar, thumbnails, auto size frame. With the wonderful mbGallery jQuery Plugin, create attractive galleries.

9. jQuery CSS Template Layout Module

The project aims at providing web designers with a way to use the W3’s CSS Template Layout Module today. As a jQuery plug-in, the script parses a given set of CSS rules and displays the content as indicated in the specification.

10. Adjustable Layout width using jQuery

To give functionality of change website width to user is a great idea. Its required some jQuery and CSS Stuffs. Here I create one simple tutorial for same, so you can easily implement this functionality in your upcoming websites.

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

💁‍♀️ Fun Fact: Python was ranked #2 on a recent highest paid coders list. *

🤓 Ok. When did a code editor from Microsoft become kinda cool!?