95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets

June 18, 2013 · 70 comments

by Lars

jquery-update

If you’re serious about creating state of the art dynamic web solutions using jQuery this is the right place for you! Fortunately for all of us highly skilled developers have dedicated their precious time and passion to create open source frameworks that encapsulate most of the browser related difficulties and in many ways these make difficult parts of client side scripting fun and it is not a nightmare any more. This article will briefly introduce you to the Javascript framework jQuery and then provide excellent examples of the low hanging fruits waiting for you if you’re starting to use jQuery. jQuery is just one of several frameworks that all have powerful features. Why focus on Javascript frameworks anyway? Because they provide NEED TO HAVE functionality out of the box that can be accessed so easily you wont believe it. Trust me the effects you’re going to roll out soon will impress your co-workers, friends and most important your customers! I’m not going to make any judgement regarding what framework is best as it would be wrong. We should just be grateful that they exist and that skilled developers keep maintaining them and because good alternatives means competition and in the end better solutions. Please comment if some great resources is missing and I’ll add them at once.


ElegantThemes
ThemeForest

Advertisement

This is an update of 60+ Must Have jQuery Toolbox adding many new jQuery plugins and a few awesome articles and tutorials. You may also be interested in Dojo Javascript Framework, Take your Web Apps to the Next Level and 16 Stunning Mootools scripts for enhancing your html forms.

A Javascript framework, jQuery

Common to most of the Javascript frameworks available is that they dramatically reduce the amount of code that needs to be written compared to pure Javascript. This leads to less development time, more readable code and code that is generally easier to maintain and extend. Generally one of the main purposes of using a Javascript framework is to avoid dealing with browser differences yourself and that part should not be underestimated.

This article will focus on jQuery only as it is too hard to cover more than one Javascript Framework in a single article. The other major frameworks are (may cover these in future articles): prototype (and script.aculo.us), Dojo and mootools. These are all great and worth considering but currently jQuery seams to lead on terms popularity. jquery.com have an alexa rank close to 2000 indicating massive traffic. Further some of the largest software vendors use it in their development platforms.

Lets take a look at JQuery

javascript-frameworksWith their own words:

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.jQuery is designed to change the way that you write JavaScript.”

Main features of jQuery

The jQuery Library provides a general-purpose abstraction layer for common web oriented scripting.

  • DOM element selections using the cross-browser open source selector engine Sizzle
    Without encapsulating DOM access many lines of traditional javascript code must usually be written for even simple tasks. jQuery chages this completely with a robust and efficient selector mechanism.
  • DOM traversal and modification (including support for CSS 1-3 and basic XPath)
    jQuery is using CSS selectors to for locating page elements, this is good news for web designers as knowing CSS makes a good starting point for using jQuery.
  • Events, responding to user actions
    The jQuery Library provides an elegant approach to catch and interpret user events like clicking, mouse movement etc. and at the same time it removed complexity of browser differences.
  • CSS manipulation
    CSS is powerful but as most browsers still interpret it differently it is hard to implement. jQuery offers a standard approach to shield developers from browser differences.
  • Effects and animations
    jQuery offers fascinating features for animating changes made to the web page and it is done with only a few lines of code
  • Retrieving information from the server without refreshing the page, also known as Ajax.
    jQuery removes the browser specific complexity from implementing ajax into your web pages making it possible to focus on the actual functional task at hand.
  • Extensibility
  • Utilities – such as browser version and the each function.
  • JavaScript Plugins

Getting started resources

If you’re new to jQuery this is where you get started. Download the Library and load one of the getting started guides. It’s not hard just try it. In the bottom of the article I have linked to a few books that you may consider reading to get more solid learning.

General Utilities

Load the framework from Google Code

Google have been hosting several JavaScript libraries for a while now on Google Code and there are several advantages to loading it from them instead of from your server. It saves on bandwidth, it’ll load very quickly from Google’s CDN and most importantly it’ll already be cached if the user has visited a site which delivers it from Google Code.

javascript-frameworks

Animation

Marquee

Funnily enough, the marquee tag is pretty well supported amongst the browser, but the actual effect is poorly executed natively (which is kind of odd if it’s built directly in to the browser). So let’s solve this with JavaScript.

javascript-frameworks

Demo

API: queue & dequeue

Video tutorial showing how to create animations using jQuery queue/dequeue. queue & dequeue are a pair of core data utilities that help you to add your own bespoke to animations.

javascript-frameworks

QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler

QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back.

javascript-frameworks

