35 More Useful jQuery Plugins and Techniques

Oct 29

Do you ever think "Ugh" when it is time to update or redesign your site?
jQuery has a fantastic library of plugins and tutorials that can speed the benefits of developing your site while demanding less time and improving workflow constraints.

To present a better user experience, we often need to take good care of the little details like the functionality and interactivity of tables, forms, images or other media resources; excellent navigation and security is also a must. So here are
35 more useful jQuery resources covering those topics as well as many more. Hopefully, you’ll find them helpful for your next web project.

You may also want to consider our previous posts:

35 Fresh and Useful jQuery Plugins is our previous list of useful jQuery plugins featuring navigation, gallery and calendars jQuery plugins.

45+ New jQuery Techniques For Good User Experience which lists over 45 impressive jQuery plug-ins and techniques.

jQuery Resources for Tables

Expand table rows with jQuery – jExpand plugin

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

jQuery Highlight Demo

Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify.

jQuery plugin: Tablesorter 2.0

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data, including linked data in a cell.

DataTables (table plug-in for jQuery)

DataTables is a plugin for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

Forms jQuery Plugins

Password Strength – Estimates brute force time (jQuery plugin)

Brute force, if your site it attacked, this hacking method can be the very devil. This plugin shows the strength of your passwords by telling you how long it would take to brute force them.

Masked Input Plugin

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome. A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.

Ajax Fancy Captcha – jQuery plugin – WebDesignBeach.com

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop a specified item into a circle. Captcha’s security level is only medium, with the emphasis on nice looking and user-friendly qualities that still offer reasonable protection from unwanted “guests”. The basic design and elements are easy to change and customize; take a look at the file structure for more information.

jQuery plugin: Validation

This robust, flexible jQuery plugin can validate a form like you’ve never been validating before. It is designed for an unobtrusive user experience, annoying the user as little as possible with unnecessary error messages. It helps a site react to more then just a submit event, like keyup and blur, without complex setup.

Pixelmatrix Design – Announcing Uniform

Any UI designer deals with form controls quite a bit. Often the checkboxes, selects, and radio buttons do not look consistent in all the browsers. Uniform, a plugin for jQuery lets you style select, radio, and checkboxes however you desire.

jQuery Nice Form

jQuery Nice allows you to create custom looking form elements, that function like normal form elements. It is a simple form, but you can make it appear as complex or customized as you need.

JavaScript image combobox v1.5

Are you tired with your old fashion dropdown? Try this new one, an image combo box. You can add an icon with each option. It works with your existing “select” element.

Opensource – AJAX – Jqtransform – jQuery form plugin

This plugin is a jQuery styling plugin which allows you to skin form elements with your own options for whatever browser you use.

Password Strength Meter (a jquery plugin)

Password Strength Meter is a jQuery plug-in to provide you a smart algorithm that can detect the strength of a password.

meioMask – a jQuery mask form input plugin

This jQuery mask form input plugin has many new features, compatibility, usage, options, fixed characters, and rules. Masks can be setup and tweaked to fit your needs, such as fixed or reversed mask types, has function to mask strings, while still allowing hotkey usage. It works with the iPhone, supports metadata plugin, and much more. Metadata will always overwrite the ‘attr’ value.

jQuery AlphaNumeric

jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.

Release: Validation Plugin 1.5.2

An update for the jQuery validation plugin is available. There is a small code fix, a new supported locale (slovak) and most notably, a new demo featuring integration with jQuery UI tabs and grouping selects. Support is available via jQuery discussion list and bug tracker.

jquery-keyfilter

This plugin filters keyboard input by specified regular expression. The source code inspired by Ext.JS, but was modified to provide more accurate logic.

boxy – Facebook-like dialog/overlay, with frills

Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays by providing an object interface to control dialogs after they’ve been created. It is simple to use and provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.

jQuery Image/Media Resources

jQuery Virtual Tour

This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated. Navigation uses the standard html tags <map> and <area> in accordance with W3C.

Fullsize : A New IMG Tag Attribute

Fullsize is an attempt to get a new attribute called fullsize into the next version of HTML. This is an attempt to bring something truly useful to all web developers. Please visit the Fullsize Google Group to add your thoughts on how you think this idea can be improved upon and hopefully get the attention of the W3C.

Simple JQuery Image Slide Show with Semi-Transparent Caption

With this tutorial, you will learn how to create a simple image slide show with a semi-transparent caption using jQuery. The final result will be suitable to display an image, headlines, or news your websites homepage.

Easiest Tooltip and Image Preview Using jQuery

This script adds an element to the body when you roll over a certain object. That element’s appearance is predefined with CSS (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When the cursor is moved over the object, the element moves with it; when the cursor rolls out, the element is deleted. The script takes a title attribute of an A tag and place it inside the popup element. When a thumbnail is rolled over, this script will load an image that we have linked in HREF attribute of an A tag, even if JavaScript is disabled. Also it can link to a URL screenshot preview.

Jquery Plugin MopTip 2.2

MopBox is draggable show box that can contain div, image , flashmovie, video, etc. If it has more than one child, then the slider navigation is shown automatically and is resizaable.

A jQuery Plugin for Zoomable, Interactive Maps – New Media Campaigns

Using this jQuery plugin, an interactive map can be created so that clicking important bullet locations can bring up more information on that location. Zooming into select sub-regions is also possible.

Navigation jQuery Plugins

Using jQuery Visited Plug-In.

Visited links hide with jQuery, but when clicking on "show all" button it displays the already visited links list in a slide effect.

jQuery Ribbon

This is a ribbon control built on jQuery. It supports grouping, forms, access keys, fixed position, dropdown menus, nested lists, theming and minimize.

Further Useful jQuery Resources

js-hotkeys

jQuery.hotkeys is a plugin that allows you to easily add and to remove handlers for keyboard events anywhere in your code, supporting almost any key combination.

jQuery Plugins by Dylan Verheul

To add a Google Map to your site, this plugin makes it easy to put on your page. After getting a valid Google Maps API key, you can add markers for your map and even text if desired.

iPhone-like password fields using jQuery

We do not completely go for the idea of typing passwords in plain text; by default as there will be a loss of security! Not a technical one, but a user-driven one.

Ready for use: CSS3 Template Layout

A jQuery plug-in to provide support for the CSS Template Layout Module. For those of you unfamiliar with this specification, it provides a relatively easy way to make a table-like layout using CSS. Until recently it was known as the “CSS Advanced Layout Module.”

JSS

JSS stands for Javascript Style Sheets, it is a jQuery plugin that allows you to take advantage of the full range of jQuery selectors accross all browsers from within your standard CSS files.

jQuery Stuff

jQuery Stuff has several plugins and demos such as the Ajax Events Demo. Global Ajax Events Demo demonstrates how jQuery’s global ajax events work. Click the generate successful or generate unsuccessful buttons to generate ajax requests. Information from the event handlers will then be printed beneath.

JHeartbeat 0.1 Beta

JHeartbeat is a plugin for JQuery 1.0.1 that allows a web page to periodically poll the server. This polling can be used to keep the user’s session alive or to download updated information.

jQuery Impromptu

jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.

jQuery Spotlight

jQuery Spotlight is a jQuery plugin which allows you to highlight elements in your page using a ‘spotlight’ effect. This plugin is highly customizable and requires no external CSS or images.

jQuery Page Peel 1.2

jQuery Page Peel displays a small animated “peel” on the top right corner of a page. Once the mouse is moved over the page peel, the page rolls down and a large clickable ad is displayed: Once the mouse is moved back onto the main page, the page peel rolls back up.