Best jQuery Ajax Plugins & Tutorials with Demo

jQuery Toggle Panel

jQuery Toggle Panel

Toggle Panel is a lightweight jQuery plugin that helps you create toggleable content.

Features :

  • Toggle Panel fits right into a responsive or fluid design. Fixed width is possible too.
  • With HTML5 Local Storage the state (expanded or collapsed) is saved and restored upon reentering the page.
  • HTML5 audio and video elements inside a toggle panel are automatically paused when it is collapsed.
  • Smooth and beautiful CSS3 transitions bring Toggle Panel to life.
  • Load content via AJAX

SIMPLEMODAL : Small plugin to create Modal Windows

SIMPLEMODAL : Small plugin to create Modal Windows

SIMPLEMODAL is a small plugin to create modal windows. It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content.SIMPLEMODAL is not a lightbox although the possibility to hide parts of its layout may partially make it similar.

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.