SlideDown Animation Jump Revisited

When using slideDown depending on the layout of your page, you could still see the jumping effect, regardless of whether you fix the padding around the element.This tutorial will create sliding effect when link is pressed.

javascript-frameworks

Animate your message boxes with jQuery

A few months ago I posted an article on creating message boxes. No question, you should really take care about it. But this time I want to make fun with it and add some animations using (you guess) jQuery.

The idea is more than simple. Let’s animate message box that is being shown, and blow it away after we read it.

javascript-frameworks

Animation Jump – quick tip

The way the slide animation works is it animates the height CSS property of the element. The problem occurs if the element being animated has a margin or padding.

This is because when the element shifts from display: none to a tiny height (or width) and visa versa, the padding (or margin) jumps in to view, causing the real height to be height + padding + margin.

As of jQuery 1.3 this fix is no longer required as jQuery height animation also animates the padding and margin

javascript-frameworks

Creating LightBox / Model Windows

I have noted that many lightbox solutions use prototype or mootools framework. If you’re looking for more modal window scripts try looking for some based on these (150 Worth Knowing Web Developer Tools and Techniques)

prettyPhoto a jQuery lightbox clone

jQuery lightbox style script that support images, galleries, flash, qtime, iframe etc.

best-jquery

Load Data while Scrolling Page Down with jQuery and PHP

This tutorial about my favorite place Dzone like data loading while page scrolling down with jQuery and PHP. We have lots of data but can not display all. This script helps you to display little data and make faster your website. Take a look at live demo and scroll down.

javascript-frameworks

Building a Lightbox with jQuery

Rather than assume that you know what I mean by a lightbox, I’ll briefly explain it. The first experience I had with this UI pattern, and I believe the first real example of it, was by Lokesh Dhakar in 2005. Since then, this pattern of simple, unobtrusive script used to overlay images on the current page huddletogether.com is everywhere. It’s hard to find a modern site without some variant of the in-page popup element over a semi-transparent background. In fact, if you click any external link on my site, you will get that site loaded for you in an lightboxed iframe.

lightwindow

Coda Popup Bubbles

Demonstration of the ‘puff’ popup bubble effect as seen over the download link on the Coda web site. To create the puff popup bubble effect, we need the following:

  1. Markup that assumes that JavaScript is disabled. It would be fair to say that the popup would be hidden from the CSS.
  2. The hidden popup, correctly styled for when we make it appear.
  3. jQuery to animate the puff effect on mouseover and mouseout.

coda

ThickBox 3.1

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Good examples and descriptions. All code can be downloaded. Demo

javascript-frameworks

SimpleModal Demos

Purpose is to provide developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.

javascript-frameworks

Lightbox Plus

WordPress is so popular and its huge free community have put forward several plugins that provide Lightbox style functionality. Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar (see above). Lightbox Plus is used to create overlay display images on the web-page and to automatically add the correct overlay links to images.

lightwindow

Shadowbox

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page. Can run alone but also has an adapter for jQuery and other frameworks.

shadowbox

Hover Sub Tags

Using jQuery to reduce the size of the tag cloud that you have on your sites, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.

tagcloud

Rollovers and tooltips with jQuery

Simple tutorial on how to create jQuery tooltip

javascript-frameworks

jQuery books widget

With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.

javascript-frameworks

FancyBox

FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. It was built using the jQuery library. Licensed under the MIT License

javascript-frameworks

Sliding Login Panel built with jQuery

In this tutorial, we will see how to create a show/hide login/signup panel for your website using jQuery. A mootools version van be found here. Panel overlaps content instead of “pushing” it in a slicker way.

slider-scripts

Sliding Boxes and Captions with jQuery

Great tutorial explaining the fundamental technique of content sliders and how to create port folio style boxes with slider animations.

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

slider-scripts

Easy Slider 1.7 – Numeric Navigation jQuery Slider

Really nice content slider with at least 3 modes.

slider-scripts

jQuery.ScrollTo

Excellent ScrollTo plugin that lets you scroll with many configuration options to customize the animation and the position specified. Try it out to see how serious this is!

slider-scripts

How easy to create a slide tabbed box using jQuery

Simple and easy to so animated top navigated tab-based Content slider

slider-scripts

Advanced docking using jQuery

Some time ago I was doing some proof of concept: how Visual Studio docking functionality can be done with jQuery and unordered lists. Basically, the main goal was to implement multiple docking and undocking functionality. This tutorial will show you the results of PoC.

javascript-frameworks

