jQuery Validator Plugin

igv — Thu, 31 Dec 2009 00:04:58 -0800

jQuery Validator Plugin provides validation for user input in many different formats. This is a first public release of this plugin, so there are more features (such as additional and improved validation formats) coming in future versions.

Supported Formats:

Email
IP Address
Date
Date and Time
Phone
US Zip Code
Canada Zip Code
Credit Card
Numeric
Decimal
Alphanumeric

In case of any questions, issues or comments don't hesitate to contact me or post issue/feature request here.

If you do like the plugin, I would appreciate if you rate it above, thanks.

jQuery.engineer

jpoz — Sat, 06 Mar 2010 13:10:06 -0800

a clean and objective way to control the structure (HTML/CSS) and behavior (JS) of DOM elements, with the help of jQuery.

jQuery Options Filter

diyism — Wed, 08 Apr 2009 02:17:43 -0700

Just add a class name 'options_filter' to any select element,
then focus it and type in some character,
now options will be filtered.

I just found that "jquery options filter" won't work in ie6,
but in ie7, ie8, you should add DOCTYPE, such as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

jWizard

mako18 — Tue, 21 Jul 2009 15:05:53 -0700

jWizard is a user-friendly, flexible and powerful wizard plugin for the jQuery Javascript Framework.

NReco jSquared

fedorchenko — Tue, 18 Aug 2009 00:29:52 -0700

jSquared is a jQuery plugin that enables ability to add/remove HTML table columns and rows 'on-the-fly'. Its functionality is very similar to Google Squared UI and useful for building advanced search interfaces.

jQuery Week Calendar

robmonie — Tue, 23 Jun 2009 16:21:45 -0700

A jquery plugin providing an interactive weekly view of calendar events. Features include:

Display of calendar events within a weekly grid
Calendar events can be supplied as an array, url or function returning json
Calendar events can be dragged, dropped and resized
Lots of callbacks for customizing the way events are rendered plus callbacks for drag, drop, resize, mouseover, click etc
Automatically scrolls to current time
Extend the core calendar event data structure with your own data
Highly configurable, enabling variable timeslots, readonly calendars, display of partial days, custom date formatting, direct manipulation of individual events for create, update, delete of events and much more.

.NET style string formatting

just3ws — Sun, 15 Nov 2009 12:40:47 -0800

A simple function to support token replacement within a string.

Given a string like "Hello, {0}" and calling the format function with a single argument like "world".

var result = $.format("Hello, {0}", "world");

The result variable will be set to "Hello, world".

The function will support an arbitrary number of arguments including none. If a token is unused in the string it will be ignored. Too many arguments will not generate an error but will be ignored.

ImageTower

codesign — Sun, 30 Aug 2009 20:13:24 -0700

It is jquery that rotates the image.
It is possible to use it together with lightbox etc.
And, I'm not good at English.
JQuery is learnt and the sixth day.
Please teach when there is a bug in an easy word.

Lock Submit

buzzin — Tue, 01 Sep 2009 19:55:42 -0700

Stop Double Clicks on form submits

...without losing the submits name/value

Small JQuery function which disables a submit button on the onClick event, while still having the button's name/value passed to the form.

This pluging was created because normally if you disable a button with an onClick event, then that buttons name/value pair is not submitted with the form data. So this is useful if you have a submit button on a page which you are checking for being clicked when the form is submitted (e.g. if you have more than one button in a form) and you want to stop any double clicks on the button.

The plugin also allows you to define the CSS for submits effected, a onClick CSS Class and a value which the submit is changed too upon click. (e.g. Please Wait...)

syncTranslit

Snowcore — Tue, 20 Oct 2009 07:14:30 -0700

Plugin for generating transliterated slugs (Cyrillic symbols: Ukrainian or Russian).
It synchronizes two fields on the form. Data from field-source are beign transliterated to destination field.

:data() selector filter.

PimJager — Mon, 18 May 2009 09:01:34 -0700

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...

Here is some example code, please also do have a look at the documentation:

$('selector:data("foo")'); //Matches all elements that have .data('foo') defined.
$('selector:data("foo=bar")'); //Matches all elements that have .data('foo')=='bar'
$('selector:data("foo!=bar")'); //Matches all elements that have .data('foo')!='bar' NOTE that it still only matches elements that have .data('foo') defined.
$('selector:data("foo^=bar")'); //Matches all elements whos value for .data('foo') starts with 'bar'. i.e. .data('foo')=='barfoo' is matched but .data('foo')=='qwertbarfoo' not
$('selector:data("foo$=bar")'); //Matches all elements whos value for .data('foo') ends with 'bar'. i.e. .data('foo')=='foobar' is matched but .data('foo')=='foobarqwerty' not
$('selector:data("foo*=bar")'); //Matches all elements whos value for .data('foo') contains 'bar'. i.e. .data('foo')=='foobarqwerty' is matched 
//Also works on data objects!
$('selector:data("foo.bar")'); //Matches all elements that have .data('foo').bar defined.
$('selector:data("foo.bar.x^=hai")'); //Matches all elements whos value for .data('foo').bar.x starts with 'hai'
//Etc. =. !=,$= and *= are also supported on data objects

