Digg

Discover the best of the web!
Learn more about Digg by taking the tour.

Warning: The Content in this Article May be Inaccurate

Readers have reported that this story contains information that may not be accurate.

See the original image at sixrevisions.com

10 AJAX Effects to Boost Your Website’s Fanciness Factor

sixrevisions.com — Here’s a collection of 10 powerful – yet easy-to-implement — AJAX effects to supplement your web page’s interface. These were picked using a “bang for your buck” methodology; meaning that these effects were chosen specifically because they provide high-impact effects with very little effort in installing and using them.

Bury

jggube 58 days ago, made popular 58 days ago

2574 diggs
digg it

147 Comments
Who Dugg It?
Blog It
Email It

JonnyCasino, on 03/19/2008, -12/+15Thanks for the list! Great resources and I already have some ideas to incorporate a few of these in some projects. Might I add another to your list for the ASP.NET developers out there: http://www.asp.net/AJAX/AjaxControlToolkit/Samples ...
- mtwolf, on 03/19/2008, -6/+12great addition, for MS noobs!
- legendxx, on 03/19/2008, -26/+10MS devs are the tourists of the programming world.
  - Dubbsacc, on 03/19/2008, -0/+13Those tourists get paid pretty well.
  - Narshe, on 03/19/2008, -0/+2Why do you say that?
    - legendxx, on 03/19/2008, -1/+3http://www.caffeinatedcoder.com/are-net-developers ...
  - raynar, on 03/19/2008, -0/+10and yet, they dont make a dinky OS in their mom's basement...they get paid. Go ahead and make fun of them, they're laughing all the way to the bank.
    - legendxx, on 03/19/2008, -8/+1not windows you *****. MS languages.. asp, vb, etc
      - Dubbsacc, on 03/19/2008, -0/+7Re-read his comment, you aren't reading it correctly.
        
        He's insulting open source developers for working on Linux in their mom's basement, while MS related developer's make bank.
  - rowjimmy, on 03/19/2008, -4/+3the amount of money you can make doing something says nothing about the quality of that something. case in point, those microsoft certified administrators - all of them that I've met are jackasses who have no idea what the ***** they are doing, they just are good at clicking continue buttons on gui windows. and yet they often make good money. does this mean they are skilled system administrators? no, it just means that people will pay out the ass for proprietary software and proprietary programmers because m$ has a skillful marketing team
    - Dubbsacc, on 03/19/2008, -1/+2Hi, sorry, my family cares little about the quality of my work, but do care about the quantity of my check.
  - rhyss, on 03/19/2008, -0/+1So does that make the rest of the developers poorly paid street performers, waiters or trinket vendors? I'd rather be a tourist then.
  - Dubbsacc, on 03/19/2008, -0/+1@rowjimmy - Since I couldn't edit my post in time, this is the only alternative. I would also like to add, that I agree with you on the certificates. But know that for every certified dumb ass there is another uncertified person out there that knows what they are doing. And we don't use continue buttons and GUI's.
mentol, on 03/19/2008, -3/+10the image menu looks nice
- Jonjonr6, on 03/19/2008, -2/+1I find it funny that the instant.js is considered a nice effect since noone uses Polaroid instant cameras anymore. Kind of funny that such a dead technology is still associated with candid photography.
- FlyingLlama, on 03/20/2008, -0/+1not as nice as #7!
  
  here's a real life example: http://earthcrossroads.com/demo/index.html
Sammiboi, on 03/19/2008, -1/+30Don't forget that you can't just use these and have a fantastic site... Just a warning.
- evilregis, on 03/19/2008, -0/+78That's what they said about the Marquee tag.
  - jtbandes, on 03/19/2008, -1/+15I'm laughing and crying inside.
    - Sparticuz, on 03/19/2008, -2/+1*****
  - bxblox, on 03/19/2008, -0/+9marquee+blink = masterpiece
    - lithera, on 03/19/2008, -0/+1That's so oldskool it will be cool someday again.... ah the glorious days of early webdesign...
      I miss those anoying little things usualy below some horrible animated gif.
- willis77, on 03/19/2008, -0/+5Yeah, you need these AND rounded CSS corners. Then you have a fantastic site.
socalrob, on 03/19/2008, -1/+66Who needs all this fancy stuff. All they needed was to put a blink attribute. Makes your website number 1.
- neorser, on 03/19/2008, -21/+2(Before you digg down the parent comment, this is sarcasm.)
  - NathanielJ, on 03/19/2008, -0/+18(Gee really, ya think? Better go up and post this in reply to the comment about the marquee tag too, just so we're sure to get it.)
  - condormcs, on 03/19/2008, -8/+1no, this is sparta!
- tikal2k, on 03/19/2008, -1/+1CAPS LOCK IS CRUISE CONTROL FOR COOL
mitch37, on 03/19/2008, -10/+223VERY BAD LIST. The entire list is Javascript gimmicks, written by someone with not thew slightest clue what AJAX is. (Its not Web2.0-ish Javascript!!!!!)

(1) I absolutely HATE when websites do that
(2) Not user friendly at all
(3) Not AJAX...
(4) Not AJAX
(5) Not AJAX..................
(6) Funky, but not AJAX!
(7) Not AJAX!
(8) Ok lightboxes are useful :P
(9) Not AJAX
(10) What do you know, NOT AJAX

Only two are AJAX, and even they are borderline...
- NathanielJ, on 03/19/2008, -1/+28I came to post the exact same thing. AJAX is wonderful, but the majority of these "AJAX tips" are simply what would have been referred to as DHTML 5 years ago.
  - tempusrob, on 03/19/2008, -4/+15"DHTML" makes me want to stab people, too. It's friggin JavaScript.
    - SatansSpatula, on 03/19/2008, -2/+10"JavaScript" makes me want to punch 1990's marketing monkeys, too. It's friggin' ECMAScript.
      - patik, on 03/19/2008, -2/+2Yeah, that's easy to say and type.
      - rspeed, on 03/19/2008, -0/+3@patik
        Yeah, but it's not wildly inaccurate like inferring that it has something to do with Java.
    - synotic, on 03/19/2008, -2/+3DHTML or dynamic HTML is the changing of static HTML after the page has loaded, either by modifying the DOM or altering the CSS. JavaScript is simply a means of making those modifications. As far as JavaScript vs. ECMAScript, JavaScript is a dialect of ECMAScript that includes Web-specific libraries. ActionScript is another dialect of ECMAScript that uses Flash-specific libraries. While JavaScript is often considered synonymous with ECMAScript, it can be useful to keep the distinction clear.
      - madpie, on 03/19/2008, -0/+6You need to use more acronyms. I suggest LOLOMGBBQ.
      - tempusrob, on 03/20/2008, -0/+1Please provide a link to the DHTML specification.
  - akira117, on 03/20/2008, -0/+1lol your right I'm not sure why I digg this :P
    - akira117, on 03/20/2008, -0/+1Dugg*
- strictnein, on 03/19/2008, -0/+46No kidding. AJAX != stupid javascript tricks.
- Firehed, on 03/19/2008, -8/+2No kidding. If you notice AJAX in action, then it was probably implemented very poorly.
  - NathanielJ, on 03/19/2008, -2/+8How do you figure? Facebook uses AJAX constantly (and was one of the first major websites to do so) and it's very easy to tell when they're doing it. Same with GMail.
- flyosity, on 03/19/2008, -3/+2This is probably my biggest pet peeve of all time. ARHHGHGHGH!
  - ophello, on 03/19/2008, -0/+2picturing you say "ARHHGHGHGH" is amusing, the repeated "GH" sound...
- thailand1972, on 03/19/2008, -0/+8Well said. Where's the asynchronous database calls (with help from client-side javascript) that get around page refreshes? People should understand what AJAX is before making AJAX top 10 lists....
- blitzkriegpunk, on 03/19/2008, -0/+22Dugg for ***** truth.
  
  Javascript Effects != AJAX, good sir!
- yojiffyskippy, on 03/19/2008, -0/+22But... But.... AJAX is the current buzzword.
  - bacon_skoda, on 03/19/2008, -0/+2Should I return my AJAX refrigerator?
- cremate, on 03/19/2008, -1/+3yea Ill jump on board. Ill also add that these have a lot of overhead using external libraries etc... there is nothing really useful here for a programmer. Maybe someone looking for an easy way out using bloated libraries.
  
  I also hate when someone calls something AJAX-ish, it either is AJAX or isn't.
  - BabaRamDass, on 03/19/2008, -0/+2I would have to disagree. I'm currently working on an enterprise Web application and decided to go with the mootools framework because of its license, its size, and its features. Makes simple JavaScript stuff SO much easier. It's modular so you can choose only the modules you need. The Native and Element modules are the best things since sliced bread...
    
    Disclaimer: I'm in no way associated with the mootools people. I'm just a big fan of their work.
    - cremate, on 03/19/2008, -2/+1If youre not going to hand code all your work and use libraries, you might as well use .NET. BETTER framework, IDE, extensions out the wazoo. Plus then you could easily use prebuilt enterprise programs like Sharepoint, have error handling with C#, security, encrypting, CLASSES. Shall I go on?
      
      If youre just a geek hacking around, then fine, use mootools. But if youre really doing enterprise work, dont reinvent the wheel - do yourself a favor and just use .NET.
    - fallenrayne, on 04/14/2008, -0/+0@cremate (stupid digg comment system)
      You are slightly retarded. MooTools is a JavaScript library, .NET is a server side framework. You do realize the difference between the two, right? You do realize you could use MooTools with .NET, right? Also you do realize that a lot of the major corporations, who tend to hire decent programmers that probably have more 'enterprise' experience than you, use JavaScript libraries like MooTools, jQuery, ExtJS, YUI, and Dojo?
      
      Before you try and pass yourself off as some expert programmer be sure you actually know about the technology you are trying to dismiss. JavaScript libraries != frameworks, unless it is something like ExtJS, which is then a client side framework that works in conjunction with a server side language/framework to build web applications (i.e. .NET with VB.net or C#).
  - merreborn, on 03/19/2008, -0/+1Effects like these are the *best* use of external libraries --
    
    1) You don't have to maintain it -- someone else will fix the bugs and release new versions for you
    2) You don't have to worry about cross-browser compatibility -- again, someone else is doing it for you.
    3) The quality's probably better than whatever you'd turn out -- the people maintaining the library can afford to devote a lot more time to its features than you can
    
    Part of a programmer's *job* is assessing the suitability of 3rd party libraries. Dismissing them all out of hand as "bloated" is unprofessional, and a good way to waste a lot of development time duplicating work that's already been done by someone else... and better.
    - cremate, on 03/19/2008, -1/+1I just would NEVER consider something like this for production work, except for maybe on myhomepage.com or something. Javascript is fun, powerful and all that, but try using it in a huge shared programming environment. What are you using on your backend?
      
      Thats the only reason I dismissed it. I actually hoped this would be a "learning" type webpage. Not links to mootools and BlinkingText.js.
- greeniemeani, on 03/19/2008, -6/+0In purely technical terms you are correct, but usually when people refer to AJAX, they actually are referring Web 2.0-ish javascript stuff as well.
  - Edan25, on 03/19/2008, -0/+2WHICH IS WRONG.
- jhoskins, on 03/19/2008, -0/+3Buried as inaccurate , Most of them are not AJAX, we need to stop misusing the term
- josher565, on 03/19/2008, -6/+1actually nothing is truely AJAX as the Asynchronous part of AJAX isn't possible in javascript. There's no way to create a thread!! So all calls have to be queued and executed in order. This page and your comments are all wrong based on the fact that the acryonym AJAX is a lie from the get-go!
  - SatansSpatula, on 03/19/2008, -0/+4Asynchronous behavior does not imply nor require multiple threads. You create a request and give it a callback. When the request completes, the callback is called. That callback could occur at any moment, regardless of whether or not the rest of your code is in the middle of processing something. Therefore, it is fully and truly asynchronous.
- centran, on 03/19/2008, -0/+1I will at least give them some credit in the fact that almost all of them degrade well when javascript is turned off. I realize coding a true AJAX website for no javascript is impracticable due to it's nature but for javascript gimmicks/flashyness such as these examples it is imperative that the site does not rely on javascript. Almost all of the scripts highlighted leave the functionality of the website intact if javascript is turned off.
- horiyochi, on 03/25/2008, -0/+0if you think lightbox is useful, you may want to see this digg, it might be useful
  http://digg.com/programming/LightAlert_js_Lightbox ...
