Most Popular Plugins
Embed Quicktime
November 12, 2007 - 3:47pm — andreasEmbed QuickTime is a jQuery plugin that helps you embed QuickTime movies to play directly on your webpage, instead of redirecting your video to a separate page or forcing you to embed a video using Flash. It changes regular image links to the embedded QuickTime video when they are clicked. It works with .mov, .mp4 and .m4v files.
The plugin supports the Metadata plugin and allows you to set any of the embed tag attributes that QuickTime supports.
Text limiter for form fields
October 25, 2007 - 3:36am — vsyncCounts down the number of chars left on a Textarea/Input fields,
won't let the user write more than allowed number of characters.
When copy/paste text, it trims it to the set limit, and also
has an option for slow trimming, char by char (define speed).
TextList
March 6, 2008 - 2:20pm — xavoText Box List Facebook mail style with autocompleter of Dylan Verheul but re-programed for TextList.
tablesorter
April 25, 2008 - 11:39am — christian.bachTablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.
Tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:
- Multi-column sorting
- Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
- Support for ROWSPAN and COLSPAN on TH elements
- Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
- Extensibility via widget system
- Small code size (7,4kb packed)
Spy
June 19, 2007 - 11:38am — remysharpA plugin that creates the same effect as the Digg spy using either plain HTML or JSON in an AJAX response. Includes the nice 'fade the last items' down effect as a built in plugin.
Documentation includes several demos and source code.
JSON Parser
April 18, 2008 - 2:36am — deadwisdomThis plugin makes it simple to convert to and from JSON.
Most people asked me why I would want to do such a thing, which boggles my mind. Javascript makes it relatively easy to convert from JSON, thanks to eval(), but converting to JSON is supposedly an edge requirement.
This plugin exposes four new functions onto the $, or jQuery object:
- toJSON: Serializes a javascript object, number, string, or arry into JSON.
- evalJSON: Converts from JSON to Javascript, quickly, and is trivial.
- secureEvalJSON: Converts from JSON to Javascript, but does so while checking to see if the source is actually JSON, and not with other Javascript statements thrown in.
- quoteString: Places quotes around a string, and inteligently escapes any quote, backslash, or control characters.
(v)sprintf
February 3, 2008 - 10:12pm — m0n5t3rImplements both a somewhat stripped down "classic" version of the C sprintf (no support for width, sign, padding and flags), and a python-like one employing named parameters.
Why another implementation, when we already have one? well:
- size: 2262 bytes;
- features: I wanted named arguments, like in python;
- license: the existing implementation uses a BSD license, I wanted GPL;
- and fun, of course.
Usage
//sprintf
//positional arguments
var classic = $.sprintf('%s %d%% %.3f', 'string', 40, 3.141593);
// classic = 'string 40% 3.142'
//named arguments
var named = $.sprintf('%(name)s: %(value)d', {name: 'age', value: 40});
// named = 'age: 40'
//vsprintf
var classic = $.vsprintf('%s %d%% %.3f', ['string', 40, 3.141593]);
// classic = 'string 40% 3.142'
//named arguments
var named = $.vsprintf('%(name)s: %(value)d', [{name: 'age', value: 40}]);
// named = 'age: 40'Rolla Imagehover
March 25, 2008 - 6:14pm — FreaKzeroRolla makes automatically a crossfading image rollover only with a link.
Example: (with default options here)
$.rollaHover({
imgDir: 'images',
onFade: 'fast',
outFade: 'fast',
mainOpacity: "1",
css: 'rolla'
});HTML
From:
<a href="http://jquery.com/" class="rolla">jquery</a>To:
<a href="http://jquery.com"><img src="images/jquery.jpg" alt="jquery" title="jquery" class="rolla"></a> Fade:
<a href="http://jquery.com"><img src="images/jquery-on.jpg#hover" alt="jquery" title="jquery" class="rolla"></a> Equalize Columns
July 9, 2007 - 6:38pm — Dave Dash$("#col1, #col2").equalizeCols();
will equalize the columns as expected
$("#col1, #col2").equalizeCols("p,p");
will equalize the columns and add the extra space after the p tag in #col1 or #col2 (whichever is shorter).
ScrollShow
October 30, 2007 - 12:04am — FleslerI've made a new plugin, that is meant to supercede jQuery.ScrollShow. The latter has been in beta stage for too long.
Please check Query.SerialScroll
http://flesler.blogspot.com/2008/02/jqueryserialscroll.html
It's very small and it offers high customizability.
It can be used for slideshows, section navigation, news tickers, etc. (These 3 exemplified in the demo).ScrollShow is a very customizable slideshow, that relies on jQuery.ScrollTo, to slide(scroll) the items.
Documentation is included in the source file.
The plugin is still in beta stage, but will be soon (hopefully) stable.
Feedback and bug reports are very welcome.
TypeWatch
August 16, 2007 - 8:26pm — DennyDotNetCall a function when a user has changed the text within a textbox and after the user has stopped typing. Applies to any input textbox or textarea.
Note* This is not the OnChange event, instead the function is called after the user has finished typing (or if the user stopped typing for # amount of milliseconds) even if the textbox continues to have focus.
This can be used in conjunction with an AutoComplete box, so instead of firing an AJAX call every 500 ms, you can fire it once when they've stopped typing.
Example:
var options = {
callback:function(){ alert("changed search text"); },
wait:750, // milliseconds
highlight:true, // highlight text on focus
enterkey:true, // allow "Enter" to submit data on INPUTs
}
$("#search").typeWatch( options );Also works with multiple elements:
$(".textbox").typeWatch( options );jQuery fade anything plugin
October 7, 2007 - 3:13am — rongjunxueDownload:
http://jquery.com/plugins/project/fade
or
http://rongjunxue.viminta.com/wp-content/uploads/2007/10/fade_include_de...
Features:
- base on the fat.js which use in the wordpress.
- very easy to use.
- very pretty effect.
- bug fixed:mutiple element fade bug.
Online Demo:
http://rongjunxue.viminta.com/demo/fade/fadedemo.html
Method:
In this release,you can fade anything with “vkfade()” method:
$(”#output1″).vkfade(); //with no parameter,default color vaue is #ff8000.
or
$(”#output1″).vkfade(”eee000″); //with the RGB optional parameter
Report bug:
http://jquery.com/plugins/node/add/project_issue/fade/bug
beePolaroid
April 27, 2008 - 12:54am — dlaresAn Experiment using instant.js and jQuery.
All documentation is in Spanish.
Pagination
January 5, 2008 - 5:07pm — thesaintWhen you have a a large list of items (e.g. search results or news articles),
you can display them grouped in pages and present navigational elements to move
from one page to another. This plugin creates these navigational elements.
xModify
July 10, 2007 - 6:04pm — bbuffonexModify is an XML syntax that can be used to update HTML elements declaratively. This means that developers can utilize server-side frameworks to create xModify documents that an xModify Processor will use to update the HTML document.
Why is this Helpful?
Because, instead of having to create JavaScript to update the UI for a particular dataset, the developer
can use server-side functionality such as PHP, J2EE, Ruby, or XSLT to create XML documents that can to the same thing. This
typically will save code, time and increase the maintainablity of the application.
The second reason xModify is helpful is that it puts the know-how into a well defined XML layer, instead of either a
client-side or server-side library. XML can be outputted from any server-side or processed client-side layer, making it more likely that knowledge of
xModify can be leveraged across projects.
Operations
xModify contains a set of operation that a developer would need to perform when manipulating a XML or HTML DOM.
Each of the operations contains a select attribute that is used to select a set
of operations.
- append
Append the children of the operation to the selected nodes
- clone
Create a clone of the selected nodes.
- insert-after
Insert the children of the operation after the selected nodes
- insert-at
Insert the children of the operation at a specific index of the selected nodes
- insert-before
Insert the children of the operation before the selected nodes
- remove-attribute
Remove an attribute from the selected nodes
- remove-element
Remove the selected nodes.
- replace
Replace the selected nodes with the children of the operation.
- replace-children
Replace the children of selected nodes with the children of the operation.
- set-attribute
Change an attribute of the selected nodes.
- set-innerhtml
Change the HTML of the selected nodes to be the children of the operation.
- embed-xal
Embed XAL components of the operation into the selected nodes.
Comet
January 9, 2008 - 5:18am — morganImplementation of Bayeux protocol for jQuery. Current supports, handshake, subscriptions, binding callbacks into the jQuery event system based on channel names.
HTML Truncator
March 10, 2008 - 9:42pm — malesca"More"/"less" style truncation. Handles HTML gracefully: doesn't split inside HTML entities, doesn't orphan end-tags and so on.
Example usage:
$(function() {
$('.example').truncate({max_length: 24});
});Overriding all defaults:
$(function() {
$('.example').truncate({max_length: 24, more: "plus it", less: "nevermind"});
});Background-Position Animations
October 7, 2007 - 11:46am — trixtaAdds the ability to do background-position animations to jQuery 1.2, and newer.
$('#background').animate({backgroundPosition: '(150px 250px)'});
jquery.popup
January 25, 2008 - 8:22am — Bolikjquery popup plugin
an easy to use popup select, suport treestyle select
UI Datepicker
October 31, 2007 - 11:26pm — iMarcTHIS PROJECT IS NOW IN THE OFFICAL jQuery UI LIBRARY AND LINKS MAY NOT BE ACCURATE
- Easily change the look and feel with CSS
- Full settings API lets you customize the functionality how you want.
Everything you would expect from a date picker and more. The look and feel is easily customizable through CSS and the settings API allows you to tweak the date picker to exactly what you want.
"Absolutely superb. A first class piece of software. It now has everything I need. Thanks for being so responsive to my suggestions."
jTabber
December 26, 2007 - 1:56am — jboeschAllows you to scroll through content by clicking on tabs, without the page having to reload. The content is already on the page, you just need some javascript to tell it to display. It's very flexible in what you're wanting it to do and easily integrates into your existing site.
LocalScroll
October 24, 2007 - 10:10pm — FleslerThis plugin will animate a regular anchor navigation [1] [2].
It will allow your visitors to navigate your site with a smooth scrolling effect.
Each time a link is clicked, the element you decide(can be the whole screen), will gradually scroll to the targeted element, instead of "jumping" as it'd normally do.
jQuery.ScrollTo is used for the animation.
- Check its Homepage, it includes extensive documentation.
- You should then pay a visit to its Regular Demo and if you are interested, there's also an AJAX Demo available. This way you can see this plugin in action.
Multimedia Portfolio
December 12, 2007 - 11:04pm — Arnaultnon obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3). Demo
in your BODY section, just add a simple html list of medias :
<ul class="multimedia-portfolio">
<li><a href='link-to-document'><img src='doc-thumbnail' title='doc-title'></a></li>
<li>...</li>
...
</ul>and the plugin will automatically detect the extension of each media and apply the adapted player.
jThrottle
April 27, 2008 - 8:15am — cdmoyerjthrottle is a very simple plugin for jquery, designed as a drop-in replacement for $.each(). Performs the loop in chunks, allowing a timeout after portions of the loop, preventing the browser from appearing locked up during your loop.
XSLT (based on Google's AJAXSLT)
July 26, 2007 - 7:15pm — ChainfireThis is a jQuery Plugin for Google's AJAXSLT. It gives you the ability to transform XML/XSL from JavaScript. AJAXSLT is a parser itself, the library does not depend on your browser being able to do XSL transforms. The plugin also provides functionality to load XML/XSL through $.ajax() calls and transform them.
Basic XPath
September 9, 2007 - 8:49am — John ResigThis plugin adds in basic XPath selector functionality, compatible with jQuery 1.1.
jQuery Animated Innerfade, an extension to Innerfade
November 1, 2007 - 12:17pm — ArnaultAn animated slide show based on the work of Torsten Baldes : Innerfade, with additional functions :
- slide effect on large images
- ’prev’, ’pause’, ’next’ functions
- an optional background frame
- a title panel
Jquery xhtml() : jquery extension to get valid xhtml code with IE browser (innerHTML fix)
December 26, 2007 - 5:17pm — aladdinSometimes you need to use jquery html() methode to get the html code from an element to manipulate it as XML string.
the problem is that IE generate non valid xhtml (no attribute quotes, malformed lists ...etc) .
with this extension I tried to fix this using the minimum javascript code to make the function as efficient as possible.
no real xhtml validation is done, the html code is only modified when IE navigator is detected.
FastTrigger
April 5, 2008 - 11:26am — FleslerWhat is it
This small plugin includes a clean and simplified version of jQuery.trigger, that will perform better and will specially scale better.
How is this achieved
Many useless steps are skipped when programatically triggering an event, this step that jQuery does no matter what, are not really necessary for triggered events, and some of them hit on perfomance badly. Most of them are not optimized for speed and scalability, but for reusability and code size.
Differences with trigger
This method supports array of data (can include an event object), namespaced events and exclusive triggering. The only known difference with jQuery.trigger is that this method doesn't trigger native handlers, so it's actually comparable to .triggerHandler().
Perfomance
This is method is at least 4 times faster than the regular trigger, and will scale much better as you call it on more elements at once.
Global triggering
The equivalent for jQuery.event.trigger, is $.fastTrigger it accepts the same arguments as its prototype's counter-part, but triggers the event on all the elements in the page.
This is a dangerous method to use, as it may hang the browser if the page has many elements, using $.fastTrigger won't solve the problem, but will surely perform better.
This case should show off the previously mentioned (improved) scalability.
A few examples
$('div').fastTrigger('mouseover');//regular
$('h1,h2').fastTrigger('click.myNamespace');//with namespace
$('li p').fastTrigger('focus!');//exclusive
$('ul.list').fastTrigger('collapse');//custom event
$('#pane span').fastTrigger('click', ['foo','bar']);//with an array of data
var ev = {preventDefault:function(){},foo:1};//your own event object
$('a').fastTrigger('blur', [ ev, 8 ]);//yours is used instead
$.fastTrigger('keypress');//global triggeringDefault Value
April 19, 2008 - 1:25pm — pauljamescampbellA simple user enhancement for your HTML forms
Default value plug-in has been developed as a progressive enhancement for input and textfield elements. Allowing an initial value to appear within the form element, acting as a prompt for the user. This value is removed upon element focus and returned (on blur) if an alternate value has not been entered the user.
Although the plug-in does allow manipulation of multiple elements in one call, a basic application can be implemented within a simple one line command:
jQuery(function($) {
$("#input-one").defaultvalue("Your text");
})For full API information visit Campbells Digital Soup