There are a few special techniques or effects that can spice up just about any web page. These are the top 20 Ajax effects that every web developer should know. They're essential parts of any web developer's toolbox. If you haven't seen them yet, you no doubt will in your future web development endeavors.
1. TextboxList meets Autocompletion
Auto-completing fields in a form can be a huge time saver and a major benefit to the user. For example, searching for email addresses is a chore that can easily made much more simple (and I dare say fun) with a splash of Ajax. TextboxList meets Autocompletion is one such example of an auto-complete script that takes a Facebook-esque approach to autocompletion. The implementation is crisp and useful, not to mention easy on the eyes.
2.Ajax IM
Ajax IM is an incredible Ajax instant messenger that works just like Yahoo! messenger or any other IM client, except it's embedded on the website as opposed to a desktop client. Ajax IM is incredibly robust, and could add quite a bit to your user's experience. If you've got a social networking site or any site where it's encouraged for users to interact with each other, an IM client could be a great way to increase interaction.
3. LiveValidation
Web forms can be one of the most frustrating aspects of the Internet. Most are too long and try to collect too much information, and sometimes make it very hard for a valuable user to fill the form out. Possibly one of the most frustrating aspects of filling out a form is hitting "Submit" and getting errors that have to be corrected.
One way to ease the pain of web forms is to add Ajax validation that tells the user instantly when he's made a mistake. LiveValidation is an excellent Ajax script that can make adding Ajax form validation super easy for the developer. A must-have for any project that uses forms.
4. Inline Editing
The ability to edit something inline is a small aesthetic feature that can really add to the user's experience. There's something much niftier with being able to click a text field and instantly have the ability to edit it.
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.
5. Ajax Upload
Uploading files with Ajax is so much nicer than the boring, old alternative. It's nice to see the progress of the upload, and it can be much handier for the developer to be able to use Ajax uploads that only modify small sections of the web page.
Because there are many different flavors of Ajax uploading, a simple example that can be added to. AnyExample has a quick and excellent tutorial on how to make a basic Ajax upload that you can use as is or expand upon. If you're looking for an immediate solution, check out jQuery's jqUploader or the multiple file upload scripts.
6. Fancy Upload
Now that we've covered the basics for file uploading with Ajax, check out the excellent Fancy Upload. It's built off of the excellent Javascript framework MooTools and can be styled and modified almost endlessly. It's unobtrusive, can be placed inline and is server independent, so integrating this script to an existing app is relatively easy.
7. ClickHeat Clicks Heatmap
Heatmaps are an underused aspect in web development. While this may not be a wildly-popular feature that your users are begging for, heatmaps are excellent for the developer to see just what the site users are clicking on. While there are plenty of hosted services out there like crazyegg, you can also use your own hosted, Ajax-powered heatmap that's completely free with ClickHeat.
ClickHeat is very simple, but also very powerful. It shows who's clicking on what part of your page in a given date range. This can add plenty of insight as you tweak your layouts for the best performances. Knowing where your visitors click is absolutely essential information. You can visually see what ads are performing best, what links people like to click on, and much more data.
8. Ajax Mail Form
There's nothing more valuable to a startup or brand new website than a simple form for your visitors to sign up for launch dates and site updates. If you can add Ajax to dynamically process the information, it's a huge bonus. NinjaDesigns has a nifty little PHP script that allows you to add a signup form on your website that uses Ajax to send the information, so a new page isn't loaded. Extremely valuable for any web developer.
9. Ajax Directory Manager
Navigating a traditional hierarchy or folder tree can be quite a pickle for a web user. Each click on a folder requires a page reload, and you can kiss drag-n-drop functionality goodbye. If you want to add a user-friendly directory manager, use Ajax.
Relay is a robust directory manager built on ajax that features an interface with features like:
- drag-n-drop file and folders
- dynamically loading file structure
- uploads with file progress bar
- user accounts
.. and more. Relay is totally fully featured, and can be used as a standalone application or a compliment to an existing site.
10. Ajax Email Client
Who doesn't love Gmail? The email service by Google completely changed the way we use and think about email, and it also forced others like Yahoo! and Hotmail to play catchup and try to compete with Gmail's features. Google accomplished all of this with a little help from our friend Ajax.
If you wanted to mimic Gmail and create your own Ajax email client, it's a fun experiment and could be used for many applications. DevArticles has an "oldie but goodie", a somewhat older but excellent article on how to set up your own Gmail clone.
11. Improve Form Usability with Auto Messages
Many of the scripts listed in this article deal with improving user forms, as it's a big trouble spot for many web developers. The last thing a site owner wants is for people to abandon the website as they're signing up for the service! If you can make the process of filling out the web form easier, you'll have a much higher form completion rate.
Using auto messages for forms is an excellent way to give guideposts to the user. Woork has a stellar tutorial on how to add automatic messages to form fields, so that when they're hovered on a little popup shows below the input. It's a small feature to add, but huge for improving the user's experience.
12. qGallery
While it isn't a full-featured gallery, qGallery is an excellent example of using Ajax to request photos and media. It's based around the prototype Javascript framework, and it's a perfect little script for showcasing images. It even has cache functions built in to save bandwidth.
13. Ajax Star Rating
It seems that people almost always want to give their opinion on something. Having a simple way for users to create ratings is a great way to add interactivity to your website, and also gives the users a "voice".
There is a simple Ajax script that will do this called the unobtrusive ajax start rater. This nifty little script allows users to rate just about anything you specify. It's not tied to any platform, so you could literally use the script for anything that used PHP and MySQL.
14. CakePHP Ajax Form
If you're a user of the web framework like Django or CakePHP, you'll appreciate the tutorial by CakeBaker on how to submit a form with Ajax. It's actually quite simple to do, and only requires a few lines of code. One especially useful function of this code is that it's unobtrusive, meaning that if Javascript is disabled in the browser, the form will still submit, just not with Ajax.
15. Amberjack Site Tours
In terms of web developers, Amberjack is one of the most impressive Javascript libraries to date. Amberjack allows you to quickly and easily create site tours for your users that make using your website less of a mystery. The best part of Amberjack is that the whole library is less than 4kb in size! It's incredibly easy to customize, and can really make a huge impact on your site visitors with only a little bit of work.
16. Prototype UI
Prototype UI takes all of the hard work out of creating visual Ajax elements like carousels and modal windows. The script is based off of Prototype and Scriptaculous, and it's essentially a library of user interface classes. The library is constantly growing, and all of the features are highly skinnable and easy to customize.
It's always hard to find different libraries for things modal boxes and carousels, so it's nice when they're all bundled together.
17. JCrop
Photo editing online is typically a rather involved process. Either you use a service like Picnik or you just fire up 'ol Photoshop to edit your images. Wouldn't it be nice if the website allowed you to crop the images that you were uploading?
This is now possible with a jQuery plugin called JCrop. JCrop allows your users to crop any image that's been uploaded to your servers, using a powerful Ajax cropping engine. Brilliant.
18. jQuery Auto-tabbing Plugin
Like we've stated earlier, the job of the web developer is to make filling out forms as easy as possible for the site user. That means adding even the smallest feature if it enhances the user's experience. One such example is using auto-tabs on things like phone number input fields and social security numbers. Lousyllama has an excellent jQuery plugin that allows you to auto-tab form fields that you specify.
19. Sort Table Rows with Ajax
Sorting table elements is an incredibly useful feature to have with pages that showcase lots of data. The Daily Inspired has a nifty tutorial that shows how to achieve this effect with Stuart Langridge's sortable.js.
Tables are great at organizing data, but being able to further drill-down the information gives your users many more options to viewing the data they way that they want to.
20. DrasticMap
Google Maps is yet another revolutionary product from Google that relies heavily on Ajax to power the site. DrasticMap is a stellar Javascript/Ajax script that allows you to map coordinates stored in a MySQL database on top of a Google map. It's highly flexible and configurable, and the possibilities are endless in the ways that it can be used.
- Subscribe to the NETTUTS RSS Feed for more daily web development tutorials and articles.
Glen Stansberry is a web developer and blogger who's struggled more times than he'd wish to admit with CSS. You can read more tips on web development at his blog Web Jackalope.
If you liked this post, please vote for it on Digg. Thanks!
Related Posts
Check out some more great tutorials and articles that you might like
User Comments
( ADD YOURS )Long Beach Web Design October 6th
WOW! Absolutely awesome article. Thank you very much for this great resource. I will definitely be bookmarking this. By the way, I am first!
I plan to use a lot of these in my future web design projects. Thanks NETTUTS!
roman October 6th
This is great, i love these small tidbits of information, they are so…informing! Now i just have a simple question; When one clicks on an image it enlarges in the browser, and fades everything else out, is this part of Ajax, or not? sorry if i seem a little green in this subject.
insic October 6th
great list. maybe you can add tableKit in the list. anyway great post as usual!
Lamin Barrow October 6th
Awesome.. lots of cool stuff in here. Thanks.
Jeffrey Way October 6th
Nice list, Glen!
Jonny October 6th
Great list… Ajax is such a powerful tool. I started using jquery and ajax for more small applications and suddenly I feel like I can’t live without it. Great resource!
mmhan October 6th
Great list, been doing a project with which would probably need all those in.
Thanks.
begs October 6th
Hi there,
really nice list again.
I just wanted to say, that “Fancy Upload” in the current version does not longer work for future Flash versions.
I tested this with Flash Player 10 Beta, an it doesnt work, due to known restrictions from Macromedia.
Thank you!
JR October 6th
Hi Glen,
Just wanted to mention that the big SRC/DEMO buttons are absolutely fantastic. Well done!
-JR
Neel October 7th
Great List of scripts. I will use them in my future projects.
Thanks Nettuts.
Luca October 7th
Great list, thank you!
Ganesh M October 7th
Hi,
I was a nice article
..
Thank You !!
Bruno Abrantes October 7th
Sweet, an all-round great list of resources here. I’ll be sure to get back to this page when I’m starting my next project! Keep up the good work
Mark Darling October 7th
Great list
Worth reading through just to see how easy these features have become to implement in recent times.
Salman Sadiq October 7th
Great work
keep it up
like to see another list of 20 in future.
thanks
–
Salman
BroOf October 7th
A lot of cool and useful ajax-effects! Thank you!
markstevo October 7th
Every second article on the Web these days is a list article . . . I wuv wist articuls and I wuv dis articul. Thanks for the great post!
mrGTB October 7th
Very nice. some good effects there worth using
Barttos October 7th
Amazing collection. Like it.
Scott Reynen October 7th
This list, however useful, makes it obvious you don’t know what “AJAX” actually means.
Craigsnedeker October 7th
Amazing thank you so much!
Roshan October 7th
Thanks guys for this wonderful links. It has demo links as well as source code download. The best way to learn stuff is reverse engineering the nest example in my opinion. Well guys might disagree with me on this but I find it very helpful.
Thank you guys and I will be looking for more post of this type. Thank again
Roshan
Freelance Developer
http://www.instantshift.com
matt October 7th
DrasticMap seems kind of pointless. Google Maps already has a very simple JavaScript based API. I guess it cuts out some of the work required in writing your own script, but I see nothing wrong with using Google’s built-in functions for parsing XML requests into coordinates.
Jesse Burcsik October 7th
This list is great, thanks NETTUTS keep the spoon coming this way!
Bjorn October 7th
Excellent article! I will bookmark and use it!
Santiago October 7th
Terrific list!
da_rizza October 7th
uhhh…. that stuff looks really complicated. can’t you post a tut for ajax animated gifs or something?
James Simmons October 7th
Nice list, however many of these have nothing whatsoever to do with Ajax (LiveValidation, for instance).
Kevin Quillen October 7th
A lot of these are not AJAX.
AJAX involves sending and receiving of data, updating the screen without refreshing the browser.
Mostly what we have here are ‘dress effects’- javascript effects for AJAX events. Should rename this to Top 20 Javascript Event Effects to be more specific.
Joseph October 7th
Wow those are some great scripts! I’ve stumbled this and of course I’ll come back later to try to implement some of this on my own sites!
Keep up the great work!
45217 October 7th
Have you tested these before recommending them? I’ve had trouble with a couple of these.
Project-Dragon October 7th
Great article.
Im gonna try the heatmap.
JIm Jones October 7th
That truly is amazing! very neat stuff indeed.
Jif
http://www.privacy-center.ru.tc
Aaron Irizarry October 7th
Great Article!!!!
Almost everyone of those is something i can use at my job daily, especially all the form stuff.
Thanks again!!
~ Aaron I
Jonathan Cremin October 7th
Thanks for perpetuating the myth that AJAX is synonymous with javascript effects. I counted at least 5 items that don’t involve AJAX at all -.-
Conor Stapleton October 7th
Thanks for the article. The IM looks like something we might use!
Jeff October 7th
What about Meebo? - http://www.meebo.com
I realize another IM client (AJAX IM) is in the list, but it pales in comparison to Meebo and hasn’t been around nearly as long.
sean steezy October 7th
awe.some.
totally killer. half of this stuff will be implemented on a new project i am starting right now…. glad to see i had tons of questions about how to do this stuff and they were all answered right here.
Xavier Mazellier October 7th
Great great great !!!
yojan October 7th
it’s amazing how drastic the internet has changed because of Ajax
Nic October 7th
Great collection! BTW, thanks for the Osterheld mention on the auto-complete pic, it brightened my day to remember ‘El Eternauta’.
John Fredrickson October 7th
Like several other people have already mentioned, please change the title to “Javascript Effects” to avoid further muddying the public understanding of Asynchronous Javascript and XML (AJAX) data transmission.
Max Low October 7th
Great collection… Thanks
Ryan October 7th
As previously mentioned, several of these are not truly AJAX - and several of the ones that are AJAX could be done more easily without it.
Danielle LaPorte October 7th
great service, thank you.
Drew Douglass October 7th
I guess these are effects but more like AJAX resources, either way, this was a fantastic article. Thanks for the great resources and links!
Aaron October 7th
Awesome list!
Ben Griffiths October 7th
Some great ideas coming from this, thanks
Connor October 7th
Nice list glen!
Elf October 7th
Best thing i’ve read in yeaaaars!
Braden Keith October 7th
FANTASTIC!
Patrick Sweeney October 7th
Like many here have said, this is a good roundup, but a few of these have nothing to do with Ajax.
nicky October 7th
hola esta es una pagina muy buena, me gustan sus tutoriales, saludos desde cancun!
crowd October 7th
Great. Jist great.
Clint October 7th
Great list. Does anyone know of a good very basic Ajaxy website template that lets say would have nested tabs along the top for navigation to the different pages?
Cheers!
Patrick October 7th
AWESOME!
Really great and nice utilities, tools and interesting links! I thought there are no free click-trackingtools or good google map scripts. Now i know much more than before.
Thank you a lot.
webmaster tools October 7th
Great list … what are the chances of getting an ajax based html editor? Like something that will browse file systems via a browser and allow for live file editing. I think it sounds like a good idea and wouldn’t be terribly hard to mesh together with an inline editor if you can get the permissions & security down.
Dainis Graveris October 8th
Nice! Heatmaps and drastic map really took my interest!
Koos-Jans Schouten October 8th
Nice work!
You woke me up
honour chick October 8th
great collection… i especially liked the qgallery
Justin Leaf-Wright October 8th
AWESOME….I think I will defiantly use a few of those?
I would really like to get into using more AJAX
http://www.leafydesignz.co.za
Would like to chat more on Ajax? Go to
http://www.leafydesignz.co.za/forum/
Nicotene October 8th
i fell in love with javascript after advent of ajax!
your list of ajax effects, is really cool!
Aditya October 8th
Well, actually, reading so much stuff about AJAX, and all the ways in which it has changed the web has me quite excited… but the idea that some users may have JS turned off, and I’ll have to write Server side alternatives for all the important stuff, turns me off.
Can anyone tell if there are really people out there who turn off Javascript?
Aditya October 8th
and why on earth they do that?
Gonun October 8th
16 - Prototype UI
If you wanted to showcase something based on Prototype you should have given LipePipe as the example. They have way more widgets ready.
http://livepipe.net/
Daniel October 8th
Security issues
Giovanni October 8th
A really nice list, something every web developer should print and keep on the desk.
jackz October 8th
Great Job ! thanks at all.
codebounce.com October 8th
Useful list.
Personal like: Fancy Upload
http://codebounce.com/GraphicDesign
Chad October 8th
This is a great article, thank you for sharing this. I love the AJAX IM tool. Very neat and handy. The file manage is really nice as well, I do recommend folks to try it out. Its much more enjoyable to use than a traditional ftp client.
Chad
LogicWeb | Managed Dedicated Servers
http://www.logicweb.com
Powerade1 October 8th
Great Post, its really nice to find out this kind of resources!!!
Best regards!
Jauhari October 8th
Perfect List
Rahul October 8th
This is a great list… thanks for sharing…
Ben Gray October 8th
This is an awesome article.
The more I go on, the more I find that any general skills (like programming) I have are just a collection of very small specific skills (or tricks).
You’ve just added a solid 20 to my list.
pos October 9th
Just the list I was looking for. I had a little problem with a few of these, but still, thanks for the share!
Steo October 9th
Very cool effects!
Thanks!
Tobie Langel October 9th
And these are _Ajax effects_ ?
aQuib October 9th
Very useful articles. Thanks.
suresh October 9th
I love the Fany Upload one… Great list. Thanks for that
Taylor Satula October 9th
I use a very customised version of AjaxIM that has my logo as the back screen and diffrent colors than the default, with long distance clients and it works really well. I think i might need to implement some of the stuff that has been shown here. Like always good tut NETTUTS
ToastedSandra October 9th
I am originally a flash developer and came accross Ajax a while back. I was very impressed with its features.
http://www.toastedpixel.org
afma6 October 10th
Thanx….it was informative
Norant October 10th
Great Full, for all.
Moksha October 11th
thanks great list
Janckos October 11th
gracias!
Millo Yanek October 12th
See how to implemented this nice tools
http://www.navioo.com/javascript/dhtml/Ajax_Layer_1.dhtml
Syngenetic October 12th
Thanks for this great list of Ajax Effects. It includes some really important and useful ones.
Syngenetic, http://www.CoderScripts.com
Christian Dalsvaag October 12th
This really is an excellent article. Thank you for the quality of your work. Hope to see your writings here later on!
aespe October 12th
cool.. quite opening my eyes…
Vijay October 14th
Nice article.
Max October 14th
Thks a lot mate! thats a tariffic list!
balaji October 14th
Nice collection!
JuanK October 16th
Muy buenos estos ejemplos y ayudas.
JuanK -> desde Bogota - Colombia
arshad October 17th
amazing tutorials - thanks a lot for sharing guys .Especially the imagecropping is great .
Brad Strickland October 18th
This is a really good collection of some more advanced ajax implementations. Bookmarking on Delicious now.
Gustavo Macedo October 19th
Great post!!! Bookmarking right now!
brian October 21st
nice tutorial…definitely productive…
http://www.livbit.com
ivet October 22nd
A big big great thankness!
khela October 23rd
Nice!!!
birfazla October 24th
it is a wonderful tutorial .
thank you very much .
Ronak October 25th
A very useful article thanks
Sri Lankan best SEO October 26th
Awesome post!
Thank you very much!
mmf October 27th
Nice Article
windows_mss October 28th
good job man….
giania October 28th
I’ve had clickheat for a while, and while it is really neat, it doesn’t really hold up for dynamic pages. For example, I have clickheat registering activity on the home page of my blog, which updates regularly and thus changes size and content.
Clickheat’s map is often larger than the page itself, which leads me to think that I can’t necessarily trust the pattern it’s trying to show me. To be fair, I only did the basic setup, and it’s entirely possible I’m missing out on some great user tracking data.
All-in-all I’d recommend Clickheat, but I would ALSO recommend that it be used primarily for static pages or pages that don’t regularly undergo drastic changes at least.
çiçekçi October 29th
very thanks
Carlos Xavier October 30th
Congratulaciones, excelente aporte para la comunidad de programadores. Lo felicito por la entereza y el altruismo al compartir scripts en ajax. Siga adelante y buenas cosechas.
HH Shop November 1st
Gold Worth!
wisnu November 3rd