Image Handling

BeZoom Lighweight JQuery Zoom Plugin

BeZoom is a simple and lightweight zoom plugin for the wonderful JQuery framework.

javascript-frameworks

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.). This is a great solution for creating dynamic effects fx. in a header.You simply have to see the effect for yourself demo here.

best-jquery

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

best-jquery

Easiest Tooltip and Image Preview Using jQuery

An incredibly easy way of achieving tooltip like bubble popups that appears when you roll over link or a thumbnail.

best-jquery

jQuery spherical panorama viewer

A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology. To use this plugin you need to generate views from your spherical panoramic image. You can download and install MPRemap from Helmut Dersch website for this purpose.

best-jquery

jQuery virtual tour

This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated.

best-jquery

jQuery Cycle plugin

This is a lightweight slideshow plugin that supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. The effects look very good!

best-jquery

jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

best-jquery

ImgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.

best-jquery

jQuery Infinite Carousel

This tutorial will walk through the fundamentals of recreating the effect carousel used on the Apple Mac ads page

javascript-frameworks

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

slider-scripts

Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well… all around easy. Creating an image gallery shouldn’t be a complex thing. I’ve created a new plugin that I’m packaging with PikaChoose called SliderJS.

slider-scripts

Jcrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

javascript-frameworks

AnythingZoomer jQuery Plugin

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there. Demo & Download

javascript-frameworks

Add zoom icon to images using CSS (and jQuery, of course)

How to create a zoom icon in two ways: CSS way and jQuery way.

javascript-frameworks

Easy way to improve your image gallery using jQuery

How do you decide which image to click while browsing some gallery? Most probably, you’ll click on image that you find interesting. And you make that decision in a matter of seconds. If, however, images have some description attached, it could make your choice easier.

Let’s say you are browsing a CSS gallery and you want to check out some new and beautiful website designs. And you are of course interested in some details – for example, which category design belongs to, what’s the rating or whatsoever. This information could be rendered below thumbnail, but there are other, more attractive ways of displaying additional data.

javascript-frameworks

Image Fade – Revisited

See how to create a really cool image transition effect for buttons

javascript-frameworks

Creating a polaroid photo viewer with CSS3 and jQuery

This example is making use of CSS3 and jQuery. It really shows the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean. The result is nice looking polaroidsthat you can drag around on the page…cool!

polaroid_photo_viewer

Image Cross Fade Transition

Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer – either in CSS or with the simplest of JavaScript:

$(function () {
  $('img.swap').hover(function () {
    this.src = 'images/sad.jpg';
  }, function () {
    this.src = 'images/happy.jpg';
  });
});

View the working example and the source

image-cross-fade-transition

Image Loading

This tutorial will show how to load images in the background, and once loaded handle the event and create your own response. Try Demo | View Code

javascript-frameworks

Creating A Fading Header

A simple example using jQuery and CSS that shows you how to create the fading header technique seen on Bits and Pixels.

javascript-frameworks

jQuery Demo: Creating A Sliding Image Puzzle Plug-In

This tutorial show us how to create a sliding image puzzle.

javascript-frameworks

Sliders and Transitions

Slider Gallery

This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch. Try Demo | View Code

slider-gallery

jQuery Multimedia Portfolio

Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3), will automatically detect the extension of each media and apply the adapted player. Demonstration

jQuery-Multimedia

jQuery Infinite Carousel

This tutorial will walk through the fundamentals of recreating the effect carousel used on the Apple Mac ads page

javascript-frameworks

Scrollable timeline

javascript-frameworks

Scrollable

Scrollable is useful jQuery plug-in for creating scrollable content. Scrollable items can contain any HTML. You can make items scroll horizontally or vertically and choose how many items are visible at once.

javascript-frameworks

Build A Login Form With jQuery

In this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

javascript-frameworks

Spoiler Revealer with jQuery

A simple technique that hides some content first and fades it in once a link is clicked.

javascript-frameworks

Form Enhancements

jQuery magicpreview plug-in

magicpreview automatically updates selected elements on a page based on form fields. Perfect for previewing forms.

javascript-frameworks

jQuery autosave plug-in

Autosave is designed to save the progress of forms by saving the fields to cookies so you won’t lose anything should anything go wrong

The plug-in saves the form fields at certain intervals (the default is every 10 seconds) and whenever you leave the page.

javascript-frameworks

Date Picker

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.

javascript-frameworks

Demo

jQuery pager plug-in

javascript-frameworks

jQuery shortKeys plug-in

