Best jQuery Plugins

Slidedeck – Interactive Presentation Slider

SlideDeck is a new way to display content on websites, mobile phones and kiosks. It delivers a better user experience by removing the information overload and providing a fun, quick and beautiful way to interact with digital devices.

Visual Lightbox

Visual Lightbox is a jQuery plugin for lightbox-style photo galleries and slideshows.

DropCaptions

Drop captions takes an image?s title attribute and converts it into a caption that appears only when the mouse is moved over the image. This allows you to maintain a clean look while enabling the functionality of captions. It?s also totally degradable if the user has JavaScript disabled; the title attribute will still display the exact same text.

TextMorph

A plugin to create shape on element. This shape has form defined by functions.

Timeago

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. “4 minutes ago” or “about 1 day ago”).

imProgressBar

A Progress Bar that can be displayed inline or as a popup. The imProgressBar is bundled with over 20 different bar graphics, so it can match the color scheme of a variety of websites. The bar graphics don’t have to be used because the progress bar can easily be styled by the developer.

YA List Columnizer

Yet Another method of turning an list (ordered or unordered) into multiple columns.

jjmenu – context menu jquery plugin

jjmenu is powerful context menu plugin with ajax support.

ThreeDots

ThreeDots is a customizable jQuery plugin for the smart truncation of text. It shortens identified text to fit specified dimensions and appends the desired ellipsis style if/when truncation occurs.

Notify Bar

Simple plugin (basically it?s not a plugin, but widget) to show notify bar (like on Twitter?s webpage).

AutoSuggest

AutoSuggest is a very lightweight jQuery plugin that makes auto-completing extremely easy. It uses ZERO images by default and is only 7kb minified.

TipTip

TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images by default and is only 3.5kb minified.

jQuery formatCurrency plugin

This is a jQuery plugin for formatting currency. This library is currently localized into 211 different cultures.

$.editableAreas

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.

JSC64

JSC64 is a 100% Javascript C64 emulator. It uses canvas to render the screen output.

Theme Selector

This plugin sets up a div to allow the user to select a CSS theme to apply to your site. It comes with the standard jQuery UI themes (ThemeRoller) preconfigured (available as an attached download).

jQuery Snowing plugin

You can show falling snowflakes on your page in a certain container element (body, div…)

BS Table Crosshair

Automatically for each table considers the focus

Chromatable

jQuery plugin that creates either a resizable table or a scrollable table with a fixed position header, (the header will stay put while you scroll down the table content). It allows the user to define the table dimensions as a fixed pixel amount, auto, or 100%. This is meant to be a relatively lightweight and unobtrusive plugin requiring very little setup and minimal css and HTML markup.

$.smoothAnchors() – Smooth Anchors

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.

<br /> $(document).ready(function(){<br /> $.smoothAnchors(“normal”);<br /> });<br />

Animate to Class

Animate to Class is a jQuery plugin that make the use of jQuery.Animate() easier, you can animate directly to a class, without pass all params directly via javaScript. This is an alternative way to do animations using jQuery, you just need to create a new class in your CSS, and pass it as param.