foxhaze, on 03/19/2008, -3/+8Cool, now my website can be like every website.
element21, on 03/19/2008, -1/+42Most, if not all of these, are not even AJAX. they are glorified Javascript effects.!
mpodlesny, on 03/19/2008, -8/+14AJAX is the ability to read from a database and update the current webpage without having to reload the page itself. I think this list is neat, but not quite AJAX.
- kristopherw, on 03/19/2008, -2/+27AJAX has nothing to do with a database, at least not directly.
  - thailand1972, on 03/19/2008, -9/+3"AJAX has nothing to do with a database"
    
    ???? Explain yourself, sir.
    - Narshe, on 03/19/2008, -2/+9You could be storing your data in text files, or somewhere else.
    - yabos, on 03/19/2008, -1/+7Where does it say anything about database in Asynchronous Javascript And XML.
    - Dubbsacc, on 03/19/2008, -0/+1It's pretty much just a transportation method, you still use the language you're using to build your site with to interact with the database.
    - NathanielJ, on 03/19/2008, -0/+6AJAX doesn't even have to be used to retrieve data from text files, it could simply be used to retrieve the current server time or something like that. All that AJAX is is a way of retrieving some information from the server without requiring a page refresh. It could be database content, file content, or anything else.
      - bacon_skoda, on 03/19/2008, -2/+1anything? can it retrieve some dignity back to that website?
- Dubbsacc, on 03/19/2008, -0/+2Exactly, it's pretty much just a transportation method, you still use the language you're using to build your site with to interact with the database.
RoryH, on 03/19/2008, -0/+24AJAX = Asynchronous Javascript And XML, most of those "AJAX effect" are just Javascript.
- blitzkriegpunk, on 03/19/2008, -1/+1Not just limited to XML either. It can be JSON, XML, HTML, text, kittens, etc...
  - jackyyll, on 03/19/2008, -1/+1Yeah, but it's not called AJA(X|J|H|T|K)
    - blitzkriegpunk, on 03/19/2008, -0/+1His comment seemed to imply that in order for it to be AJAX it must also include XML. I was clarifying for everybody else.
fredmv, on 03/19/2008, -0/+29"Web 2.0" and "AJAX" are what newbie developers call this stuff. JavaScript could query the server for a /while/ via XMLHttpRequest. It's nothing all that revolutionary. Merely a buzzword; and quite an annoying one at that.
stomachache, on 03/19/2008, -1/+17Looks like somebody used the "AJAX" term only to draw attention... and ultimately wasted our time.
paolo90, on 03/19/2008, -4/+5These are great effects. There's one problem though... Most of them, if not all, aren't considered AJAX code.

I hope the author looks up the definition of AJAX before he even uses the term. It's a shame "AJAX" is in his list of blog topics and he don't know a thing about it.
amnezia22, on 03/19/2008, -3/+7Since when did javascript become know as AJAX?
kristopherw, on 03/19/2008, -5/+5Nice list of JavaScript effects. (echo) Not AJAX, though.
wbienek, on 03/19/2008, -15/+2all you morons complaining about this not being ajax are right.. but lets see what great awesome sites you've designed.. post the URLs..
- Mutton, on 03/19/2008, -0/+6I don't see what one has to do with the other.
- Dubbsacc, on 03/19/2008, -1/+6In case you didn't know, not every web developer works on public sites. There are plenty of in house developers that develop web applications for internal use only.
- flyosity, on 03/19/2008, -1/+2I designed and built 9rules.com. It won the Best Community of the Year award at SXSW in 2006 and has been on two dozen CSS galleries. We're currently revamping it all and relaunching very soon. Okay, now you post a site.
  - GorgarFanClub, on 03/19/2008, -1/+1That site is horrible
    - Matt2k, on 03/19/2008, -1/+2But.. But.. Look at the domain name! It's a combination of a random number and a noun. And the fixed-width CSS layout (I bet it validates). And it HAS A TAG CLOUD WITH RSS
      
      You can't deny this greatness baby.
      
      I'm not all sour grapes though. I looked for, and did not see, any shiny images with reflections AKA the rebirth of the lens flare.