javascript-frameworks

Hot Keys

jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination.

javascript-frameworks

Demo

Creating a Nice Slider With jQuery UI

Sliders have many things going for them as a UI element; they offer the benefit restricting the choice a user has, without taking up the space of a drop down. If you need to ask the user to select a number between a range, you can either do an input box with validation, a drop down select element listing each possibility, or you can do a slider.

slider-scripts

Pagination

jQuery paginator is based on the jQuery Pagination plugin originally written by Gabriel Birke. For information, documentation and license please visit http://plugins.jquery.com/project/pagination

jQuery paginator plugin file already includes the required jQuery pagination plugin.

javascript-frameworks

Demo

Password Indicator

This is example is a merging of Benjamin Sterling’s Password Strength Indicator and Microsoft Passport’s Password Strength CSS.

javascript-frameworks

Demo

AJAX Upload

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and starting from version 2.0 doesn’t require any library to run (although it will use some jQuery functions if it’s already loaded on the page). AJAX Upload doesn’t pollute the global namespace, so it’s compatible with jQuery, Prototypejs, Mootools, and other JavaScript libraries. Demo

javascript-frameworks

File Style Plugin for jQuery

File Style plugin enables you to use image as browse button. You can also style filename field as normal textfield using css.

javascript-frameworks

How to create Skype-like buttons using jQuery

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.

javascript-frameworks

jquery.Combobox

An unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s), a Demo is here.

javascript-frameworks

Masked Input Plugin for jQuery

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user. The following mask definitions are predefined:

  • a – Represents an alpha character (A-Z,a-z)
  • 9 – Represents a numeric character (0-9)
  • * – Represents an alphanumeric character (A-Z,a-z,0-9)

masked-input-plugin

The jQuery Tooltip

jTip, not unlike Thickbox, pulls data from the server using a hidden http request. It’s nothing that fancy, really, just your normal everyday over hyped AJAX/AXAH type stuff. In keeping with all of this web 2.0 silliness, this means all of the tips are external. This is a handy feature depending upon the type of usage a person might intend for jTip.

javascript-frameworks

Table Row Checkbox Toggle

It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row. However, you can manually exclude checkboxes based on name, id or css classes in the script. In addition to the phpMyAdmin function, there is an initialization step in the script that correctly marks a row when it’s considered checked on page load.

javascript-frameworks

jQuery.timepickr.js

jQuery plugin that makes filling time inputs very easy. With a maximum of 2 clicks, a user can fill the form and there is also a keyboard navigation support too.

ui-timepickr

Make image buttons a part of input fields

If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have “embedded” image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.

Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.

javascript-frameworks

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

jQuery-checkbox

jQuery Checkbox

Provides for the styling of checkboxes that degrades nicely when javascript is dsiabled.

jQuery-checkbox

Radio Button and Check Box Replacement

How to replace radio buttons and check boxes with jQuery.

javascript-frameworks

jQuery Sliding Contact Form

A sliding contact form built with jQuery. Form is normally hidden at the top & slides down with the first click & up at the 2nd click.There is no form validation & mail sending code included. Demo

jquerycontactform

jQuery – Ajax Contact Form

A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP. The form has an input validation. After the message is sent in th ebackgroung a “success” message is displayed to the user. Demo

contactform

jQuery – Ajax Contact Form

This Ajaxed contact form uses jQuery & the jQuery Form plugin for input validation. Inputs are sanitized for the form being safe. A success or an error message is displayed after the form is submitted without leaving the page. Demo

ajaxcontactformv1

jQuery Contact Form

This form checks the fields to see if they are valid, displays an error if there is a problem & sends the message as an e-mail when everything is ok. E-mail is sent via a PHP file with no refresh. The script is normally an e-mail sending form which can easily be modified to turn it into a contact form.

jqueryajaxform

Submit A Form Without Page Refresh using jQuery

“Previously on NETTUTS, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial I’ll show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). “

slideshow

Simple Image Submit Button Rollovers with jQuery

Have you ever wanted a simple rollover technique with a form submission button? Something like this:

slideshow

… without having to resort to a complicated mess of javascript form submission and cross browser compatibility issues? With jQuery it’s really easy

jQuery Tabs and Menus

Sexy Drop Down Menu w/ jQuery & CSS

Drop-down menus are not new and a lot of sites use them but this tutorial rocks! Soh teaches us how to create a ’sexy’ menu using jQuery and CSS that degrades gracefully.

javascript-frameworks

How to Create a MooTools Home Page-Inspired Navigation Effect

