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
  • http://www.myhtmlworld.com Sunil

    Wawoo… great collection..

  • Niklas Hansen

    A few great stuff in between…

  • http://www.dailyd.de AJ

    A few really good things and some old stuff but all in all its a nive collection.

  • http://www.imblog.info Muhammad Adnan

    Great Collection , i will use these in my future projects !

  • http://www.developnew.com Bali

    all looks great

  • http://www.sachagreif.com Sacha

    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 ?

    • http://www.freshclickmedia.com Shane

      Yep – AJAX now seems to be the umbrella term for any JavaScript. It was called DHTML a few years ago ;)

      • WallPaperDude

        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).

    • http://www.benjaminwasilewski.com/blog Ben

      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.

      • http://stevelosh.com/ Steve Losh

        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.”

      • http://www.solutio.fi Janne J

        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.

  • http://jordanriane.com Jordan

    I’ve used Uni-form for a few projects of mine before and it’s definitely an awesome tool to use.

  • http://myfacefriends.com Myfacefriends

    nice collection! cheers!

  • http://ddev.dalsvaag.net Christian Dalsvaag

    A few nice ones here.

  • choise

    I think NetTuts should know what AJAX exactly is. Some of these Effects nearly have nothing to do with AJAX – pure JS.

  • http://twitter.com/saurabhshah saurabh shah

    nice collection… almost i have seen all before…

  • Phil

    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.

  • http://www.indev.nl Matthijn Dijkstra

    @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.

  • http://www.moraywebsolutions.com MorayWeb

    Very nice collection, thanks.

  • http://www.freshclickmedia.com Shane

    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.

  • http://frederic-soler.fr Fred

    Very cool effects ! Thanks

  • http://getmedia.info Andi

    Nice. Cool effects.

  • http://www.opensourcehunter.com OpenSourceHunter

    Nice post but i have already seen all of these effects.

    greetz

  • http://www.domynadmorzem.jamp.szczecin.pl domy nad morzem

    very usefull

  • TopFlySecurity

    Nice post..

  • http://www.easypeasy.ie Dave

    Thanks Great Post, Few links not working, Number 8 and 13

  • http://twitter.com/maxberndt Mexx

    cool effect! PS the demo link of Unobtrusive Table Actions is broken. it links to this articel!

  • http://thiagobelem.net Thiago BElem

    Yeah.. Some of these are just JS, not Ajax… But great’s collection. And yep, 3 or 4 ‘Demo’ links are broken. ;)

  • http://www.art2code.com Artt2code

    cool FX !

  • Daniele

    Great great great collection!!! Nice one!

  • MasterDKR

    When you click this one
    8. jquery.biggerlink 2

    it just links back to this post…..

  • http://al-kanz.org Al-Kanz

    Thanks for sharing :)

  • http://www.matthojo.co.uk Matt Hojo

    WOW! Nice thanks alot!! =]

  • http://victorgranda.com Victor Granda

    The link of the demo of 10th is break. Take a look. ;)

  • http://www.trceative.co.uk trCreative

    Thanks for sharing, great list!

  • kierzniak

    13. Unobtrusive Table Actions
    Wrong link in demo.

  • http://www.mydevwares.com/ myDevWares

    Lovely…delicious collection of scripts!

  • http://deconstructioncode.blogspot.com/ choen

    good list…thanks

    please check link demo Facebox.

  • http://moda24.de/ Seven

    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.

  • http://www.swaymedia.com Sirwan

    Juyst the type of article i like.. thanks!

  • http://www.subprint.com Joseph McCann

    Cool list, but very few have anything to do with AJAX.

  • http://www.webdesign-k.com zik

    Thanks for all those good ideas :)

  • http://alepuzio.blogspot.com alepuzio

    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).

  • http://www.dsaportfolio.com.br Diego SA

    Man, I love Ajax!

  • http://isenne.com/blog iSenne

    Some of these are pretty sweet :)

    Nice blog..

  • http://www.maraa.de Mandy

    Thanks a lot for all the tips… nice!!! ;)

  • Zinj

    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.

  • http://www.kieru.com Robert

    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.

  • http://believejay.blogspot.com BelieveJay

    Very well done. Nice collection! Thanks!!

  • http://marswebcreations.com Mike

    The demo link for “Unobtrusive Table Actions” just takes you to this same post.

  • suman

    whenever you comes u come with nice collection. thanks after the long time there something for general user hehehe in nettuts

  • Benj

    Thanks great post!

  • http://tanchuvt.com/blog Tanchuvt

    Very nice tuts. thanks you very much

  • Meshach

    Nice stuff.

  • Jake

    the demo link for the facebox page is broken… accidently put hhttp instead of http. Great article though! Thanks lots!