20 More Excellent AJAX Effects You Should Know
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Glen Stansberry
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I usually cannot stand some “top x list to do something” but this one is superb
its really usefull!
Beste collection i have ever seen :-)
thanks,good job!
very useful for me!
Geese. Thanks a lot for this post !!
Amazing collection of AJAX effects…
Thanks,it’s Great…. Just.
Excellent Article!!!
Great post, THx!!!!
Wow! nice collection!
I really love it :)
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!
Lots of links missing … :(
Very cool collection. I definitely want to try a few of these out.
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
I think you meant jQuery instead of AJAX?
and the biggerLink demo link is BROKEN :-(
stansberry comin back with another list. BOOM.
Thanks for the mention of biggerlink.
If you are looking for a demo and some documentation:
http://www.ollicle.com/eg/jquery/biggerlink2/
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.
Wow big fan of LightWindow, exactly what I was looking for.
Hmm maybe not. There’s some problems with it in IE7…
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…
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!!!
Definitely one of the better “20 X skills you should know” lists. I already want to implement a few of them on various projects.
Nice now I got some new scripts to try and break!
Thank you for taking the time to compile this list!
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.
One of the best AJAX lists to date…
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.
No.8″jquery.biggerlink 2″ ‘s Demo button is wrong.
The AJAX forms are just what I’m after. Cheers!
Great, but it would have been better if they were all jQuery-based! :-)
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.
Awesome stuff!!! Thank you thank you thank you
Great Resource
Why is net tuts of all places calling these AJAX effects? Seriously…
No. 8′s demo link is broken.
Excelentes pluggins… algunos ya los estoy utilizando de hace un tiempo
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.
I got a question, is there someting like mochaUI build on jquery? :) i’ve been searching but google didn’t give me anything usable.
Will performance vary based on the Browser/OS combination? If so, how are others testing for these differences?
Seriously… Most of these are not AJAX. They’re Javascript.
There’s a difference!
o.O
It’s really my blowing performance…………..
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.
The instant.js was just what i needed for my redesign of my website !
thank you
WOW MAN THANX !!!!!!!!!!!!
Awesome Stuff.. Thanks for Sharing…
A great list that you put together, thanks for taking the time! :)
Groovy stuff, well done…
Great collection…thanks man….
Really cool thanks for sharing
Cool collection,
but some of them are NOT Ajax, they are JavaScript.
This is good, thanks.
Please, please don’t call these AJAX when many of them have absolutely NOTHING to do with AJAX.
Epic fail.
Thank you. I was thinking the very same thing.
nice collection::D:D very good
Very nice collection.
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.
Do I have to learn “what is AJAX” ? Why the post titles “AJAX effect”. Hell not all are even using AJAX.