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.

1.4.x


GridIron - A jQuery freestyle json data grid

Submitted by thanos on June 23, 2010 - 4:05pm

Freestyle Grid

This plug-in lets you create a grid using either tables or divs & spans. I originally developed it to work with CouchDB but it will work with any JSON source.

The JQuery plug-in lets you map a CouchDb view to a html grid. That's it. I looked at the other JQuery grid plug-ins - many of which are really great - but I couldn't get them working and since I'm lazy. So here are its features:

* HTML agnostic you can use tables or divs or any HTML to layout your data.
* View JSON data from any source - such as CouchDB.
* Column sorting.
* Paging
* Compatible with JEditable. So you can edit your data creating new versions or in place.
* Really small - Currently under 3K.
* Coded in a clean fashion so you can subclass header/body or footer generation and the loading and saving of data.

User Guide: http://69.164.211.38/power/_design/reports/index.html
Download from: http://69.164.211.38/power/_design/reports/jquery.gridiron.js

Longclick

Submitted by vostrel on May 31, 2010 - 7:40am

Longclick is press & hold mouse button "long click" special event for jQuery 1.4.x. The event is triggered when the mouse button stays pressed for half a second (configurable) while the pointer is stationery.

Domino Effect

Submitted by khiltd on May 15, 2010 - 1:37am

Domino Effect is a one-trick-pony effects queue which strives to be a lightweight solution to one very basic and very common problem: running a single effect chain on multiple elements one-by-one, as if they were a carefully laid out stack of dominos.

To use it, you just build a wrapped set based on a selection and call one function that sets them all up as a stack. As long as you don’t need anything fancier, all the messy callback chains are handled for you. If you do need something fancier, then you probably won't be very happy with this trinket of whimsy.

It's only been tested in 1.4, but I can't select that version from the little box for some reason.

Speedometer

Submitted by jake on April 13, 2010 - 4:09pm

A widget for displaying a percentage through an animated needle on a speedometer image. Tested and works in Internet Explorer 7. Also tested on Firefox 3.6.3.

Usage:

$([selector]).speedometer([options object]);

Options:

percentage: (float/int, default: 0)

Value to display on speedometer and digital readout. Can also be specified in the selector's innerHTML.

scale: (float/int, default 100)

The value considered to be 100% on the speedometer.

limit: (boolean, default true)

Specifies that the speedometer will "break" if the value is out of bounds.

minimum: (float/int, default 0)

The lowest value the needle can go without the glass cracking.

maximum: (float/int, default 100)

The highest value the needle can go without the glass cracking.

Stretch Menu

Submitted by jake on April 12, 2010 - 4:54pm

Usage:

$(DOM node).stretchMenu(options);

Equally distributes menu items based on height of parent container. Optionally animates the menu with a sliding effect.

Limitation: Assigns padding to all items based on height of first child. In other words, if some of your menu items are more than one line of text, this menu might break out of the parent container.

Editable Source

Submitted by jake on March 30, 2010 - 10:40am

Purpose: Click on a DOM node to edit the HTML inside. Click outside to set it.

Syntax: $(element).editablesource(hilight,callback());

Tested on FF 3.6 and IE7 with jQuery 1.4.2

NobleCount

Submitted by theproductguy on March 22, 2010 - 12:39pm

NobleCount (visit project homepage for more details) is a customizable jQuery plugin for a more the improved counting of the remaining characters, and resulting behaviors, of a text entry object, e.g. input textfield, textarea.

As text is entered into the target text area an object for the purposes of tracking the total number of characters remaining, defined as the maximum number of characters minus the current total number of characters within the text entry object, and storing that information visually and/or within the DOM as an HTML 5 compliant data-* attribute.

Events and CSS Class alterations, if defined, are triggered based on current user interaction with the target text entry object as well as the current state (positive or negative) of the character remaining value.

NobleCount supports pre-existing text within the text object.
NobleCount supports jQuery chaining.

jQuery Canvas Minimap

Submitted by zhaoz on February 8, 2010 - 3:45am

Draws a minimap of text, currently only supports textareas. And will draw a canvas with the size of the textarea.

Basically, a zoomed out view of your text so you can get a 10,000' view of your code. (Inspired by sublime text editor).

Also breaks when a minimum font size is set. This can be worked around via scaling at some point.

Depends on jquery.detectFontSize.js (included)

Picasa Webalbum Integrator

Submitted by jdiderik on August 13, 2009 - 1:33am

PWI is a jQuery plugin that enables you to integrate your Picasa Web photo albums into your own site/blog without any need for extensive scripting knowledge and without your visitors ever noticing that your photos are hosted by Google.

Some options are:

  • Show all your albums
  • Show specific albums
  • Show only 1 or some albums
  • Show unlisted album (using authKey)
  • show your latest photos
  • Show multiple albums on 1 page

All fully customizable by specifying the options.

howto:
- Add a div to your html page with
- include the necessary files (jQuery (duh), pwi.css, jquery.pwi.js)
- Assign the plugin to the div

Example: