10 jQuery Layout Tutorials

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.

BiDi-jQuery-Plugin.jpg
Source


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.
Align-with-jQuery-Plugin.jpg
Source


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.
Background-canvas-drawing-jQuery-Plugin.jpg
Source


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.
Auto-line-height-jQuery-Plugin.jpg
Source


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!
Tabset-jQuery-Plugin.jpg
Source


6. Masked Gallery


Build your own png mask and choose your images to slide inside!
Masked-Gallery.jpg
Source


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.
9-Grid-Background-Image-Scaling-jQuery-Plugin.jpg
Source


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.
mbGallery-jQuery-Plugin-–-Another-way-to-present-your-photo-gallery.jpg
Source


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.
jQuery-CSS-Template-Layout-Module.jpg
Source


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.
Adjustable-Layout-width-using-jQuery.jpg
Source