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.

Plugins


AJAX-ZOOM :: Image Zoom & Pan Gallery, Fullscreen View :: 360° Object Rotate HTML5 - iPad touch support.
2 weeks 6 days ago

AJAX-ZOOM player is a powerful single image zoom & pan viewer with optional gallery extension. It features over 300 other options and can be easily integrated into any website, eCommerce solution or CMS.

AJAX-ZOOM uses image tiles to quickly generate a portion of the zoomed image (similar to Google Maps).

In a special 360° rotation mode it can also be used as object spinner.

Links
Examples
Magento (demo store)
xt:Commerce (xtcModified demo store)
VR Objects 360° (3D Spin & Zoom)
Oxid (demo store)
< < < < < < < < < < <

jQuery Doubleselect Plugin
1 year 37 weeks ago

jQuery Doubleselect Plugin

Fill in a second select box dependent on the first one.

Written by : Johannes Geppert

< <

! jQuery jQTubeUtil
1 year 21 weeks ago

What is jQTubeUtil?

» A JSON-based YouTube Search utility.

What can it do?

» Search YouTube using keywords
» Search YouTube's standard feeds
» Fetch a specific YouTube video
» Get Autocomplete suggestions for YouTube

Why would I want to use it?

» Search YouTube FAST(client side)
» Get up and running with basic YouTube searches in no time
» Integrate YouTube into your site!
» Play with a friendly response of YouTubeVideo objects

Show me something

Gladly... Check out some examples
< <

"Tweet" Button - Facebook LIKE button look & feel
1 year 42 weeks ago

Use this to create a "Tweet This" button, with the same look & feel as the new Facebook LIKE Button.
<

$("#template").feed() - AJAXified Templatized RSS Feeder
2 years 32 weeks ago

This jQuery class will read RSS feeds on a website through the use of AJAX and feed the data into a template as defined by the developer. Simple create a template object and define the "item" level of the RSS feed once within the object using variables for the different feed items. This plugin will then read the feed and duplicate the template object however many times specified- creating a simple feed reader. VERY easy to implement. http://www.ooeygui.net
< < < <

$(...).tap()
2 years 22 weeks ago