A simple side menu realized in jQuery.

javascript-frameworks

BBC Radio 1 Zoom Tabs

How to recreate the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

javascript-frameworks

Learning jQuery: Fading Menu – Replacing Content

In this tutorial Chris teaches us how to create a good looking fading menu!

javascript-frameworks

jQuery look

Two effects are inspected. Simplified accordion and a hover effect.

javascript-frameworks

jQuery sliding menu revisited

Tutorial showing how to create a nice sliding menu. Images are preloaded and the entire block is click-able.

javascript-frameworks

Create fancy share box with CSS and jQuery

This tutorial will show you how to turn unordered list (UL) into an fancy social bookmarking sharing box. You will see how to style such box, how to add interactivity, and how to create jQuery plugin that will turn any UL into sharing box.

javascript-frameworks

Collapsible Panel

In this tutorial we will be learning how to create a collapsible panel or sidebar and an expandable content area. jQuery will be assisting us to create this smooth and sleek behaviour. Once our panel is hidden, we will display a small button to reveal it again. Collapsible Panel demo

javascript-frameworks

Expand table rows with jQuery – jExpand plugin

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

javascript-frameworks

jQuery Tabs made easy

small jQuery dependant code to create my own tabs widget and thought you could find it useful.

javascript-frameworks

Tables and Data Handling

Simple tableSorter

Addes a simpel tableSorter with the default properties. Click on the header to start sorting.

javascript-frameworks

Demo

Quick Search

jQuery quickSearch plug-in.

javascript-frameworks

Demo

DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML tables. Key features:

  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Fully internationalisable: UK, French, German, Spanish, Russian, Norwegian, Portuguese Brazilian (and more) translations provided
  • It’s free!

datatables

Zebra Tables Demo

Using jQuery to do zebra striping and row hovering

javascript-frameworks

Utilities

jQuery.fn.map enhancement

It allows you to pass a string to $(collection).map(...) instead of a function; it’s useful for returning attributes, DOM properties, CSS styles or data tied to each element without having to spend time/space writing a function, e.g.

javascript-frameworks

Satisfy that selector!

Satisfy is a development-only script that you can use to quickly generate HTML for testing/debugging. The idea is that you provide a CSS selector and then the plugin will “satisfy” it by generating an HTML structure in accordance with that selector.

javascript-frameworks

Beginners Guide to jQuery Mouse Events

If you’re just starting out in jQuery, one of the most important things is to learn to make things interactive. This tutorial will show the basics of working with the mouse in jQuery.

javascript-frameworks

Books on jQuery

A good way to learn new stuff or get into more details of a already well known area is to get yourself a good book. To make this article a one stop resource I have added some good

{ 36 comments… read them below or add one }

Christian Esperar February 24, 2012 at 11:22 am

Awesome collection! Almost all of these plugins are new to me. Way to go! Thanks!

Reply

Wedding photographer August 5, 2011 at 12:16 am

All plugins are excellent. and adorable.

Reply

Troy the WebSite Designer June 27, 2011 at 2:26 am

Awesome collection – Thanks for the great post!

I’ll be back.

Reply

cheap custom jerseys May 19, 2011 at 9:02 am

Word Press being the biggest advantage for building quick and customizable sites. I’m sorry I spent so much money on that site.

Reply

naughtyric February 3, 2011 at 8:28 pm

greats, thanks for share :)

Reply

Joseph McCullough January 18, 2011 at 3:45 am

Here’s a pretty neat jQuery Sticky Scroller: Allows for callbacks at specified intervals. http://www.vertstudios.com/blog/jquery-sticky-scroller-position-fixed-plugin/

Reply

Lars January 18, 2011 at 7:20 am

Thanks for the tip Joseph

Reply

João December 23, 2010 at 8:28 pm

ok please ignore my last comment, I didn’t realize the date this was posted… For the time it was maybe it was a great list ;)

Reply

Lars December 23, 2010 at 11:56 pm

Its OK João. Your feedback is valuable anyway…maybe it is time for a follow-up post… let me know if you would be interested in contributing

Reply

João December 23, 2010 at 8:25 pm

Sorry but I have to disagree with some comments. This is definitely not a list of the best resources. It’s out dated and I have seen some of these in so many other list posts. And I am sad not to see others here. No mentions to Tutorialzine, Codrops and also Marcofolio?? Then you have missed a lot of great resources… Anyway thanks for this!
Merry Christmas

Reply

Ashwin December 17, 2010 at 4:24 pm