Released under BSD License.

Google code homepage
Documentation
Source code

NOTE: usage of the *=, ^= and $= requires the stringQuery (documentation) plugin, also released under the BSD license

jQuery.appear

orangebus — Thu, 11 Jun 2009 11:50:30 -0700

Note: please visit the project's home page for current releases.

Mimics a custom "appear" event, which fires when an element scrolls into view.

$('#foo').appear(function() {
  $(this).text('Hello world');
});

This plugin can be used to prevent unnecessary requests for content that's hidden or outside the viewable area.

CDZ Image Preloader

radmission05 — Wed, 09 Dec 2009 21:05:48 -0800

An image preloader written in javascript/jquery. This preload all images on your target element including backgrounds.

How to :
$(document).cdzPreloadImages(initCallback,progressCallback,completeCallback);

3DCarousel

khoa.nguyen — Sat, 28 Feb 2009 09:24:43 -0800

+ 3D Carousel with 1 point perspective projection.
+ To be updated later...

jQuery scrollbarWidth

Ben Alman — Sun, 07 Mar 2010 17:22:58 -0800

Calculate the scrollbar width dynamically!

Full documentation, source, and examples are available on benalman.com.

Scrollsync

maht@hitconsultants.com — Sat, 04 Jul 2009 09:47:32 -0700

Allows setting elements on a page to follow a target element scroll in sync. Can configure to follow axis x, axis y independently or both at a time.

jQuery Simple Filter

jakerella — Fri, 08 May 2009 10:08:51 -0700

SimpleFilter simply filters a list of strings by some input. Really not much to it: attach a simpleFilter to a text input (or anything with a value that can have a 'keyup' event triggered on it) and provide the source for the data. This plug-in will match results in the data and display them in a list directly below the input. Clicking on an option in the list inserts that content into the input and hides the list (there are also keyboard controls).

Note that this plug-in requires the Quicksilver jQuery Port!

Basic usage:

<input type='text' id='someInput' />

$('#someInput').simpleFilter({
  data: ['one', 'two', ...],  // Array REQUIRED
  maxListEntries: 20,
  caseSensitive: true
});

If you want to know when a selection is made, bind to "input.simpleFilter" on the the input tag:

$('#someInput').bind('input.simpleFilter', function(jQEvent, text) {
  if (typeof(text) != 'undefined') {
    // handle it
  }
  // NOTE: this binding will also capture regular 'input' events,  
  // you will want to check the text argument. If it is undefined, 
  // then you do NOT process the event as a simpleFilter selection
});

See web site for list of all options and examples.

jQuery Image Overlay

Jon Neal — Mon, 27 Jul 2009 08:52:25 -0700

jQuery Image Overlay Plugin

An Image Overlay plugin for the jQuery JavaScript library. Allows you to display additional information in a translucent pane above an image that gracefully appears when a user hovers over the image. Support for the metadata plugin is included. Brought to you by Jon Neal of ferretarmy.com.

docCreator

EdgarKlerks — Wed, 19 Aug 2009 18:09:23 -0700

description

This plugin adds a method to jQuery that let the user creates html tags. It takes in an object with options, which describes the html tag:

var divtag =  {tag:'div', content:'test', id:'container', append:'body'};
$.create(divtag);

The plugin also offers a way to extend and overide its behaviour easily. See the project website for examples.

The plugin returns a the element wrapped in the jQuery object, thus it is chainable. It is designed with ease of use and extendability in mind.

status

The plugin is still beta.

Look for more information at the pluginwebsite: http://www.goodforall.eu/docCreator.php

Goal

The end goal is to create a plugin, which let the user put the documentation into the javascript file, which can be viewed by calling: $.createDocument(script file);
On http://www.goodforall.eu/js/test.html there is a development version, which does this. It let you add help texts, contact info, pluginname and demos in a xml format and render it to html with a menu etcetera.

Image Zoom

powerbuoy — Mon, 11 Feb 2008 18:07:31 -0800

jQuery ImgZoom is very similar to Cabel Sasser's FancyZoom.

