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.

color


jQuery Colors Pickers HSL

Submitted by Enideo on September 14, 2010 - 12:01pm

Two color pickers have been developed upon the jQuery.colors plugin using the HSL (hue, saturation, lightness) color model. (See demos).

Why another color picker for jQuery?

It's true, everyone seems to have their favourite one...
Well firstly I wanted to open up the functions to outside use, so that's why we made jQuery.colors.
Secondly, I was previously using the very good Farbtastic plugin, but as a user I was always confused about what to do with the middle square: it seemed to me a lot of the choices overlapped and I never really knew where to click.
Finding the Inkscape HSL picker design more intuitive, I started to make hslLite. The result is good but doesn't truly represent hue on a circle, so hslCircle was born.

jQuery Colors

Submitted by Enideo on September 14, 2010 - 11:52am

jQuery.colors helps developers manage colors through a simple, chainable color object.

Example usage
$.colors( [255,0,0] ).toString('hex');
$.colors( [1,0,0], 'array3Normalized' ).format('array3Octet');
$.colors( 'lightCoral' ).model('HSL').get();
$.colors( 'hsla(0,100%,50%,0.4)' ).toString('name');
var mix = $.colors( 'Orange' ).mixWith( [ [128,255,0], '#f00' ] )
$('#idanimate({backgroundColor:'transparent'},2000)
$('#id').animate({backgroundColor:'red'},{duration:4000,mixModel:'HSL'});

Check github for the latest release!
http://github.com/Enideo/jquery-colors

xcolor plugin

Submitted by crypt on July 7, 2010 - 5:28pm

This plugin adds the ability to manipulate colors in various ways and to animate colors using the advantages of the internal parser.

Shadow animation

Submitted by edwinm on June 20, 2010 - 5:08pm

With this jQuery plugin, you can extend the animate function to support the CSS box shadow-property. You can animate the color, the x- and y-offset, the blur-radius and spread-radius.

Example:
$('#box1').animate({shadow: '0 0 30px #44f'});

The plugin works in the current versions for Firefox, Safari and Chrome. It is expected to work in Internet Explorer 9 when it is released.

Due to a bug in Opera, it doesn't work in this browser.

Currently, the shadow offset, blur and spread should be defined in pixels, so no ems, percentages etcetera. The plugin supports only one shadow.

Color animation

Submitted by edwinm on June 20, 2010 - 5:04pm

What's really missing from jQuery is animating colors. This plugin will add this feature. With this plugin, you can animate the following properties:

* color
* backgroundColor
* borderColor
* borderBottomColor
* borderLeftColor
* borderRightColor
* borderTopColor
* outlineColor

This plugin is based on Color Animations by John Resig. Unfortunately, it has a major bug which makes it unreliable. It also doesn't support the borderColor-property.

Small color picker

Submitted by Josh on April 20, 2010 - 10:13am

Small and easy color picker

Usage:
$('.color_input').smallColorPicker({options});
Options:
defaultColor - default color value
colorRows - num rows in color popup
colorValues - List colors, default Array("#000202","#953503","#35381D","#003906",.......)
buttonBackClassName - button class name, default "smallColorPicker_button_back"
buttonBackColorClassName - button color shower class name, default "smallColorPicker_button_color"
buttonOnPopupClassName - button class name on popup, default "smallColorPicker_button_back_popup"
popupClassName - popup class name, default "color_parent"
popupColorClassName - popup color element class name, default "picker_panel"
popupHeader - popup header class name, default "picker_panel_header"
clearClassName - div clear class name, default "clear"

RANDOM-COLOR

Submitted by yagi on November 14, 2009 - 10:18am

This plug-in changes the background color and the character color at random. It is possible to adjust the color change speed and amount by specifying the option.

Chroma-Hash

Submitted by mattt on July 29, 2009 - 12:57am

Chroma-Hash: A sexy, non-reversable live visualization of password field input

In a tweet: Chroma-Hash is a jQuery plugin that dynamically visualizes secure text-field values using ambient color bars

Password entry can be frustrating, especially with long or difficult passwords. On a webpage, secure fields obscure your input with •'s, so others can't read it. Unfortunately, neither can you—you can't tell if you got your password right until you click "Log In".

jquery.ColorChars.js

Submitted by buntine on July 1, 2009 - 12:05am

A very simple JQuery plugin to color blocks of characters in a set of elements.

It accepts a hash-map object like so:

$('div pre').colorChars({
'#' : '#ccc55e',
'@' : '#999aaa',
'$' : 'green',
'L' : '#333333'
});

Alternate

Submitted by bcamp1973 on February 13, 2009 - 1:26am

Assign alternating class names to selected elements (such as <tr> or <li> etc) to allow CSS assignment of colors or other styles of your choice. Excellent plugin for alternating row colors in tables! As a bonus, it will assign a "hover" class to elements if you set hover:true