tripwire magazine

jQuery as a development platform is great and we see the result of this every day. It is almost hard to believe but every time I decide to look up a new jQuery Plugin to solve a task I find that the community is constantly providing new high quality solutions for free. The number of really bad contributions that I fell I waste my time on is very limited and this makes me come back for more. I guess most web developers fell this way right? Great thanks to everyone spending their precious time creating stuff we can all use. Below I have listed 10 great plugins I wasn’t aware of that I stumbles over today.

Form extensions

Jquery Form Extensions is a small plugin to assist with common form-related tasks in jQuery. Really simple stuff but for anyone starting with jQuery it is really nice to have common form tasks encapsulated like this.

jQuery BBQ: Back Button & Query Library

jQuery BBQ enables simple, yet powerful bookmarkable #hash history via a cross-browser window.onhashchange event. In addition, jQuery BBQ provides a full jQuery.deparam() method, along with both fragment and query string parse and merge utility methods.

• Deserialize any params string, the document query string or fragment into an object, including the new jQuery.param format (coming in jQuery 1.4). (example)
• Merge any URL plus query string or fragment params—in an object, params string or second URL (including the current document location)—into a new URL.
• Update the “URL attribute” (ie. a[href], img[src], form[action], etc) in multiple elements, merging any URL plus query string or fragment params—in an object, params string or second URL (including the current document location)—into a new URL, which is then set into that attribute.
• Push (and retrieve) bookmarkable, history-enabling “state” objects or strings onto the document fragment, allowing cross-browser back- and next-button functionality for dynamic web applications (example 1, example 2, example 3)
• Bind event handlers to a normalized, cross-browser window.onhashchange event (example 1, example 2, example 3)

SimplePager – jQuery paging plugin

The premise behind SimplePager is to allow for creating pagination with as little effort or configuration as possible. This pager plugin can page divs, paragraphs, list items or almost any other content. This is simple yet very powerful!

Auto line-height jQuery Plugin

This plugin adjusts the line-height of selected elements in proportion to their width, relative to the font size. Image below illustrate the effect (left is plugin controlled). Demo

scale9grid

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.

Parts of the background which lie in the corners of the grid will not be scaled and parts in the sides of the grid will only be scaled in one direction. 9-Grid scaling can be applied to an element through one line of code. Demo

jQuery UI Selectmenu Plugin

jQuery UI Selectmenu Plugin duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. This plugin simply look awesome!

jQuery YouTube Playlist Plugin

YouTube Playlist Plugin allows you to turn an unordered list of YouTube links into a playlist. YouTubePlaylist will automatically embed YouTube video into your page and convert your list into a nice playlist.

Demo showing the plugin with default options.

Demo showing the plugin set up to act like a gallery of YouTube videos.

Encrypting HTML Form Data With jCryption

jCryption is a

JavaScript HTML Form encryption plugin, which encrypts the POST/GET-Data that will be sent when you submit a form. Normally if you submit a form and you don’t use SSL, your data will be sent in plain text.
But SSL is neither supported by every webhost nor it’s easy to install/apply sometimes. This plugin solves the security problem….but dont think you can use it for payment services!

Align With Plugin

Align With is a simple plugin to re-position one or more HTML elements 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.

Examples:
Basic usage, only defining the two elements – will match the centres of each element:
jQuery(‘.moveMe’).alignWith(‘#stayput’);

Match the left mid points of each element:
jQuery(‘.moveMe’).alignWith(‘#stayput’, ‘l’);

Match the top left corners of each element:
jQuery(‘.moveMe’).alignWith(‘#stayput’, ‘tl’);

Match the top left corner of the moving element with the centre of the static element:
jQuery(‘.moveMe’).alignWith(‘#stayput’, ‘tlc’);

Match the top left corner of the moving element with the top right corner of the static element:
jQuery(‘.moveMe’).alignWith(‘#stayput’, ‘tltr’);

Match the top left corner of the moving element with the top right corner of the static element and add a 5px x/y offset:
jQuery(‘.moveMe’).alignWith(‘#stayput’, ‘tltr’, {x:5,y:5});

Match the top left corner of the moving element with the top right corner of the static element and append to the document body:
jQuery(‘.moveMe’).alignWith(‘#stayput’, ‘tltr’, {appendToBody:true});

qTip

qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tons of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license! You will find good examples and demos on the site.

Related posts

1. 5 New jQuery Plugins I bet You have not seen before jQuery is very popular and there’s a lot of...
2. 15 jQuery Plugins You will find useful in 2010 2009 was the year I started tripwire magazine. It...
3. 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables Most people have turned their back to tables for implementing...
4. 10+ jQuery Form Enhancement Plugins Easy user interaction and data collection is really a...
5. 15 Top Rated jQuery Plugins jQuery is great and the amount of free extensions...

Please remember to share this post!