Great collection. Keep it up!!

Reply

Ruchi December 11, 2010 at 9:47 am

Gr8 work.. but i must say that i saw more than 1000 jquery tutorials, but u r totally amazing..too gud..keep it up buddy..

Reply

Brett Widmann November 2, 2010 at 3:14 am

Great set of resources! Thanks for sharing.

Reply

Aman August 16, 2010 at 10:34 am

hi
cool list.I have also some jquery plugins please see:-

http://jquery13.blogspot.com/

Thanks
Aman

Reply

Kondalarao August 12, 2010 at 2:35 pm

This is the Wonderful Collection of JQuery Examples which will be Useful.
Thanks for Posting an Excellent article

Reply

Roedix June 24, 2010 at 11:20 pm

I Like fancybox, great look and feel! thank you for posting this list

Reply

Hafeez Hameed June 7, 2010 at 12:28 pm

Excellent Post. I love it…

Reply

Hafeez Hameed June 1, 2010 at 11:31 am

Amazing…. Thanks for sharing

Reply

Trent May 20, 2010 at 1:32 pm

nice list people! one tool missing is Likno Web Modal Windows Builder which is a great tool for creating jquery modal windows (popup windows) that saves time.

http://www.likno.com/jquery-modal-windows/index.php

just my 2 cents…

Reply

builder April 22, 2010 at 10:07 pm

Great collection.
Thanks!

Reply

jesse April 5, 2010 at 7:49 pm

how did you get the images to fade in when scrolling down on this website?

Reply

tripwire team April 5, 2010 at 11:47 pm

@jesse, I have used lazy image loading plugin for WP. Basically it is a jQuery script that makes the page load faster initially. You can find it here. http://wordpress.org/extend/plugins/jquery-image-lazy-loading/
This is the script that makes it all happen. I have changed it to only affect the content area by adding “#centercol”:

jQuery(document).ready(function($){
jQuery(“#centercol img”).lazyload({
effect:”fadeIn”,
placeholder: “http://www.tripwiremagazine.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif”
});
});

Reply

Blogger Template March 22, 2010 at 6:49 am

wow…. it is really nice sir. thanks for share.

Reply

Ken Phan January 9, 2010 at 11:46 am

Hello !
If you want using pagination plugin, pls try it here: http://kenphan.info/view/2010/01/Cach-su-dung-jQuery-jPager-plugin.html
That is a simple page used AJAX and JSON. The name is jPager. That jPager is easy install & simply.
Download it here: kenphan.info/download.jpager.rar

Reply

abdullah December 7, 2009 at 7:56 am

Very nice Jquery plugin i ever seen before..keep it up.
Thanks

Reply

tripwiremag December 7, 2009 at 5:04 pm

@abdullah; Thanks your feedback if really appreciated!

Reply

Glenn September 28, 2009 at 6:25 pm

Great article. Just beginning JQuery, so some good places to start.

Reply

Shahriar Hyder September 24, 2009 at 11:49 am

Truly exceptional collection of useful jQuery plugins, tutorials and cheat sheets mate. I have also linked to yours from my blog post below where I am trying to collect the most useful and common jQuery code snippets for JavaScript over the web. Here is the title and the link to the jQuery link compilation endeavor:

Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance

http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

Reply

Vipul Limbachiya September 3, 2009 at 12:38 pm

This is a really great list!! thanks for sharing!

Reply

Module23 Werbeagentur Koblenz Webdesign September 3, 2009 at 9:13 am

Thanks for sharing this excellent jQuery collection.

Reply

Bob Walsh September 2, 2009 at 4:29 pm

Outstanding post – only thing missing is giving the author a byline – they earned it!

Reply

tripwiremag September 2, 2009 at 7:50 pm

@Bob Walsh, Thanks for this feedback! I will seriously consider your suggestion regarding author byline…on the other hand I’m the only one currently writing on tripwire.

Reply

Kaan September 2, 2009 at 3:23 pm

Absolutely great!

Reply

Benjamin September 2, 2009 at 1:43 am

Awesome! Thank you for listing my small plugin with this great list. This is definitely THE resourse for every JQuery-Developer.

Reply

Pedro Magalhães September 1, 2009 at 10:55 pm

Excellent compilation! Thanks for all the sources ;)

Reply

andrew September 1, 2009 at 10:25 pm

Nice list. There are even more great tutorials found at queness.com, jqueryglobe.com and so on

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 34 trackbacks }

Previous post:

Next post:


Web Analytics