AJAX (shorthand for asynchronous JavaScript and XML), is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax has led to an increase in interactive animation on web pages and better quality of Web services thanks to the asynchronous mode!

.

Here we have rounded up excellent Ajax effects scripts and tutoirals

Ajax Form Scripts

1. Prototype window login form

Here is a simple tutorial to demonstrate the use of prototype Window login form with RubyOnRails and Ajax. The idea behind this is to override Ok event of Dialog.confirm() form and send Ajax request to controller. The demo application makes use of RJS for Ajax callbacks. See Live Demo

.

2. Masked Input Plugin

This is useful for fixed width input where the data follows a certain format.

.

3. Form Validation Script

Shows some form input validators both serverside and browserside.

.

4. Live Validation

Ajax form validation super easy for the developer. A must-have for any project that uses forms.

.

5. Spry Auto Suggest

This page will highlights the capabilities of the Spry Auto Suggest Widget.

.

6. AJAX login form example using php, javascript and css.

Here?s another AJAX login form example using php, javascript and css.

.

7. inline editor

Manoloweb has a great little Ajax implementation of an inline editor. It’s a tiny script, but it can be modified to be as simple or complex as you wish.

.

8. Whizzwig editor

It lets people create rich, formatted text through a web form. It creates html or xhtml.

.

9. Anchor layout in forms to ensure a consistent size and position for form fields.

.

10. Server side Jquery With Jaxer

Demo can be found here. Download Jaxer here

.

11. Form Plugin

.

12. Uni Form

an attempt to standardize form markup (xhtml) and css, “modularize” it, to get nice looking, well structured, highly customizable, semantic, accessible and usable forms.

.

13. CSS-Only, Table-less Forms

A great example of a well designed form using modern css techniques. It works in Win/IE6, Firefox v1.0+, Win/Opera v8.0, has minor layout differences in Mac/Safari v1.0.3 and Mac/Safari v1.2, and is usable but fairly buggered in Mac/IE5.2.

.

14. Tableless Forms

has a great login form example, with a graphic in the input field.

.

15. A form with style

How to style and stop web forms from looking ugly.

.

AJAX SLIDERS

Fireworks.js

Fireworks.js is a bit of Javascript that creates starburst-type explosions in a web document; in short, it’s a fireworks effect someone could theoretically use on their site. Live DemoDownload from here

..

Slider Gallery. Live Demo

.

18. 2J News Slider – Joomla Ajax Slider

This is an eye-catching news slider that bring in evidence your content. Live Demo

.

Inline Range Slider Live Demo

.

Ajax Image Sliders Part 2: Intervals with On Demand Live Demo

.

21. Multiple Sliders in one page

.

22. Coda-Slider. Live DemoDownload from Here

…

jQuery Multimedia Portfolio. Live Demo Download from Here

.

24. Accessible slider

Illustrations and code samples showing how to make a slider UI control accessible to those who aren’t running JavaScript or CSS. Live Demo

.

25. Accessible Unobtrusive Slider Demo

This method offer full keyboard capabilities as using unobtrusive JavaScript which is a method that separates the JavaScript behavior from the page markup. Live Demo Download fromHere

.

26. Slider

Degrade gracefully for browser without the needed DOM support with full mouse and keyboard support. Skinable using different CSS files. Live Demo Download from Here

.

27 Photo Slider Tutorial

Simple to use JavaScript slide show that scrolls thumbnails as smooth as Flash. Tutorial shows how to install and configure the code. The included example uses less than 10 lines of code. Live Demo Download from Here

..

28. Yahoo! UI Library: Slider

The Slider component is a UI control that enables the user to adjust values in a finite range along one or two axes. Live Demo

.

29. Slider

Horizontal or Vertical bar and slider. Live Demo Download from Here

.

30. Simple images slider to create Flickr-like slideshows

This step-by-step tutorial explains how to customize slideshow and use it in your web projects. Download Tutorialfrom Here

.

Ajax Progress Bar

31 jsProgressBarHandler Demo can be found here. Download Code here

.

32. A YUI Loading Panel Widget Download Code here

.

Ajax Pagination

33. Ajax Pagination Script Demo can be found here download Code here

.

34. Preloading Data with Ajax and JSON Demo here Download Code here

.

Ajax Calendar

Vista-like Ajax Calendar version 2 Demo can be found here. Download Code here

.

Super Ajax calendar

.

Simple Ajax calendar : Get it here

Ajax Dynamic Image Gallery and Slideshows

Dynamic Image Gallery and Slideshow Demo here Download Code here

.

Image Menu

Code Demo

