If you’re interested in expanding your understanding of Ajax techniques and practices, check out these Ajax articles and tutorials that outline various methods and concepts involved in the development of Ajax-based applications. Though most are geared for budding and intermediate developers, veterans might find a trick or two they haven’t encountered before.
Prototype Window
This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it’s not mandatory.
AJAX Star Rating Bar
This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh.Note that this script isn’t tied to any specific system (such as WordPress)
Ajax Contact Form
It’s a bit over the top… well… for a contact form that is. But yesterday morning I decided that I wanted to have a little fun so I put together an unobtrusive AJAX contact form (works even with JavaScript disabled)
Heatmap for your website
ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones.on the browser’s client: Javascript (tested on Firefox 2.0, I E 6 and 7, )
click on Demo link :-
(login/password: demo/demo)
Gray Box
GreyBox can be used to display websites, images and other content in a beautiful way. Why use GreyBox???
* It does not conflict with pop-up blockers
* It’s only 22 KB!
* It’s super easy to setup
Digg - like spy script
Following many requests, I have upgraded the jQuery spy code to support multiple items returned from the AJAX response and custom timestamp functions - so that requests can be completely tailored.
Bubble Tooltips
Nearly two years ago over at pro.html.it I wrote an article on how to build pure CSS tooltips and then spice them up with a little DOM to ensure semantic use of the title attribute.Installation & Customization of Bubble Tooltips is quite easy.
Reflection.js
Reflection.js allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean.It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome.
Edit-in-Place with Ajax
As everybody knows, refreshing pages is so 1999. AJAX, DOM, whatever you call it makes it possible to let people edit a piece of text inline without having to use a submit button. But all of this has been made easy to use and implement: 2.0!
Ajax Tabs Content script
This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. Fetch and display an external page inside a container when a tab is clicked on.
Dragable RSS boxes script
The layout of my demo page and the dragable boxes is specified in the css/dragable-boxes.css file. I have put in some comments which will help you understand it. All the boxes are created as sub elements of a div with id.
AJAX poller script
A poller script that uses Ajax to send vote to the server & receives results from the server. This script requires that you have PHP installed on your server and access to a mySql database. This is a step by step guide on how to configure this script
Dragable content script
In this script you can drag nodes to a set of boxes. You make elements draggable by assigning them to the class “dragableElement”. You can configure the script to remember the position of the dragable elements in a cookie.
Lightbox/Modal window
The Lightbox Effect without Lightbox. When I first started trying to figure out how to do this, I wasted a lot of time trying to hack the Lightbox code and it was ugly. I thought better of using code I wasn’t proud of, so here’s how I did it:
Fisheye List Widget
The Dojo Toolkit is an open-source JavaScript toolkit for building great web applications. It shortens the time between idea and implementation by providing a well conceived API and set of tools for assisting and fixing the issues…
Google X Pulled
Today is an amazing day: A small idea - a fun late-night coding jaunt to help me learn Javascript & DHTML - has just launched on Google Labs. I never expected it to make it as far as it has when I wrote it a month ago…
Create Pie Charts
Pie & Donut (doughnut) is a very universal and fully configurable Flash chart. Using it, you can easily have good-looking, animated pies or donuts on your website. You can also use it for creating elaborate navigation menus. Key features:
Ajax subscription box
Mailist is a PHP based subscription mailing list. A stylish interface, twinned with ajax, provides seamless additions with no page reloads. Mailist has customisable email headers and footers, outbox. Demo Password: Demo.
Googlemap with geocode
SOLMETRA Maps is a PHP class meant to simplify display of Google Maps on your site.SOLMETRA Maps uses third party geocode webservice. Easy to set up and use. Geocode support. Autopan and autozoom to a point on a map.
Glider
This script uses the Prototype javascript framework and the effects.js library from Scriptaculous. You must include Prototype version 1.5+ in your pages before including this script. This library is known to work in recent versions of IE 6/7,FF,saf
Browser-based IM
ajax im (”asynchronous javascript and xml instant messenger”) is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in intranet, and social sites. u.name: test psw : test
Ajax Domain Search script
Ajax Domain Search Script is an open source domain name search script designed to be compact and display instant domain search results by using Ajax. It wrote in PHP language with simple, clean and easy to understand.
Amberjack site tours
Amberjack is a lightweight Open Source library, enabling webmasters to create cool site tours.
By guiding your site visitors, Amberjack tours can greatly improve the usability of your website.
Ajax login form
This sample will show you how to create an ajax based login function using PHP and Jquery, this is just a simple example of Jquery implementation, before we continue it is better for you to learn a bit about jquery uname: admin psw: 123456
Easy Ajax with ASK
The purpose of ASK is to offer you a simple way to get content into your page on-the-fly through asynchronous JavaScript and XmlHttpRequest, without sacrificing accessibility or usability.
browser: IE 5+, FF 1.0+, Safari 1.2+
Slideshow Alternative
First off, let me say that I did not write this bit of JavaScript, and that full credit goes to Steven G. Chipman for his excellent Cross Fade Redux. That being said, you can check out the demo that I have made here…
Roll your own Slideshow
The viewer is free to use in personal or commercial web pages, provided that the script is not sold or exchanged for profit. An unbranded version of the slideshow, suitable also for resale, The interface to the slideshow is simple
Carousel Component
First off, let me say that I did not write this bit of JavaScript, and that full credit goes to Steven G. Chipman for his excellent Cross Fade Redux. That being said, you can check out the demo that I have made here…
Ajax message box
My friend David asked to me how to implement a message box which appears when an user submit a form and disappear (with a nice fade effect after some seconds) when a generic Ajax request is completed.
Unobtrusive table sort
My first free Sunday morning in what seems like an epoch produces a complete rewrite of the original (and by far most popular) lab experiment, the “Unobtrusive Table Sort Script”, that addresses speed issues present
AutoCompleter
The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys
ModalBox
ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs.
Magnetic AJAX
This is just like the magnetic word kits you’ve seen before except this is on the internet! It saves state when you release a piece.
It updates itself every 7 seconds, so if you’re on it at the same time as someone else is and they move .
Transparent message
Transparent message is a new way to display information on a web page.
Instead of using the ugly alert() javascript function, it shows the message in a overlay layer of your HTML page.
It includes a Ruby On Rails helper …
ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
Suckerfish HoverLightbox
From time to time I come across some truly impressive techniques that are a great blend of CSS, XHTML, and sometimes JavaScript. Personally, I am not a big fan of implementing JavaScript, but it is sometimes unavoidable.
Ajax Animate Content
In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page.
Web Based Diagram
Welcome to Smoot and thanks for giving it a shot. Briefly, Smoot is a Web-based tool for creating diagrams of icons and links between them. Features include Google Maps and Google Earth integration, configurable tool palettes.
jQuery Portlets
A bit of a friendly challenge was put to me by Chris Heilmann, a London based Yahoo developer and JavaScript guru / author. So, I have updated this little demo with improved expand / collapse toggle behavior.
Highslide JS
Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features & advantages:
Timeline
The Timeline project has graduated and moved on with its life. Visit the new home page for more information on how to join the new mailing lists, synch with the new code repositories, issue tracking, etc. Please excuse …
GoogieSpell
GoogieSpell is a spell checker that you can use in your own web-application. Support for around 27 languages.Well tested and works on IE 5.5, IE 6.0, IE 7, FF 1.0+, Safari, Opera etc. Generic, extendable and easy to install
AJAX file upload
First of all I have to say that to create a pure AJAX file upload system is not possible because of security limitations of JavaScript. All of the Ajax upload systems I know use some third party tool/package or only mimics the AJAX feeling.
Ajax Events
One of the features I find it interesting in Google calendar is the possibility to create shared calendars, but also the availability of your calendar as XML or ICAL whatever it’s a private or public one. As soon as we have XML of our calendar
jQuery Tool Tip
Hot on the heels of ThickBox comes jTip, a jQuery tool tip solution. Of course, a tool tip type solution is anything but monumental; you don’t have to tell me that. Regardless, given my keen liking for the great jQuery library…
Phoogle Maps
Phoogle Maps (pronounced like Foogle Maps) is a PHP class that integrates itself with the Google Maps API and with the Google Geocoding API to make an easy to use interface to display Google Maps on your site.
Smooth Gallery
Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website…
Plotr - Javascript graphics
Some time ago I was looking for a charting framework for Prototype and I couldn’t find it, just because there’s none. So that’s where it all started. I came across PlotKit, a well written piece of javascript that enables developers…
Tablekit
TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax. All the documentation can be found with demo.
Cross Fading Slideshow
To set it up all you need is an HTML block element. All immediate descendants become slides. To start the effect you simply have to give the parent element a class of ‘crossfade’. If FastInit is present it’ll use that to start it automatically…..
FrogJS Javascript Gallery
FrogJS is a simple, unobtrusive javascript gallery. It’s not a replacement for other thumbnail galleries like Lightbox JS, but a different way of showcasing galleries. This type of gallery is best used when a page-by-page gallery is needed.
Advanced RSS Ticker
RSS is a popular format for syndicating and displaying external content on your site, such as the latest headlines from CNN. Well, with this powerful RSS ticker script, you can now easily display any RSS content on your site.
Humanized Messages
Humane Messages is a system for displaying and temporarily logging non-modal messages, for use in web applications. It’s simply a large and translucent message that’s displayed over the contents of your screen.
NoFunc - Sexy Box
This will create a basic “lightbox” or “thickbox” interface using AJAX Requests and HTML masking. We’re working on making this site more compatible, most of the code should now be working in IE 5.5, Opera, Safari, and Firefox.
DHTML Color Picker
Originally was developed for ColorJack: Studio. We’re working on making this site more compatible, most of the code should now be working in IE 5.5, Opera, Safari, and Firefox.
another color picker? Color Picker v2
Flexigrid
This is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.Connect to an ajax data source (XML and JSON[new])
Chart Plotting
PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit is fully documented and there is a quick tutorial to get you started.
35mm Photo Viewer
This is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.Connect to an ajax data source (XML and JSON[new])
Javascript Calendar
The javascript calendar available here is a free, lightweight widget which shows a calendar for use in picking dates on form fields.Lightweight, only 6kb in size! - Pure DHTML. No slow, external pages being loaded in iframes.
Carousel
includes.Static and Ajax content, Prototype Carousel is not anymore supported BUT a new version is available with Prototype UI library .Carousel are great to display a large set of data like images. The current version
Javascript Zoom Effect
loupe.js 1.3 allows you to add a loupe (magnifier) to images on your webpages. It uses unobtrusive javascript to keep your code clean. It uses unobtrusive javascript to keep your code clean. Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+.
TJPzoom
As you may have realized, this is an image magnifier. It’s a completely rewritten version of my script tjpzoom, but still is in JavaScript / DOM :). If you move your mouse over the picture, you can see a little zoom window with a magnified…
Some Useful link for AJAX
W3schools Ajax Tutorial
Loading gif generator
Ajaxian
Ajax Rain
Ajax
Ajax.NET Professional Example
BesTuts - The best tutorials
DHTMLSite - AJAX Scripts
Learn Ajax in 20 minutes
Ajax at ASP.Net
Open Source Ajax/JavaScript
Ajaxlines
Best ajax scripts
Ajaxtalk.com
Tag Cloud
Categories
- seo (1)
- Resources (6)
- Tutorial (1)
- Designer Tips (4)
- CSS Stuffs (1)
- ajax (2)
- inspiration (2)
- JS (2)
- Freebies (1)
- web tools (2)





Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
Awesome set of tools and scripts you’ve collected!! I’ve been trying to figure some of this stuff out for a while now. Keep up the good work!