95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets

If you’re serious about creating state of the art dynamic web solutions using jQuery this is the right place for you! 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.

Relations

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

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

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

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.

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.

Animate your message boxes with jQuery
An article on creating message boxes. You should really take care about it.

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

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

-->