The Image Menu is a simple piece of JavaScript that uses images to make a horizontal image menu. When you hover over the links, the image expands and shows the rest of the image. It’s compatible with nearly all modern browsers (no word on IE 8).

.

ImageFlow is an unobtrusive and “user friendly” JavaScript image gallery script. It features an elegant scroll-bar to browse through the images, and all of the images sit on top of a reflection, creating a Mac-like coverflow effect. Code Demo

.

GlassBox is an interface library that relies Scriptaculous and Prototype. The nifty library will add lucent borders and other flash-like effects. It’s easy to use, skinnable and even has dynamic content loading.

.

MISC

CSSGlobe has a very nice tutorial on how to enhance your site’s searchfield (unobtrusively, no less) with a bit of CSS and Ajax. Code Demo

.

Facebox

Facebox is a unique lightbox script that mimics the lightbox style of Facebook’s modal windows. Built on jQuery, Facebox looks and feels almost exactly like Facebook’s interface, and it’s simple to install as well. Code Demo

.

Unobtrusive Table Actions

Unobtrusive Table Actions

Code Demo

.

jQuery checkbox

jQuery checkbox adds a little flair to checkbox fields in forms. It adds a toggle button very similar to that of the iPhone interface, giving a very distinctive on or off. It’s great for usability, and the dynamic skin can be turned on or off, on the fly. Code Demo

.

Carousels

Carousels are a great way to rotate content such as images or news stories. The iCarousel plugin fits the bill as a simple, tiny script that gives all sorts of configuration options and usages. News tickers, photo carousels or even an ad carousel. Code Demo

.

Validation Hint

Validation Hints is a simple script that aides in form validation. It makes sure that password and username fields are the specified length, and can even validate against regular expressions. Small and handy. Code Demo

.

Control Tabs

Control Tabs, (part of the robust LivePipe UI), is a sweet script that gives many different ways to configure tabs on a page. You can use the standard tabbed interface, or even use something like images to show tabs as well. Control Tabs is a robust script, and even has an API that you can use to fine-tune your tabbed interfaces. Code Demo

.

Other Tutorials

Ajax Tutorials

Expression Engine and Ajax
Ajax Instant Tutorial loading – content without page refresh
Drag and Drop with Rico
Drag and Drop Sortable Lists
Ajax Shopping Cart
Accessible forms and unobtrusive javascript
Form Submit With Ajax
Ajax File Uploading
Ajax Basics
Ajax Image Gallery
Tabbed Content
Amazon Web Services with Ajax
Learn Ajax in 20 Minutes
Shopping cart with script.aculo.us
Ajax Design Patterns
Ajax for Designers
Ajax Progress Bar
Handling Bookmarks and the Back Button
Build a photo tagging site
Introduction to Ajax
Ajax : What is it good for ?
Newsletter sign up Tutorial
Develop a web-based pop3 client
AJAX Tutorial with Prototype
How to Auto Include a Javascript File
Username availability checking
RSS Reader Step by Step Tutorial
Ajax website in less than 10 minutes
Degradable form validation
Nice Forms
Animated Live Search
Make Tables Sortable
Bookmarklets
Ajax Chat Sources
Dynamically Loaded Articles
Dynamically Loaded Content
Chained Select Boxes
Dynamic List
Slide Out panel
Speed up Ajax apps
Integrate Google Calendar in your website
Create your own Ajax effects
Ajax Toy Box
Alistapart – Get started with Ajax
Image Cropping
RSS Ticker
Ajax Tutorial
Slide in RSS Items
Mastering Ajax
Digg Voting
Ajax Poll
Ajax-S – Ajax Slideshow
Ajax and Flash – Aflax
Ajax Mistakes
Ajax Enhancement for Wordpress Blogs
Develop Web Applications with Ajax
How do you code an Ajax Page ?
Step by step Ajax
Take command with Ajax
Ajax Style Switcher
What is Ajax ?

.

Javascript Libraries

Prototype
Bajax
Behaviour
Rico
Solvent
Script.aculo.us
Mochikit
Moo.fx
Toxic
Plex Toolkit
Engine
Ajax Toolkit
Interactive Website Framework
RSLite
XHConn
Taconite
Qforms
Jspkg
Ajax Caller
Sajax
Sardalya
X
Ajax Requests
Moo.Ajax
Spry

.

Other Tutorial Roundups

30 Ajax Tutorials
Ajax Matters Blog – 130 Tutorials
50 Ajax Reference Websites
60 More Ajax Tutorials
Ajax Impact Tutorials
Ajax Tutorials

.
Ajax Resource Sites

Ajaxian
Ajax Matters
Ajax Patterns
Ajax Magazine
Ajax Resources
Ajax Toolbox
Top 10 Ajax Applications

Popularity: 6% [?]