Eavesdrop into the chain (à la Ruby's Object#tap).

Example:

Want to know what elements this affects?

$('.foo').add('.bar').hide();

Tap into it!:

$('.foo').add('.bar').tap(function() {
    console.log(this);
}).hide();
< <

$.bind - binds an object to a function
3 years 22 weeks ago

This methode allows you to bind an object and sveral arguments to a function.
< < < < <

$.bindExist
2 years 20 weeks ago

Check if a bind's type is specified on an element or not.

Syntax:

//will return true or false
$(selector).bindExist(eventName[.namespace]);

Example:

$('#myDiv').bindExist('click');//return false
$('#myDiv').bindExist('click.myNS');//return false

$('#myDiv').bind('click.myNS',function(){alert('Plop!');});

$('#myDiv').bindExist('click');//return true
$('#myDiv').bindExist('click.myNS');//return true

NOTE: eventName[.namespace] is case sensitive.
< <

$.customdata - HTML5 Custom Data Attributes
1 year 50 weeks ago

This plugin is capable of extracting metadata from custom HTML5 "data-" attributes.

About HTML5 Custom Data Attributes

A custom data attribute is an attribute in no namespace whose name starts with the string "data-". Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

Read more in the official HTML5 spec overview.

Examples

For example, you can do:

<a id="my" data-method="delete" data-remote="true" href="/path">
  Unobtrusive delete link
</a>

And later access the dataset object via jQuery:
< < <

$.deep
2 years 21 weeks ago

$.deep provides two methods (depending on the number of arguments passed, either two or three) that set or get deeply nested properties of objects.

Given the object:

var foo = { 
  deeply: { 
    held: { 
      belief: 'eval() is evil.' 
    } 
  } 
};

Using the setter method:

var foo = $.deep({}, 'deeply.nested.property', 'bar'); 

We can non-destructively add the property, resulting in:

var foo = { 
  deeply: { 
    held: { 
      belief: 'eval() is evil.' 
    }, 
    nested: { 
      property: 'bar' 
    } 
  } 
}; 

The complementary getter:

var val = $.deep(foo, 'deeply.held.belief'); 

...returns the mantra "eval() is evil."
<

$.delegate
3 years 17 weeks ago

This is a jquery plugin which handles event delegation. There are a bunch of delegation plugins out there, and this is just an example of additional functionality, that I wanted to try before delegation gets added to the core.

The "delegate" method takes 3 or 4 arguments:

  • type - The type(s) of event being bound/delegated. Seperate multiple events with spaces.
  • selector - The selector(s) to match against event.targets and execute the provided handler. Seperate multiple selectors with commas (extra spaces are allowed).
  • handler - The function to call against the matching selector(s). The scope (this) will be the matched element.
  • data - (optional) Any data to be shared between handlers via the event.data property. Currently, only the initial binding of a delegate handler will bind the data. This will be easily fixed for the next release.

The "undelegate" method takes 0 to 3:
< <

$.diff
1 year 20 weeks ago

jQuery Diff objects Plugin

$.diff(obj1, obj2) returns an object containing the differences between two objects.

The result object looks like this : {mod: ..., add: ..., del: ...} reflecting the modified, added and deleted properties into the copy of the original data.

Copyright 2010, Marc Rutkowski / Attractive Media
Dual licensed under the MIT or GPL Version 2 licenses.

Based upon the code of Michael Schøler
< < < <

$.editableAreas
2 years 49 weeks ago

This plugin allows you to convert parts of the page into editable areas, just click on them and when you finish editing click outside. If you convert an inline element (h1...h5, p ) with this script, the line breaks will be disabled.
< < < < < <

$.format -- Python-style string formatting
1 year 40 weeks ago

An attempt to replicate, to some degree, python's percent-style string formatting. Supports positional, named, and single arguments, as well as a pluggable converter system so you can write your own converters.
<

$.inJSON - Search by Key in JSON Data
1 year 21 weeks ago

I needed a quick and dirty way to find a particular key's value in a JSON blob of relatively arbitrary structure. So I made the following jQuery 1.4.2 plugin, inJSON, along the same lines as $.inArray and $.grep

Example of usage:

var zomg = {
    "a": "b",
    "c": {
        "d": "e",
        "a": [
            {
                "a": "barf"
            },
            {
                "z": "biz"
            }
        ]
    }
};


$.inJSON(zomg, "a");
["b", [Object { a="barf"}, Object { z="biz"}], "barf"]
< < <

$.smoothAnchors() - Smooth Anchors
2 years 27 weeks ago

Links which use the pound(#) symbol to anchor to another area of the page are generally used for navigating large blocks of text. This plugin creates a simple animation for anchor links by quickly scrolling the page to the area where the anchor is at rather than just jumping right to the anchor like normal.

http://www.ooeygui.net/
< < <

$.talk (Talk!)
1 year 44 weeks ago

The talk function is a micro-utility, class method, built for plugin developers, to allow plugins to talk to each other on "channels". By talking to a channel, and identifying the plugin, and key (instance of the plugin), settings may be changed on the fly, by any other plugin, a callback, or any piece of code that possesses the key.

The first plugin to use this utility is the Wayfarer Tooltip (wTooltip) http://plugins.jquery.com/project/wayfarer-tooltip .

Talk! actually consists of two functions:

$.talk(settings)

and

$.listen(settings);

Both functions return settings as they are. $.talk changes the settings as they appear on the channel, where they can be read or set by any function that possesses the key. $.listen retrieves the settings in the channel, then returns them.
< <

(mb)FlipText, finally turn vertically your text!
2 years 9 weeks ago

jquery.mb.flipText is a simple plug-in to turn your text vertically in both direction: top-bottom or bottom-top.Wasn't that something you would have done on your HTML pages?
< < < <

(mb)scrollable, scroll your content!
2 years 16 weeks ago

Need to show many elements in constricted space?

1, 2, 3, 15...slide how many box you want with a simple and configurable navigation toolbar.

here is the js call:

$("#myScroll").mbScrollable({
   width:700,
   elementsInPage:1,
   elementMargin:2,
   shadow:"#999 2px 2px 2px",
   height:"auto",
   controls:"#controls",
   slideTimer:600,
   autoscroll:true,
   scrollTimer:4000
});

here is the code for the dom elements:

  <div id="myScroll">
    <div class="scrollEl" style="background-color:#9999ff">1</div>
    <div class="scrollEl" style="background-color:#cc9900">2</div>
    <div class="scrollEl" style="background-color:#660066">3</div>
  </div>

  <div id="controls">
    <div class="first">first</div><div class="prev">prev</div>
    <div class="next">next</div><div class="last">last</div>
    <div class="pageIndex"></div>
    <div class="start">start</div><div class="stop">stop</div>
  </div>
< < < <

:attr
3 years 23 weeks ago

This very small plugin to jQuery adds the ':attr' selector to the custom selector list.
It allows specifying more advanced options on attributes than the usual [@attribute] selector.

Example of use:

$('p:attr( @id>2 && @id<4 )').hide();
    would hide every paragraphs with 2<id<4...

You can compare strings with the following syntax:

$('p:attr( "@id">"B" )');
     would select every paragraphs where id>B in alphabetical order.

The expression placed in parameter will be evaluated with the attributes values and you can put any boolean-evaluated expression inside the parenthesis like the following


$('p:attr((@id==1) || (@id>2 && @id<4))').hide();
<

:data() selector filter.
2 years 38 weeks ago

This plugin allows you to query elements for data that has been added using the $(elem).data() function. This works in a way similar to querying elements for attributes using the [attr] filters. You use it something like this:
$("#someElem:data('bar=foo')");
Just like [attr] it allows for more complex matching such as: != (does not equal), ^= (starts with), $= (ends with), *= (contains).
Since the $(elem).data() function also excepts objects you can query for object properties using:
$("#someElem:data('object.property.something^=bar')");
Read on...
< < < <

:path
3 years 40 weeks ago

:path is a pseudo-class selector written in jquery. It automatically filters out href attributes that matches the window location and it's ancestors. Use it to style or modify active states in navigations without server-side interaction.

Usage (example):
$('ul a:path').parent().addClass('active');

Comes bundled with the similar selector :current that filters out hrefs that points to the very same page that the window.location returns.
<

ACCESSdb: Microsoft Access in JavaScript
2 years 41 weeks ago

ACCESSdb is a JavaScript library used to dynamically connect to and query locally available Microsoft Access database files within Internet Explorer. All you need is an .mdb file; Access does not even need to be installed! All of the SQL queries available in Access can be executed on the fly, including SELECTs, INSERTs, UPDATEs, and JOINs. Results are output in several customizable formats including JSON, XML, and HTML.

Download Now

 
< < < < <

Accessible
3 years 50 weeks ago

What is this ?

  • This plugin aims to be a collection of snippets that improve accessibility for websites.
  • It also includes a set of "recommendations" coded as tests to improve accessibilty (even beyond javascript).
  • These recommendations can be tested against a page, and get a summary of the results.

How to use it ?

  • First add a call to jquery.js (duh!).
  • Add jquery.accessible.js. This contains the engine for rules/fixes and a set of predefined ones.
  • Right after this, you are ready to run the fixes by calling jQuery.accessible(). You can pass in a hash to specify, with the id and true or false, which ones to run.
    IMPORTANT: don't call this function inside document.ready, call it right away instead.

If you want to run the tests in your page:

  • Add jquery.accessible.validator.js after jquery.accessible.js.
< < < < < < <

Accessible News Slider
4 years 29 weeks ago

Accessible News Slider is a component for viewing news headlines and photos, which is built to be accessible according to WCAG 1.0.
< < < < <

Activebar2
2 years 51 weeks ago

Activebar2 is a crossbrowser information bar mimicking the look and feel of the widely spread bars used in modern browsers. It provides an easy and unobtrusive way of communicating all sorts of messages to your users. Or to provide help by displaying tips and usage informations.
< < < <

AddFavourite Browser Bookmark
3 years 18 weeks ago

A browser independent function to allow a user to add a bookmark/favourite to their browser with the click of a button.
<

Advanced Form Validation
2 years 16 weeks ago

Form Validator with several features such as grouping required fields or conditional checking if it is valid or not. Also you can validate string, numeric, date or e-mail. And you can combine several validations. For example: required numeric input and minimum 5 chars long.

Easy to build your validation rules by css classes.

<input type="text" name="phone1" "req-min req-numeric req-both" minlength="9" rel="phones" ..>

Customizable Plugin

You can edit error messages, date seperator, onsuccess function, standard error div selector.

Easy to assign

$('#submitBtn').formValidator({
scope : '#form',
errorDiv : '#errorDiv'
});

Different forms of assign

You can trigger from button or just call the function:
$.formValidator...
$('#button').formValidator...

Here is the css classes:
< < <

Ajax Iframe file upload
1 year 20 weeks ago

Really simple jQuery Ajax File Uploader plugin.

Well, it's not really Ajax uploading considering file upload with ajax is not possible, but the end result is similar.

This jQuery plugin creates a hidden iframe and sets the form's target attribute to post to that iframe. When the form is submitted, it is posted (including the file uploads) to the hidden iframe. Finally, the plugin collects the server's response from the iframe.

This pseudo ajax file upload plugin is about 550 bytes minified and gzipped.
< < < < <

AJAX Powered AutoComplete Plugin
2 years 6 weeks ago

Ajax Powered Autocomplete (Dropdown list) Plugin for JQuery based on the other version (also of my creation) for other javascript frameworks.

Fully customizable through CSS.
< < < <