Advertisement
Web Roundups

20 More Excellent AJAX Effects You Should Know

by

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
  • Code
    Plugins
    Integrating Owl Carousel Into a WordPress Plugin: Planning the PluginOwl carousel
    In this series of articles, we are going study the step-by-step process of WordPress plugin development. If you're a beginner looking to write your first plugin (that includes both shortcodes as well as widgets), then this series is especially for you. In order to show this process in practice, we will develop a plugin for integration of the Owl Carousel into WordPress.Read More…
  • Code
    PHP
    Validation and Exception Handling: From the UI to the BackendProcedural to oop php retina preview
    Sooner or later in your programming career you will be faced with the dilemma of validation and exception handling. This was the case with me and my team also. A couple or so years ago we reached a point when we had to take architectural actions to accommodate all the exceptional cases our quite large software project needed to handle. Below is a list of practices we came to value and apply when it comes to validation and exception handling.Read More…
  • Code
    PHP
    Creating a Photo Tag Wall With Twilio Picture Messaging & PHPProcedural to oop php retina preview
    Twilio's recently announced Picture Messaging has vastly opened up what we can do with text messaging, now we can attach photos to our text messages and have them get used in different ways. In our case, we are going to build a Photo Tag Wall, which will contain photos linked to tags that will be displayed on a website.Read More…
  • Code
    JavaScript & AJAX
    Ember Components: A Deep DiveEmber components retina preview
    Ember.js is a JavaScript MVC framework that allows developers to create ambitious web applications. Although pure MVC allows a developer to separate concerns, it does not provide you with all the tools and your application will need other constructs. Today, I'm going to talk about one of those constructs. Ember components are essentially sandboxed re-usable chunks of UI. If you are not familiar with Ember, please check out Getting Started With Ember.js or the Let's Learn Ember Course. In this tutorial, we will cover the Web Components specification, learn how to write a component in Ember, talk about composition, explain the difference between an Ember view and an Ember component, and practice integrating plugins with Ember components.Read More…
  • Web Design
    UX
    Implementing the Float Label Form PatternForm float input retina
    Using Matt Smith’s mobile form interaction design as a guide, we will create a stunning form interaction for the web that’s both beautiful and accessible using HTML, CSS and JavaScript.Read More…
  • Code
    Scala
    Building Ribbit in ScalaRibbit scala retina preview
    In this tutorial we will implement the Ribbit application in Scala. We'll be covering how to install the Play web framework, a NetBeans plugin for it, and finally the code in Scala. If you are new to Scala, check out this previous tutorial which will help you set up your environment and provides you with a general platform that you can build upon. Even though the essence of Ribbit is to create/send/read Ribbits (our version of tweets), we will spend a large part of this tutorial explaining how Play works, authentication, and persistence. After these are in place, the rest becomes much easier. We will also implement ribbit creation, submission and listing out all ribbits. Following someone, advanced user settings, and direct messages will be an extra assignment for you to complete on your own. I am sure if you manage to follow along with this tutorial and create Ribbit as explained below, these three functionalities will be easily accomplished as homework.Read More…