I've reduced some of the fanciness and also the amount of code. ImgZoom is 90 lines compared to FancyZoom's (around) 900.

It affects all links that point to images and is used like so:

$('#random-images').imgZoom();

Have fun.

Fixed Header Table

Golovko — Sun, 04 Oct 2009 23:06:11 -0700

This plugin will take valid table HTML and build a fixed header and scrolling body and optional footer.

Options include:
clone header as a fixed footer
create custom fixed footer (pagination, links, etc)
auto resize table and columns with the browser window (good for fluid layouts)
use on multiple tables on the same page

jQuery stack'em

axmin — Sun, 13 Sep 2009 19:47:06 -0700

...Used to group elements, elements in a group are stacked one over another. The plugin provide methods to spread and re-stack the elements. It was developed with grouping images in mind.

HTML structure

Basically, a group of elements is wrapped by <div class="stackem"> and each sub-element must be given "item" class.

CSS

div.stackem {
position:relative;
float:left;
display:block;

/***set width and height for a proper spread animation***/
width:132px;
height:88px;

/***custom decorations***/
margin:20px;
}
div.stackem .item {
position:absolute;

/***custom decorations***/
border:1px solid #FFF;
width:130px;
height:86px;
}

Plugin call & Options

$(document).ready(function(){
           $("div.stackem").stackem({
                     stackSpacing: 3,
                     stackMax: 4,
                     spreadSpacing: 10,
                     spreadItemsPerRow: 3,
                     spreadDuration: 500, 
                    zIndex: 100
            });
});
      

stackSpacing - distance (px) between items edges when stacked (top & left edge)
stackMax - no. of items visible when stacked
spreadSpacing - distance (px) between each item when spread
spreadItemsPerRow - no. of items displayed in a row when spread
spreadDuration - duration of spread animation
zIndex - z-index of items begins from this value

jQuery urlInternal: Easily test URL internal-, external-, or fragment-ness

Ben Alman — Thu, 08 Oct 2009 07:15:56 -0700

jQuery urlInternal allows you to easily test internal-, external-, or fragment-ness for any relative or absolute URL. Includes element filtering methods and pseudo-selectors.

Why do I need this plugin?

Ok. Let’s say you have a page full of links that you need to tweak. All the “external” links (linking to someone else’s server) need to open in a new window, and also need a class added to them that displays a little “popup” icon. All the “internal” links need to have a few of the current page’s query string parameters propagated through to them.

And all this needs to happen via JavaScript because your page caching strategy doesn’t allow you to change these link target or href attributes for every user.

So, when you’re only dealing with relative links, this is pretty easy. You know they’re all “internal”, while all the absolute links are “external”. Well, except when they aren’t. Just because a URL is absolute doesn’t mean it goes to someone else’s server. Some content management systems like to publish absolute URLs for internal pages. Sometimes your “content guy” just enters them that way. And in IE6/7, even relative URLs in href, src, or other “URL” attributes can’t always be differentiated from absolute URLs (due to a known bug).

And the same thing goes for fragments. What do I mean by fragment? I consider a “fragment” to be any absolute or relative URL that, when navigated to, only changes the current page’s location.href “hash”. Fragments are used in single-page apps as a simple way to push a new state onto the browser history (see jQuery BBQ for some great examples of this).

Normally, you could just select $("a[href^=#]") to get a collection of all a elements that have an href starting with “#”. These all contain fragments. Well, except in IE6/7, where no href will ever start with “#” because of that aforementioned bug! That’s where this plugin comes in. It does all the dirty work, so you don’t have to.

Full documentation, source, and examples are available on benalman.com.

jOWL semantic javascript Library

David Decraene — Fri, 30 May 2008 09:27:34 -0700

a jQuery plugin for navigating and visualising OWL-RDFS (OWL Web Ontology Language) documents, a cornerstone of the semantic web.

GridTable

kaimeder — Thu, 17 Jul 2008 21:04:28 -0700

GridTable

The plugin has the following features:

works on html-tables and leaves the structure fully intact
(which also means I haven`t found a way yet to give it a scrollable fixed height)
extensible readers (json, xml, etc), cell-renderers and cell-editors
full serialization of table-data
public methods (load, sort, page, serialize, etc).
executable using $('#gridtable').gridtable('load', [args]) api-style
events to hook into flow (e.g. $('#gridtable').bind('preload.gridtable', cb1).bind('postload.gridtable', cb2) )

it has been developed for a media-database and proved to be quite extensible so far.
however, I would call it a beta-release, as features like filters and movable columns are missing.

Floaty - Youtube Float embeder

tohidgolkar — Tue, 19 Jan 2010 06:59:24 -0800

Floaty

ver 1.0
Jan 2010

Just put the youtube videos links.

Features:

Display the thumbnail of video in 3 versions
Display the thumbnail of video in 2 size | Small and Big
Embed the videos in the Float box
Player close button
Customizable size and color of video player

jquery.keyfilter.js

Akzhan — Thu, 19 Feb 2009 06:43:19 -0800

This plugin filters keyboard input by specified regular expression.

Source code inspired by Ext.JS (Ext.form.TextField, Ext.EventManager), but was modified to provide more accurate logic.

Procedural style:

$('#ggg').keyfilter(/[\dA-F]/);

Also you can pass test function instead of regexp. Its arguments:
this - HTML DOM Element (event target).
c - String that contains incoming character.

$('#ggg').keyfilter(function(c) { return c != 'a'; });

Class style:

<input type="text" class="mask-num" />

Available classes:

mask-pint: /[\d]/
mask-int: /[\d\-]/
mask-pnum: /[\d\.]/
mask-num: /[\d\-\.]/
mask-hex: /[0-9a-f]/i
mask-email: /[a-z0-9\.\-@]/i
mask-alpha: /[a-z]/i
mask-alphanum: /[a-z0-9]/i

(Dhtmlmedia.com) Drop Down Menu JQuery Plugin

chris@dhtmlmedia.com — Sun, 13 Dec 2009 03:36:59 -0800

With this JQuery plugin you will be able to create a drop down menu like the one shown in the example below without the need to know JavaScript, only a basic knowledge of HTML and CSS. Documentation is included as a Word document that will guide you through the process of putting a drop down menu on your website. All fonts, colors, sizes and borders are customizable within the CSS.

Toggle Button

ckorhonen — Fri, 08 Jan 2010 11:12:02 -0800

A simple plugin for toggling the content and functionality of a link or button
element.

Useful when disabling links or submit buttons, or when responding to a user's
interaction.

E.g. User clicks a button, text changes to inform them that something is going
on, and button is disabled to prevent further clicks.

USAGE:

$('#element).toggleButton();

Upon first call, element will go to toggled state. Second call will restore to
normal.

Parameters can also be passed:

$('#element').toggleButton({ text: 'Processing...',
className: 'disabled',
preventClick: true
});

text - The text value which replaces the button text in the toggled state.
className - CSS class name corresponding to the toggled state
preventClick - Prevent clicks once toggled.

Page Sound Enabler

DBJDBJ — Mon, 02 Mar 2009 04:41:14 -0800

Simple but usable cross browser, page background sound jQuery extension.
Does not use flash, or similar. Simple API:

Return sound file url, from host element.
Host must be valid html element with attribute href present:

$.dbj_sound.url( host_element )
This is the only method throwing an exception, if host element sent is invalid or if it does not have HREF attribute, which has to exist and contain a valid url to the sound file.
Play a sound as defined by the href of the host_element:

$.dbj_sound.play( host_element )
Loop a sound playback:
$.dbj_sound.loop( host_element )
Stop a playback of the sound as defined by the href of the host_element:

$.dbj_sound.stop( host_element )
Return true if sounds are, on and sound defined by the href of the host_element, is playing:

$.dbj_sound.playing( host_element )
Toggle on/off all sounds on the current page, and controlled by this plugin:

$.dbj_sound.enabledisable( host_element )

Demo page uses WAV and MP3 files. Use it with particular browser to check which sound file types will play inside it. Usualy WAV plays everywhere.

Sound files loading issues do apply. The bigger the file the longer it takes to start playing.

Please look into the demo page source, for an usage example.

Most Popular Plugins

jQuery Validator Plugin

jQuery.engineer

jQuery Options Filter

jWizard

NReco jSquared

jQuery Week Calendar

.NET style string formatting

ImageTower

Lock Submit

Stop Double Clicks on form submits

syncTranslit

:data() selector filter.

jQuery.appear

CDZ Image Preloader

3DCarousel

jQuery scrollbarWidth

Scrollsync

jQuery Simple Filter

jQuery Image Overlay

jQuery Image Overlay Plugin

docCreator

description

status

Goal

Image Zoom

Fixed Header Table

jQuery stack'em

HTML structure

CSS

Plugin call & Options

jQuery urlInternal: Easily test URL internal-, external-, or fragment-ness

Why do I need this plugin?

jOWL semantic javascript Library

GridTable

GridTable

Floaty - Youtube Float embeder

Floaty

Features:

jquery.keyfilter.js

(Dhtmlmedia.com) Drop Down Menu JQuery Plugin

Toggle Button

USAGE:

Page Sound Enabler