- Nick22, on 03/19/2008, -0/+3EGOFEST
  - Mutton, on 03/19/2008, -0/+3At first you had my hopes up... I thought you were talking about a waffle festival. :(
whisperedlie, on 03/19/2008, -2/+5how to make your site more irritating.
plhearn, on 03/19/2008, -7/+6I was under the impression that AJAX involved doing server side calls without reloading the page by using a javascript callback function and interpretting the resulting xml. But I guess it also means any javascript trick. I don't even know why AJAX articles are still popular. ASP.net 3.5 can do asynchronous server calls soo much better and writing callback functions is a pain.
- Duositex, on 03/19/2008, -2/+7And how do you think ASP.net implements those server calls from the browser? Magic?
  - bacon_skoda, on 03/19/2008, -0/+1MAJAX
- irisblaze, on 03/19/2008, -1/+2sorry i meant to digg you down, for your stupid comment about the ASP .net
- plhearn, on 03/19/2008, -2/+1Why is it stupid? I was just pointing out that ASP.net lets you implement AJAX without having to write any javascript or navigate through any xml. I never said ASP.net uses AJAX without generating any javascript. If you're gonna bash my comment at least say why its stupid.
Mutton, on 03/19/2008, -1/+2Thanks. mooTable looks pretty cool.
monarch00, on 03/19/2008, -4/+3The AJAX control toolkit can do a good portion of these.... the RIGHT way.

http://www.asp.net/ajax/ajaxcontroltoolkit/samples ...
webgeek2point0, on 03/19/2008, -2/+5To the author: Do you even know what AJAX is? YOUR ARTICLE IS NOT ABOUT AJAX!!!! Don't just throw around buzzwords, espcially when you don't know what they mean.
- plhearn, on 03/19/2008, -0/+5I'm pretty sure he just threw in AJAX so it would get dugg to the front page. It worked I guess.
  - bacon_skoda, on 03/19/2008, -0/+2we've all been AJAXED, or rick-JAX-ed or AJAX-rolled.
louiebaur, on 03/19/2008, -1/+1Good information I think the AmberJack Site Tour Creator looks usefull
Steverrific, on 03/19/2008, -0/+0Whatever it is, the tour script and the light box is helpful to me and probably other fledgling web folks. Although I'll check around for better code just in case.
bejayel, on 03/19/2008, -0/+1So javascript effects are now AJAX effects. Thanks for the information!
Javascript != ajax, but it is an essential part of ajax.
pezholio, on 03/19/2008, -0/+3That FancyForm is awful. I know default form elements can be ugly, but changing them to such a ridiculous degree confuses people and breaks usability. As Melee Mel once said - "Dddddddon't dddooo it!!"
bradbeattie, on 03/19/2008, -1/+1Agreed with the above that the author's confusing AJAX with JavaScript. Also, this article is Mootools-heavy. Take a look at http://www.prototypejs.org/ , http://script.aculo.us/ and http://livepipe.net/projects/control_suite/
berndm, on 03/19/2008, -1/+0Ajax ultra
zenzic, on 03/19/2008, -0/+0The article mentions ImageFlow.. not sure if anyone here has checked out ProtoFlow.. built ontop of Prototype and Scriptaculous. It even supports adding reflection to your images (automagically!)
mavrck, on 03/19/2008, -0/+3don't forget http://jquery.com !
- Pegritz, on 03/19/2008, -0/+3Hey, thanks for reminding me of this one! I'd forgotten its name and wanted to check it out, but searching for "Javascript effects library whose logo is DEVO's PowerDome" doesn't really do the trick....
  - kevisazombie, on 03/19/2008, -0/+1I dugg you up for the DEVO reference you just made Jquery a whole lot cooler
amenic, on 03/19/2008, -1/+9Instead of just reading the list and gaining what you could from it most of you have elected to nail the guy to the wall for using "AJAX Effects" like he just used the term AJAX by itself. IE: He is clearly saying these effects are SIMILAR to those that a true AJAX incarnation has to offer... Get over it. Digg / Bury and move on.

I'm pretty sure 150 posts of THATS NOT AJAX don't really help.
AaronStatic, on 03/19/2008, -2/+2Next you'll post a wet-floor photoshop tutorial and call THAT ajax.
buried
Goodbyeworld, on 03/19/2008, -1/+1Why use flash when I can use .gifs and flash?!?
kowalzki, on 03/19/2008, -2/+2how did this ***** end up on the front page? buried sth is sersiously wrong with the digg algo rrecently
JafaRykos, on 03/19/2008, -0/+2As nice as lightboxes are, I hate the way they resize and the navigation buttons jump around. I know you can change it, but everyone is copying everyone else. I like leaving my mouse in 1 place and clicking. That is why I like the lightboxes that take the left and right keyboard buttons as input for changing the image.
scanman20, on 03/19/2008, -0/+4More like a big plug for moo tools.
sn0wmis3r, on 03/19/2008, -0/+1I think mootools gets more credit than it deserves, those tooltips, the forms, reordering tables, no big deal, you can do all that with scriptaculous/prototype and for tooltips use prototip (a tooltip library build on scripcatulous/prototype)
wintersland, on 03/19/2008, -0/+3Im gonna bury these as innacurate.

The headline should read "DHTML/JavaScript", not "AJAX".
InternetRules, on 03/19/2008, -1/+2We need more people to point out it's not AJAX, in case someone missed it
Pegritz, on 03/19/2008, -2/+4Jesus, who gives a flying ***** if this is just plain ol' JavaScript or some form of AJAX? Most people don't know the difference anymore and of those who do...well, I *was* going to say that few of them really give a *****--but, christ, to look at the furious semantic wanking above, it probably does.
Either way, I liked the tooltip thingee. I've used the Mootools framework for a few projects and found it very effective and simple to use, but somehow I never noticed the tooltip capabilities in there. I've produced the same functionality using script.aculo.us, but I'll *probably* use Mootools for that now, as I find it easier to work with for some reason.
- SatansSpatula, on 03/19/2008, -0/+2"Most people don't know the difference anymore" that's EXACTLY why we should care.
  This reflects the sort of stupidity creep that leads to people coming my company for interviews, only to find out that they're so goddamned ignorant that they don't have a clue how little they know.
quii, on 03/19/2008, -1/+1This isn't ajax, ajax is [insert, still incorrect definition of ajax].

I now feel smug that everyone knows my technical know-how
fEaRlEsSmOrOn, on 03/19/2008, -1/+2Even though these are not Ajax, we all can really appreciate the usefulness and incredible utilities of these scripts. To me, I will definitely love to employ all of these effects. And for those who don't like this post, you can go away.
- SatansSpatula, on 03/19/2008, -0/+1Homer Simpson beat you to it...
aserer511, on 03/19/2008, -0/+1I like 9 the best, that can have a really cool look to pages.
brandonchicago, on 03/19/2008, -0/+3I can't wait to randomly put these effects on my website for no apparent reason!!!
RobotLeAwesome, on 03/19/2008, -1/+0AJAX is stronger than dirt.
adcuz, on 03/19/2008, -1/+3More like GAJAX!
smoger, on 03/19/2008, -0/+1please don't let javascript/ajax be the late 00's version of animated .gifs, blink tags, and scrolling banners
tikal2k, on 03/19/2008, -1/+1This is NOT Ajax.

The author needs to replace "Ajax" in the title with "JavaScript."

Buried
syntaxsmurf, on 03/19/2008, -1/+2Buried for no AJAX!
jasonsalas, on 03/19/2008, -0/+1my my my...we've come a long way from FTY (http://www.yourtotalsite.com/archives/javascript/y ... haven't we?
Forbizzle, on 03/20/2008, -0/+1Quick! Somebody post those on Dynamic Drive! DHTML to the max!
davydany, on 03/20/2008, -0/+2AJAX or Javascript, some of these are absolutely beautiful.

damn, you guys are worse than girls who go on and on about how bad their bf is, and never appreciate the good things about them. *****! if you see something beautiful, say its beautiful...AJAX is spz to be communicating between server and client, but who gives a *****! thats not the point here!
Show 51 - 61 of 61 discussions
Login or register to add a comment

Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.

Warning: The Content in this Article May be Inaccurate

10 AJAX Effects to Boost Your Website’s Fanciness Factor

Login or register to add a comment