<br /> Using animate:<br /> $(“#foo”).animate({<br /> “margin-left” : “40px”,<br /> “width” : “300px”,<br /> “heigth” : “150px”<br /> }, 1000); </p> <p>//Using animateToClass:<br /> $(“#foo”).animateToClass(“bar”, 1000);<br />

jQuery Image Map Emulator

Need to make any HTML element act like an image map, with areas that can be mouse over’d to reveal the link “hand” pointer that can easily be defined to go to either static URLs or run javascript callbacks? Then this is the plugin for you!

<br /> function alertCallback(){ alert(‘Found one!’); }<br /> $(‘#example’).imagemap([<br /> {top_x: 0,top_y: 0,bottom_x: 75,bottom_y:65,callback: alertCallback},<br /> {top_x: 150,top_y: 105,bottom_x: 265,bottom_y:170,callback: alertCallback},<br /> {top_x: 315,top_y: 5,bottom_x: 395,bottom_y:60,callback: alertCallback}<br /> ]);<br /> <textarea></p> <h3><a href="http://plugins.jquery.com/project/apager" rel="nofollow external">jQuery AJAX Pager</a></h3> <p>This is a very simple pager which has been made to work with AJAX. </p> <p><textarea class="js" cols="60" rows="30" name="code"><br /> $(document).ready(function() {<br /> $(“some Selecotr”).ajaxPager({ startPage: 7, PagesCount: 15, ChangeSiteEvent: PageClick });<br /> }</p> <p>PageClick = function(pageindex) {<br /> //pageindex is the page which was clicked<br /> //Now you must load the page with ajax<br /> //Here I didn’t do it<br /> $(“#result”).html(“This is page ” + pageindex);<br /> }<br /> <textarea></p> <h3><a href="http://plugins.jquery.com/project/tempest" rel="nofollow external">Tempest</a></h3> <p>This plugin provide simple templating system for jQuery.</p> <p><textarea class="js" cols="60" rows="30" name="code"><br /> $(document).append(<br /> $.tempest(“ <p>Hello, {{ name }}!</p> <p>“, {<br /> name: “World”<br /> })<br /> );<br /> <textarea></p> <h3><a href="http://plugins.jquery.com/project/TopZIndex" rel="nofollow external">TopZIndex</a></h3> <p>This jQuery plugin calculates the highest CSS z-index value in the current document or specified set of elements, and also provides the ability to push one or more elements to the top of the z-index order. </p> <p><textarea class="js" cols="60" rows="30" name="code"><br /> //To get the highest z-index in the document:<br /> $.topZIndex();</p> <p>//To get the highest z-index for all div elements:<br /> $.topZIndex(“div”);</p> <p>//To move an element to the top-most z-index:<br /> $(“#myElement”).topZIndex();

Mouse Wheel Extension

Use your mouse wheel over the box below. It will report your direction and velocity.

<br /> $(‘div.mousewheel_example’).mousewheel(fn);<br /> $(‘div.mousewheel_example’).bind(‘mousewheel’, fn);<br />

mwheelIntent

mwheelIntent is an add-on for the famous mouse wheel extension and adds a more usable event for handling mousewheel in nested scrollable areas. mwheelIntend trys to determine the users intent, to make the mousewheel event more usable.

<br /> $(‘div.carousel’).bind(‘mwheelIntent’, function(e, d){}):<br /> //or<br /> $(‘div.carousel’).mwheelIntent(function(e, d){}):<br />

Loading

Provides trivially easy way to notify users that a request is being loaded and processed in the background, so that they know their action was received and the page has not frozen. Just toggle the message (or image or any element) on or off with $.loading() or $(‘#foo’).loading(). The plugin handles creation and positioning and “pulsing” of the message for you. It also provides a ‘mask’ option to block the UI (at the call level) while the loading message (or image or any element) is running. You can tell it to automatically toggle on ajaxStart/ajaxStop with the ‘onAjax’ option. You can tell it to automatically terminate after a specified time with the ‘max’ option. You can tell it to only show if the loading takes longer than a specified time with the ‘delay’ option.

<br /> $(‘#foo’).loading()<br /> $.loading(false); // will only ever toggle off<br /> $.loading(true, {align: ‘bottom-right’}); // will only ever toggle on<br />

Drive jQuery plugin

The Drive jQuery plugin allows you to construct the DOM using basic jQuery selectors, and the “parent > child” operator.
It searches for elements, and if none is found, it will attempt to create them. Otherwise, if some are found, they will be returned as usual.

<br /> $(‘#some_container div.class1′).drive(function(event) {<br /> /* the callback is actually a ‘drive:success’ custom event, so ‘this’ represents the new element */<br /> $(this).doSomething();<br /> /* ‘drive:success’ custom event is bound to every created element.<br /> If many levels of elements were created, this can be useful to stop event bubbling. */<br /> event.stopPropagation();<br /> });<br />

Audivid

Provides functions for HTML5′s audio and video tags.

<br /> $(‘audio’).audivid(“volume”); // Returns volume<br /> $(‘audio’).audivid(“volume”, .7); // Sets volume to 70%<br />

Most Related Posts

• Data Tables and DataTables Plugin in jQuery 1.3 with PHP
• 10+ Useful jQuery Plugins
• 20 Most interesting jQuery Plugins – February 2009