Mighty List Of Ajax Tools + Tutorials

Posted by nahid on June 2, 2009 in WEB DEVELOPMENT · 39 Comments

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.

mask

3. Form Validation Script

Shows some form input validators both serverside and browserside.

logon

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.

101303

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

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

100303

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.

editable

8. Whizzwig editor

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

093001

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

tab

10. Server side Jquery With Jaxer

ajaxfeatures1

Demo can be found here. Download Jaxer here

11. Form Plugin

ajaxfeatures34

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.

f_15

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.

f_17

14. Tableless Forms

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

f_29

15. A form with style

How to style and stop web forms from looking ugly.

f20

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

sc30

Slider Gallery. Live Demo

j-12

18. 2J News Slider – Joomla Ajax Slider

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

sc8

Inline Range Slider Live Demo

sc25

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

b-a-14

21. Multiple Sliders in one page

sc15

22. Coda-Slider. Live DemoDownload from Here

t12

…

jQuery Multimedia Portfolio. Live Demo Download from Here

sc31

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

j-22

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

sc4

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

sc5

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

sc6

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

sc22

29. Slider

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

sc14

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

sc3

Ajax Progress Bar

31 jsProgressBarHandler Demo can be found here. Download Code here

ajaxfeatures12

32. A YUI Loading Panel Widget Download Code here

Ajax Pagination

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

ajaxfeatures15

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

ajaxfeatures41

Ajax Calendar

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

ajaxfeatures17

Super Ajax calendar

ajax_calendar

Simple Ajax calendar : Get it here

ajax_calendar-3

Ajax Dynamic Image Gallery and Slideshows

Dynamic Image Gallery and Slideshow Demo here Download Code here

ajaxfeatures20

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

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