Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

usability


ChronoStrength

Submitted by smallhadroncollider on April 24, 2010 - 6:59am

ChronoStrength is a password strength checking plugin. However, rather than just saying "Too Weak" or "Strong", which don't really mean much, ChronoStrength displays how long it would take a regular desktop PC to crack the password using a brute-force attack. Seeing that their password would only take 30 seconds to crack might convince people to choose a more secure one!

Based on the code from http://howsecureismypassword.net/

Usage

ChronoStrength has two interface methods: attaching it to a text/password input or calling the function directly.

Attaching to a text/password input

To use ChronoStrength on password input:

$("input#password").chronoStrength();

By default this will create a new with a class of "chronostrength-box" immediately after the password input.

Options

Inline label

Submitted by kabo on February 6, 2010 - 9:11am

Takes the label text for a field and places it inside the field.
You can also put a text of your choice in the field, or use the title attribute, choose which class the field should have and whether the label should be hidden once the text is placed in the field.
Verified with jQuery 1.4.x and 1.3.x.

mwheelIntent - a more usable mousewheel plugin

Submitted by trixta on December 13, 2009 - 10:11am

mwheelIntent is an add-on for the famous mouse wheel extension and adds a more usable event for handling mousewheel in nested scrollable areas.

mwheelIntend trys to determine the users intent, to make the mousewheel event more usable.

$('div.carousel').bind('mwheelIntent', function(e, d){}):
//or
$('div.carousel').mwheelIntent(function(e, d){}):

Persist Helper Text

Submitted by NathanaelB on October 23, 2009 - 9:18am

The purpose of this plugin is to persist the display of helper text associated with a form field by rendering the helper text (the title attribute on the field) inside the field until the user wants to enter text into the field where the plugin then moves the text outside the form field until the user is finished. This keeps the form display clean, makes it obvious which helper text or prompts relate to which field and makes sure the helper text is always available to the user.

All you have to do is make sure the text fields you want to use this on have the class name "persist" and that the field has a title attribute with the helper text you want rendered. Also, put some bottom padding on your form rows to make space for the helper text otherwise it'll bounce the form around.

dirtyFields Plugin: Bring Attention to Changed Form Fields

Submitted by bcswartz on August 24, 2009 - 8:53pm

The dirtyFields plugin was born out of the need to make a user aware that they had unsaved values on an HTML form.

It seems like a simple task at first: it's easy to use jQuery to bind an event to a text input or a <textarea> such that, when a change is made to the value, the text element is styled to look visually different (like changing the border color). But you can't do that with <select> drop-downs, checkboxes, or radio buttons.

This plugin gets around that problem by letting you apply whatever CSS class you want to use to indicate that a field has been changed to a contextually-related element, like a <label> element for the field, or an adjacent <span> or <div>, or any element you somehow associate with that form field: the plugin options give you complete control over what gets styled to indicate a field has been changed/made "dirty".

Incremental Search for Select Boxes

Submitted by oetiker on August 15, 2009 - 5:16pm

Did you ever have to scroll through a select box with lots of options. Did you wish there was incremental search? Your wish has been granted.

This plugin modifies ordinary select tags to allow incremental search.

Usage:

jQuery(document).ready(function() {
    jQuery("select").AddIncSearch();
});

The plugin will disable itself on Internet Explorer 6 since it is to slow for this to work sensibly. If you want to experiment with IE, just remove the respective code right at the start of the plugin code.

See the header of the JavaScript file for detailed documentation.

Try out the demo.

cheers
Tobi Oetiker

intoViewport Scroller

Submitted by amoebe on August 10, 2009 - 7:59am

Plugin to scoll to a certain DOM-element, but only if this element is not already in the browser's view port. Also scrolls only as far as necessary. Uses animate(), so scroll effects are customizable as every other animation (callback, speed...)

How to use

Easy. Make sure the plugin is loaded, then use e.g.:
$('a').eq(4).intoViewport();
This will scroll the 4th link on the page into the browser's field of vision.

Options

intoViewport will pass its parameter to animate(), so you can use all it's options:
$('a').eq(4).intoViewport({duration:"slow",easing:"linear"});

Download

The download below is a comment documented version, for producton you can use the minified verion (480 Bytes).

showPassword

Submitted by byronrode on July 2, 2009 - 10:38am

Adds a customizable Show Password checkbox to your forms to allow users to view their password as they are typing it, in plain text.

Please view the website and demo for more information on implementation.

linkNotify - Inline link click notification

Submitted by briancray on June 9, 2009 - 1:37pm

linkNotify 2.0 is a lightweight jQuery plugin that provides better user feedback on clicked links than the browser by displaying a color-changeable progress bar behind the link.

linkNotify examples:

$('a').linkNotify(); // default (simple, right?)
$('#content a').linkNotify(); // customize the selector
$('#content a').linkNotify('#ff0000'); // customize the progress bar color

SexyCombo

Submitted by kadalashvili on November 26, 2008 - 12:55pm

Sexy Combo is a plugin that allows you to easily turn your selectboxes into much more attractive and usable combo boxes. The difference is that the user can choose whether to type the value, select it from the dropdown list or use the mixture of both of these ways. Sexy Combo reaches its maximum efficiency when you have selectboxes with lots of options, and user can type the value more quickly rather than select it from a huge list. Sexy Combo is much more attractive than standard browser selectboxes, and (more important) it gives your users more freedom (as tagging in comparison to traditional taxonomy). Visit demo page to see how it looks, and, I am sure, you will appreciate it.