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.

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • awake

    I usually cannot stand some “top x list to do something” but this one is superb

  • Daneil

    its really usefull!
    Beste collection i have ever seen :-)

  • http://www.appledoll.cn hawk

    thanks,good job!
    very useful for me!

  • http://www.jashsayani.com Jash Sayani

    Geese. Thanks a lot for this post !!

    Amazing collection of AJAX effects…

  • http://adnanonline.co.cc Adnan

    Thanks,it’s Great…. Just.

  • http://wicketbuzzz.com jaswant tak

    Excellent Article!!!

  • http://www.rafaelrp.com.br/ rafaelrrp

    Great post, THx!!!!

  • http://fadey86.blogspot.com Fawad

    Wow! nice collection!
    I really love it :)

  • jem

    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

    Lots of links missing … :(

  • Tim

    Very cool collection. I definitely want to try a few of these out.

  • http://www.quizzpot.com crysfel

    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

  • http://www.x-reference.com/ Jan

    I think you meant jQuery instead of AJAX?

    and the biggerLink demo link is BROKEN :-(

  • http://ejboyer.com Eric Boyer

    stansberry comin back with another list. BOOM.

  • http://www.ollicle.com Ollie

    Thanks for the mention of biggerlink.

    If you are looking for a demo and some documentation:

    http://www.ollicle.com/eg/jquery/biggerlink2/

  • http://www.blacknight.co.nz Mark Osborne

    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.

  • http://www.sotwguild.com Jason

    Wow big fan of LightWindow, exactly what I was looking for.

    • http://www.sotwguild.com Jason

      Hmm maybe not. There’s some problems with it in IE7…

      • Mike P

        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

    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!!!

  • http://www.nickbrowndesign.com Nick Brown

    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

    Nice now I got some new scripts to try and break!

    Thank you for taking the time to compile this list!

    • Mike P

      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.

  • http://jallits.com/ Daniel Craig Jallits

    One of the best AJAX lists to date…

    • http://www.isthisablog.com Daniel Costalis

      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

    No.8″jquery.biggerlink 2″ ‘s Demo button is wrong.

  • http://www.nouveller.com/ Benjamin Reid

    The AJAX forms are just what I’m after. Cheers!

  • http://aalaap.com Aalaap Ghag

    Great, but it would have been better if they were all jQuery-based! :-)

  • Lowkase

    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

    Awesome stuff!!! Thank you thank you thank you

  • http://frankyaguilar.com Franky

    Great Resource

  • RL

    Why is net tuts of all places calling these AJAX effects? Seriously…

  • Dewz

    No. 8′s demo link is broken.

  • http://www.fgkpsoft.com.ar Diego

    Excelentes pluggins… algunos ya los estoy utilizando de hace un tiempo

  • SX

    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.

  • http://www.mrexitus.com mReXiTuS

    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

    Will performance vary based on the Browser/OS combination? If so, how are others testing for these differences?

  • o.O

    Seriously… Most of these are not AJAX. They’re Javascript.

    There’s a difference!

    o.O

  • http://mygraphics.wordpress.com tonu

    It’s really my blowing performance…………..

  • http://www.47ideas.com/ Tom Cameron

    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.

  • http://www.reynsphoto.com Wim

    The instant.js was just what i needed for my redesign of my website !
    thank you

  • OFIR

    WOW MAN THANX !!!!!!!!!!!!

  • http://www.code-pal.com Sumeet Chawla

    Awesome Stuff.. Thanks for Sharing…

  • http://eddie.bodeche.com Eddie Thieda

    A great list that you put together, thanks for taking the time! :)

  • Boodaleh

    Groovy stuff, well done…

  • Dharmin

    Great collection…thanks man….

  • http://mokshasolutions.com Moksha Solutions

    Really cool thanks for sharing

  • wee

    Cool collection,
    but some of them are NOT Ajax, they are JavaScript.

  • xMen

    This is good, thanks.

  • http://www.andytowler.com/ Andy Towler

    Please, please don’t call these AJAX when many of them have absolutely NOTHING to do with AJAX.

    Epic fail.

    • http://www.isthisablog.com Daniel Costalis

      Thank you. I was thinking the very same thing.

  • http://www.baff-germany.de Digitale Sat Anlagen

    nice collection::D:D very good

  • http://www.neuroseoservices.com Amit

    Very nice collection.

  • http://afewtips.com afewtips.com

    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.

  • http://www.jquerymagic.com Mahbub

    Do I have to learn “what is AJAX” ? Why the post titles “AJAX effect”. Hell not all are even using AJAX.