Best jQuery Ajax Plugins & Tutorials with Demo

Filter Slider : jQuery Image Manipulation

Filter Slider : jQuery Image Manipulation

The main goal of FilterSlider is to manipulate images and HTML content using canvas, jQuery library and Javascript.It uses advanced techniques to produce some of the popular effects like grayscale, sepia and saturation along with 13 other useful effects.These effects work on all major browsers that support the ‘canvas’ element.

features:

  • Responsive layout
  • 16 filter effects for images and html content
  • Full width support
  • Powerfull API : init, destroy, next item, previous item, jump to item, stop auto, resume auto, action on each slide
  • Adjustable speed, transition, easing and effects for each caption or slide
  • Multiple sliders on the same page
  • Support for inline content
  • Animated blocks
  • Easily customizable via CSS file
  • Loading screen
  • Set start slide index
  • Can be easily loaded using ajax
  • Smart scale mode for images
  • 7 transition effects
  • Autoplay and stop parameters
  • Show/hide arrows and navigation
  • Randomize slides
  • Constant support and upgrades
  • Mouse wheel support

Twitter like Real Time Wall Update Using Pusher API and jQuery

Twitter like Real Time Wall Update Using Pusher API and jQuery

If you have ever dreamt of showing real time data on your website then this tutorial is for you. In this tutorial I will show you how to show real time updates and data on you web pages. Here I will use Pusher API to create a two way communication between the client and server. The Pusher API uses websockets for the two way communication and its free for starting your development.
Here I have created a Twitter/Facebook style real time updating wall script that will display the status updates of the users in real time.

Responsive FlipBook v5 – jQuery

Responsive FlipBook v5 - jQuery

jQuery Responsive flipbook

  • responsive design
  • double pages
  • no Flash Player needed (works on the Ipad etc.)
  • show all pages
  • excellent tools to zoom
  • ajax form

optionTree : jQuery plugin to dynamically create Select Elements

optionTree : jQuery plugin to dynamically create Select Elements

jQuery plugin to dynamically create select elements with hierarchical options.This jquery plugin converts passed JSON option tree into dynamically created <select>elements allowing you to choose one nested option from the tree.It should be attached to a (most likely hidden) <input> element. It requires an option tree object. Object property names become labels of created select elements, each non-leaf node in the tree contains other nodes. Leaf nodes contain one value – it will be inserted into attached <input> element when chosen.

The plugin also supports loading additional levels via AJAX calls and preselecting given items at load.

Sticky : A super simple jQuery notification system

Sticky : A super simple jQuery notification system

Let’s face it, your users need sweet little notifications to keep them all warm and fuzzy inside. Sticky allows you to send such messages with ease, and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders.We can also use Sticky to display data we’ve grabbed via AJAX. This could make for a very powerful message queue system for your users.

GreyBox : Smart Window in JavaScript

GreyBox : Smart Window in JavaScript

GreyBox can be used to display websites, images and other content in a beautiful way.We can use it in Showing external pages,AJAX uploading of files,Showing internal pages (login, user preference, properties, contact formulas etc.),Showing a video or a flash animation,Showing images,Showing product information,Admin sections.

Why use GreyBox:

  • It does not conflict with pop-up blockers
  • It’s only 22 KB!
  • It’s super easy to setup
  • It’s super easy to use
  • You can easily alter the style as it is controlled through CSS

jQuery.validVal : A highly customizable and feature rich jQuery form validator

jQuery.validVal : A highly customizable and feature rich jQuery form validator

jQuery.validVal is a plugin designed to simplify form validation.It is highly customizable, very feature rich and can easily be dropped on any type of HTML-form (even AJAX- and HTML5-forms) with very little effort.

Features:

  • Can be used for validating any kind of HTML-form, with very little effort.
  • Supports five default value-validations: “required”, “number”, “email”, “url” and “pattern”.
  • Supplies a workaround for the lack of support for HTML5 attributes and type-values.
  • Great default “invalid-handler” that can be extended or customized.
  • Enables a group of checkboxes to have at least one checkbox to be “required”.
  • Built in support for clearing the placeholder-value “onFocus”.
  • Automatically select the next input-field when the “maxlength” nth-character is entered.

Fine Uploader : jQuery Multiple File Uploader

Fine Uploader : jQuery Multiple File Uploader

Multiple file upload plugin with progress-bar, drag-and-drop.This project attempts to achieve a user-friendly file-uploading experience over the web. It’s built as a Javascript plugin for developers looking to incorporate file-uploading into their website.

This plugin uses an XMLHttpRequest (AJAX) for uploading multiple files with a progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden-iframe-based upload in other browsers (namely IE), providing good user experience everywhere.

Features:

  • Multiple file select, progress-bar in FF, Chrome, Safari
  • Drag-and-drop file select in FF, Chrome
  • Uploads are cancelable
  • No external dependencies
  • Doesn’t use Flash
  • Fully working with HTTPS
  • Automatic uploads (as files are selected) or queue files to me manually triggered when ready

Grabbing Popular Dribbble Shots Dynamically with jQuery

Grabbing Popular Dribbble Shots Dynamically with jQuery

In this tutorial I want to demonstrate how we can build a small webapp which dynamically pulls all the most recent popular shots from Dribbble. The interface is very simple to work with and we want to create all these effects without refreshing the page. For organizing the backend data I’ll be using a custom jQuery plugin named jribbble. It suits our needs perfectly and it’s so easy to get started – even a newbie JavaScript developer could pick this up in a couple hours.