Back in October we wowed you with 20 Excellent Ajax Effects You Should Know. The post went on to become one of the most popular ever published at Nettuts+. This time around we have twenty more equally excellent Ajax effects for you to know and love.
1. Image Menu
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).
2. ImageFlow
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.
3. Instant.js
If you're looking to add some interesting backgrounds, rotations and other effects to images, Instant.js might be just what you're looking for. The JavaScript degrades gracefully, so browsers who don't have JavaScript enabled won't notice a difference.
4. Glassbox
We've all heard of Lightboxes and even Greyboxes, but how about GlassBoxes? 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.
5. Search Field CSS/JS
Auto-completing search fields are highly valuable when it comes user interaction. Sometimes the searcher doesn't know quite what he's looking for, so anything that helps the user find exactly what he wants is a huge benefit.
CSSGlobe has a very nice tutorial on how to enhance your site's searchfield (unobtrusively, no less) with a bit of CSS and Ajax.
6. Protoload
Loading images and fields are important to modern web applications that use Ajax. Protoload gives some built in options to help show the user what's going on while she's waiting. The script gives many options like color overlays for loading elements, custom text, and many other options.
7. jwysiwyg
jwysiwyg is a simple, powerful and extremely lightweight JavaScript jQuery WYSIWYG plugin. The plugin has many of the standard features of WYSIWYG editors, and is only 7kb in total size.
8. jquery.biggerlink 2
Bigger link 2 is really a simple plugin that makes bigger, clickable links easier. It even allows you to embed links inside of linked elements, if that makes sense. (Check out the demos for more clarity.)
Bigger Link 2 runs on the popular jQuery JavaScript framework.
9. jQuery Tag Suggestion
Tag suggestions are a popular usage of Ajax in modern web applications. Much like auto-completing search boxes, the jQuery Tag Suggestion plugin is an easy to use plugin that gives any application that uses tagging a way to quickly find the proper tag. A simple yet effective boost in the user experience.
10. 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.
11. Humanized Messages
Humanized Messages is a nifty jQuery plugin that does as the name implies: it creates a friendly messages for the user. The JavaScript plugin does this by creating a translucent message over the screen, and gently fades away over time.
12. LightWindow v2.0
LightWindow is yet another Lightbox plugin, but it adds some functionality that plugins of it's type seem to leave out. For starters, the plugin allows for rending and using multmedia within the lightboxes. Movies, images, even entire galleries can be shown within the LightWindow. Perfect for unobtrusively showcasing multimedia.
13. Unobtrusive Table Actions
Table data is often hard to display effectively, especially when you want to allow sorting of the rows and columns. The Unobtrusive Table Actions is a JavaScript that allows for different effects to be placed on table data. Highlighting rows, columns, sorting data, and much more can be done with the aide of this little script.
14. 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.
15. iCarousel
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.
16. MochaUI
MochaUI is another UI library for the JavaScript framework MooTools. MochaUI essentially builds an entire user interface for Web sites, forms and widgets. It includes a file browser, window resizer, paneled layouts, tabbed layouts, and much more.
17. jTip
jTip is a simple concept, yet very effective for improving hovertip functionality. Based on jQuery, jTip simply adds an elegant hoverbox to pre-configured links on a page, all with the help of some Ajax.
18.Uni-Form
Forms have long been the troublespot for many web developers over the years, and technologies like Ajax have greatly helped the user experience. With Ajax, you can process forms in real-time, validate them and send responses without requiring a reload of the page. Uni-Form is a little Ajax script that is a plug-in-play concept that tries to standardize form markup with XHTML and modularize the form, so that individual elements can be easily added or removed.
19. Validation Hints
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.
20. 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.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Sunil April 27th
Wawoo… great collection..
( )Niklas Hansen April 27th
A few great stuff in between…
( )AJ April 27th
A few really good things and some old stuff but all in all its a nive collection.
( )Muhammad Adnan April 27th
Great Collection , i will use these in my future projects !
( )Bali April 27th
all looks great
( )Sacha April 27th
Nice collection, but once again most of them have nothing to do with AJAX at all… I guess once too many people make the same mistake it becomes the norm ?
( )Shane April 28th
Yep – AJAX now seems to be the umbrella term for any JavaScript. It was called DHTML a few years ago
( )WallPaperDude July 9th
AJAX has indeed because a badly used buzzword. But they are actually two different things. AJAX stands for Asynchronous JavaScript and XML and it is simply a way to communicate with a web server without making a new request in the browser. DHTML stands for Dynamic HTML and it is a set of technologies used for dynamically modifying a web page (html+css+javascript – and is usually a lot of “pretty” that results in animations and what not that rival Flash).
Ben April 28th
Yes I was going to say the same thing. I’m tired of people calling javascript AJAX. It’s not AJAX unless you’re requesting data from the server, am I right? I would have hoped that NETTUTS would clear up this inconsistancy instead of promoting it with this post, but either way, still a nice roundup of javascript effects.
( )Steve Losh April 28th
AJAX stands for “Asynchronous Javascript and XML.”
The idea is that you use Javascript request data (XML) from the server and use a callback to process it whenever it gets back instead of hanging there waiting for it (Asynchronous).
Sacha and Shane are right — most people (like this author) seem to think it means “fancy effects made with Javascript.”
Janne J April 28th
Like others said nice collection of helpfull javascript but that doesnt mean that it is same as ajax. Some of these used Ajax but not all. Term ajax means that you reaquest some new information OUTSIDE of the page (xml, php+sql and so on) without refreshing it allover. If the content is already there on page but hidden, it is not ajax.
Jordan April 27th
I’ve used Uni-form for a few projects of mine before and it’s definitely an awesome tool to use.
( )Myfacefriends April 27th
nice collection! cheers!
( )Christian Dalsvaag April 27th
A few nice ones here.
( )choise April 27th
I think NetTuts should know what AJAX exactly is. Some of these Effects nearly have nothing to do with AJAX – pure JS.
( )saurabh shah April 27th
nice collection… almost i have seen all before…
( )Phil April 27th
a nice collection of some useful plugins but I think only a quarter of them are ajax specific as the title would suggest.
links to demos on 8 and 10 are broken by the way.
( )Matthijn Dijkstra April 27th
@Sacha
Well, Ajax is getting kinda a buzzword for everything in Javascript which is not an alert
Just like web 2.0 is a buzzword.
( )MorayWeb April 27th
Very nice collection, thanks.
( )Shane April 28th
Point 8 doesn’t work (as Phil has already mentioned), but the screenshot looks like An Event Apart.
Eric Meyer, who worked on the site, describes how he achieved the ‘effect’ using markup.
( )Fred April 28th
Very cool effects ! Thanks
( )Andi April 28th
Nice. Cool effects.
( )OpenSourceHunter April 28th
Nice post but i have already seen all of these effects.
greetz
( )domy nad morzem April 28th
very usefull
( )TopFlySecurity April 28th
Nice post..
( )Dave April 28th
Thanks Great Post, Few links not working, Number 8 and 13
( )Mexx April 28th
cool effect! PS the demo link of Unobtrusive Table Actions is broken. it links to this articel!
( )Thiago BElem April 28th
Yeah.. Some of these are just JS, not Ajax… But great’s collection. And yep, 3 or 4 ‘Demo’ links are broken.
( )Artt2code April 28th
cool FX !
( )Daniele April 28th
Great great great collection!!! Nice one!
( )MasterDKR April 28th
When you click this one
8. jquery.biggerlink 2
it just links back to this post…..
( )Al-Kanz April 28th
Thanks for sharing
( )Matt Hojo April 28th
WOW! Nice thanks alot!! =]
( )Victor Granda April 28th
The link of the demo of 10th is break. Take a look.
( )trCreative April 28th
Thanks for sharing, great list!
( )kierzniak April 28th
13. Unobtrusive Table Actions
( )Wrong link in demo.
myDevWares April 28th
Lovely…delicious collection of scripts!
( )choen April 28th
good list…thanks
please check link demo Facebox.
( )Seven April 28th
I just love facebox! It’s easy to use and so useful. Sad that there are some problems if you use multiplie faceboxes on one page.
( )Sirwan April 28th
Juyst the type of article i like.. thanks!
( )Joseph McCann April 28th
Cool list, but very few have anything to do with AJAX.
( )zik April 28th
Thanks for all those good ideas
( )alepuzio April 28th
Great Resource!
But the link of “demo #8 tool” (jquery.biggerlink 2) send in this page.
Now the link is
http://net.tutsplus.com/articles/web-roundups/20-more-excellent-ajax-effects-you-should-know/
maybe it need to correct in
http://www.ollicle.com/eg/jquery/biggerlink2/#eg
( )(as reported in the description).
Diego SA April 28th
Man, I love Ajax!
( )iSenne April 28th
Some of these are pretty sweet
Nice blog..
( )Mandy April 28th
Thanks a lot for all the tips… nice!!!
( )Zinj April 28th
i will reiterate it with others, all of these scripts have nothing to do with ajax at all. Heck, lot of them are not even effects.
( )Robert April 28th
A comment on iCarousel; I love the effects it produces, and its versatility is great, but users should make sure they know it still requires mootools v1.1.
Also, given the versatility of the script, it would also be nice if the author provided example code in the download. But that’s just me being greedy.
( )BelieveJay April 28th
Very well done. Nice collection! Thanks!!
( )Mike April 28th
The demo link for “Unobtrusive Table Actions” just takes you to this same post.
( )suman April 28th
whenever you comes u come with nice collection. thanks after the long time there something for general user hehehe in nettuts
( )Benj April 28th
Thanks great post!
( )Tanchuvt April 28th
Very nice tuts. thanks you very much
( )Meshach April 28th
Nice stuff.
( )Jake April 28th
the demo link for the facebox page is broken… accidently put hhttp instead of http. Great article though! Thanks lots!
( )awake April 28th
I usually cannot stand some “top x list to do something” but this one is superb
( )Daneil April 28th
its really usefull!
( )Beste collection i have ever seen
hawk April 28th
thanks,good job!
( )very useful for me!
Jash Sayani April 28th
Geese. Thanks a lot for this post !!
Amazing collection of AJAX effects…
( )Adnan April 28th
Thanks,it’s Great…. Just.
( )jaswant tak April 28th
Excellent Article!!!
( )rafaelrrp April 28th
Great post, THx!!!!
( )Fawad April 28th
Wow! nice collection!
( )I really love it
jem April 28th
Some new ones here I haven’t seen before!
Really, the hard part isn’t always finding these sort of things, but finding ones that work well with whatever framework you prefer or you’re already using on a site/project. I saw just about every popular JS framework being used between all of these!
( )Me April 28th
Lots of links missing …
( )Tim April 28th
Very cool collection. I definitely want to try a few of these out.
( )crysfel April 28th
mmmm…. Ajax it is not an effect or anything like that!! i like the plugins, i really like this collection but some of them have nothing about Ajax!! i think sites like this should teach to the people the difference between javascript and ajax!! ajax it is not about modal windows, lightbox or beautiful galleries.
best regards
( )Jan April 28th
I think you meant jQuery instead of AJAX?
and the biggerLink demo link is BROKEN
( )Eric Boyer April 28th
stansberry comin back with another list. BOOM.
( )Ollie April 28th
Thanks for the mention of biggerlink.
If you are looking for a demo and some documentation:
http://www.ollicle.com/eg/jquery/biggerlink2/
( )Mark Osborne April 28th
Calling thesee AJAX effects is silly. AJAX may be used to collect a series of images or data from a server but the overall effects are built with Javascript. A lot are even just jQuery Plugins. Why not call them what they are??
Otherwise it’s a nice collection.
( )Jason April 28th
Wow big fan of LightWindow, exactly what I was looking for.
( )Jason April 28th
Hmm maybe not. There’s some problems with it in IE7…
( )Mike P April 30th
Jason, check out http://www.gomez.com which has a solution called Reality View with over 500 Browser/OS combinations to test virtually. You can even test full scripts with Flash, AJAX etc…
James April 28th
On the topic of these not being AJAX;
Maybe we should pretend the .js files are stored in a database, or that the data used is stored in an XML file?
…that way, it IS ajax!!!
( )Nick Brown April 28th
Definitely one of the better “20 X skills you should know” lists. I already want to implement a few of them on various projects.
( )B. Moore April 28th
Nice now I got some new scripts to try and break!
Thank you for taking the time to compile this list!
( )Mike P April 30th
B. Moore, check out http://www.gomez.com and try the instant test. They have a cool tool called Reality View and Check that is awesome for Browser/OS Testing with Web 2.0 Apps.
( )Daniel Craig Jallits April 28th
One of the best AJAX lists to date…
( )Daniel Costalis June 4th
Except that most of these have nothing to do with Asynchronous Javascript And XML, or remote calls of any kind. These are some nice mostly javascript based visual effects, however.
( )aLFonso April 29th
No.8″jquery.biggerlink 2″ ’s Demo button is wrong.
( )Benjamin Reid April 29th
The AJAX forms are just what I’m after. Cheers!
( )Aalaap Ghag April 29th
Great, but it would have been better if they were all jQuery-based!
( )Lowkase April 29th
Have to iterate what others have said above.
Most of the items in the list have nothing to do with AJAX. If you think AJAX is a really cool Jquery script then its time to pick up your text books again and do some reading.
I am surprised the title of the article got by the editors at Envato.
( )Benjamin Bankson April 29th
Awesome stuff!!! Thank you thank you thank you
( )Franky April 29th
Great Resource
( )RL April 29th
Why is net tuts of all places calling these AJAX effects? Seriously…
( )Dewz April 29th
No. 8’s demo link is broken.
( )Diego April 29th
Excelentes pluggins… algunos ya los estoy utilizando de hace un tiempo
( )SX April 29th
Yes, it is not a Ajax list. Look it up. It’s embarrassing.
Anyways, nice list of effects. I will find some useful, but some are completely useless to developers who want to use for their clients, or on their own websites because of license restrictions. Read all the licenses because each one is different.
( )mReXiTuS April 30th
I got a question, is there someting like mochaUI build on jquery?
i’ve been searching but google didn’t give me anything usable.
( )Mike P April 30th
Will performance vary based on the Browser/OS combination? If so, how are others testing for these differences?
( )o.O April 30th
Seriously… Most of these are not AJAX. They’re Javascript.
There’s a difference!
o.O
( )tonu May 2nd
It’s really my blowing performance…………..
( )Tom Cameron May 2nd
I know it’s been said, but I’ve got to say it again. They’re not AJAX! Just some very cool javascript. This is one of the best tutorial sites on the web but these silly mistakes bring it down.
( )Wim May 3rd
The instant.js was just what i needed for my redesign of my website !
( )thank you
OFIR May 4th
WOW MAN THANX !!!!!!!!!!!!
( )Sumeet Chawla May 4th
Awesome Stuff.. Thanks for Sharing…
( )Eddie Thieda May 5th
A great list that you put together, thanks for taking the time!
( )Boodaleh May 5th
Groovy stuff, well done…
( )Dharmin May 5th
Great collection…thanks man….
( )Moksha Solutions May 5th
Really cool thanks for sharing
( )wee May 7th
Cool collection,
( )but some of them are NOT Ajax, they are JavaScript.
xMen May 8th
This is good, thanks.
( )Andy Towler May 9th
Please, please don’t call these AJAX when many of them have absolutely NOTHING to do with AJAX.
Epic fail.
( )Daniel Costalis June 4th
Thank you. I was thinking the very same thing.
( )Digitale Sat Anlagen May 9th
nice collection::D:D very good
( )Amit May 12th
Very nice collection.
( )afewtips.com May 12th
Love them – I have to control myself and not put all of these everywhere.
Especially the image tilt plugin. Have to find a use for that.
( )Mahbub May 12th
Do I have to learn “what is AJAX” ? Why the post titles “AJAX effect”. Hell not all are even using AJAX.
( )Rollins May 14th
Wow! Completely amazing. Just posted a review on my favourite 5 at http://www.dtechweb-blog.com/2009/05/14/some-really-cool-ajax-effects/
Just brilliant. Thanks man
( )databox May 16th
cool! thanks a lot. we will use some on u-city
( )Shaique ali May 17th
wow! wonderful examples. these are very helpful for building a site.
( )Carl - Web Courses Bangkok Instructor May 18th
Juicy! Love all of these thanks.
( )jens May 30th
nice collection. it makes the web more interesting.
( )Egypt Web Solutions June 7th
Very nice collection
( )Jaspal Singh June 15th
Thanks for sharing, nice Ajax effects examples.
( )Abitur Nachholen June 15th
Nice Work, i love it.
( )Arthur.Ding June 20th
great, i like it
( )carlos June 24th
LightWindow 2.0 is sooo pimp. That is one of the most versatile modal plugins ever. That thing is insane.
( )WallPaperDude July 9th
Wish AJAX hadn’t been turned into such a widely used buzzword. A lot of this stuff is more DHTML. But whatever. It’s all javascript, and javascript is good. Me like. Me like a lot.
( )hvac July 30th
wow cool staff !
( )sir jorge August 7th
i know all of them, yet none of my clients like them, so they become somewhat useless
( )robb August 19th
i think u misinterpret ajax and javascript at some point.
( )those are 2 different things.
mls August 25th
very nice collection.
( )Bardia August 27th
The icarousel link doesn’t work anymore :S
( )ManMohan September 17th
thanx a lot !!!
i would have not even imagined these effects if i would not have seen ur tutorial
nice collection man !! simply osum
( )Leah November 4th
Nice java scripts here – goodies too… thanks for sharing – will definitely use a few…
( )James December 2nd
Great Collection, wrong name !!!!
( )Florian December 27th
Great list, I hope you had a wonderful Christmas time?
( )jean philippe January 4th
awsome
( )Zain Syed January 6th
Awesome
( )jijesh January 11th
woooooove
Very nice collection,
( )