When it comes to design of modern web-applications, Ajax is considered as a standard approach. Interactive solutions for lightboxes, form validation, navigation, search, tooltips and tables are developed using Ajax libraries and nifty Ajax scripts. Ajax is useful and powerful. However, when using Ajax, one should keep in mind its drawbacks in terms of usability and accessibility. With an extensive use of Ajax, you can easily confuse your visitors offering too much control and too many features.
Nevertheless, it’s important to know what’s possible, particularly since you can develop new ideas further, improving the quality of your web applications. Since our last article 80+ AJAX-Solutions For Professional Coding1 many things have changed — new scripts were introduced, new creative solutions were developed, new robust development kits have been released. They all are supposed to serve a better user experience and provide more comfort for web-developers.
This post presents over 60 new useful Ajax scripts, libraries and solutions which you can use in your future projects. License agreements can change from time to time — please read them carefully before using the script in a commercial web-application.
You might want to consider checking out the following related posts:
- 30 Scripts For Galleries, Slideshows and Lightboxes2 presents scripts of impressive slideshows, lightboxes and galleries you can use for effective presentations of your images,
- Powerful CSS-techniques For Effective Coding5 which features 50 new CSS-techniques, ideas and ready-to-use solutions for effective CSS-coding.
Please notice: the overview presented below is not just a yet-another-one-collection of Ajax-scripts. It’s a collection of really useful ones, the ones you can use in almost every project you’ll be working on.
Useful Ajax Scripts
An Accessible Slider8
“Recently we designed and developed an interface that required a slider control, which allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.”
Coda Popup Bubbles12
“When you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown. I’ll explain (carefully) how to make sure the effect doesn’t fail in this situation.”
Facebook Style Input Box14
Rich Text Editor16
The Rich Text Editor is a UI control that replaces a standard HTML textarea. It allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The Rich Text Editor’s Toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. The tool is based upon Yahoo UI Library17.
Gettyone Search Options Menu30
Learn how to implement a Gettyone31-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.
Relay – Ajax Directory Manager35
Relay is an Ajax-powered file management library. It has a multi-user access restriction, allowing the administrator to control user access to uploaded files. Features: drag-n-drop files and folders, dynamic loading file structure, upload progress bar, thumbnail view, including pdf and multiple users & accounts.
GWT-Ext Widget Library43
GWT-Ext is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree’s with Drag & Drop support, highly customizable ComboBoxes, Tab Panels, Menus & Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API. It uses GWT44 and Ext45.
Masked Input Plugin51
Oversized Sliding Tabs53
Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site54, which in turn is very heavily inspired by a widget used in the iTunes Music Store. Similar jQuery solution55.
Custom Checkbox with jQuery57
This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.
AJAX Instant Messenger61
Creating a table with dynamically highlighted columns67
There is a number of impressive things happening within this small area.
Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love :) Try to mouseover or click on a table below.
Unobtrusive Table Actions Script71
An attempt at writing an unobtrusive (and fast) script that adds commonly required “actions” to data tables. Can Zebra stripe the table. And supports row hover, column hover and cell hover effects
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s easy to use and degrades gracefully on all older, non-supporting browsers.
Style Your Website’s Search Field with JS/CSS77
The sliding Date-Picker79
Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information. Below is a live example that you can play with. Pan the timeline by dragging it horizontally.
The mooSlideBox v3 is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. This lightbox clone works in IE 6/7, Opera and Firefox.
CNN Style Scrolling Ticker with the Marquee Toolkit Control95
Besides scrolling the items from right to left, the liScroll plugin supports two additional features
mooSocialize – ajax based social bookmark widget97
Enough of having to submit interesting articles by hand to your favorite social networks and newsgroups? Then this is for you. Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc.
CheckBoxList hover extender99
“We created an AJAX Control Toolkit Extender that asynchronously calls a web service method (or a page method) to obtain the information displayed in the popup control, when the user hovers over an item.”
Another script you can use to integrate lightboxes and online-galleries in your web-pages. This lightweight script supports 5 different types of Media: Pages, Inline Content, Media (movies, SWF, etc), images (galleries, single), External Websites (via IFrame). Photo: Patrick Cheatham.
Further Ajax scripts
ClickHeat is an Ajax-powered visual heatmap of clicks on a page, showing hot and cold click zones. You can also use the heatmap generator outside ClickHeat for your own applications, using PHP and GD library.
Prototype UI is an open-source configurable Modal Window system. The library allows you to add a window or a dialogue. Windows can have a shadow and be scannable; modal mode is available, and there is a window manager for Web OS behavior.
Protoload makes it easy to show the User what is going on.123
Imagine a complex Rich Internet Application using different hidden requests and processes working side by side. Protoload makes it easy to show the User what is going on.
Step by Step – Show and explain visitors what your page has for them124
You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.
Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.
- 14 Cool Mootools Scripts128 lists useful Ajax-scripts for the Mootools library.
- 45 Fresh jQuery Plugins129 offers a growing list of references for jQuery plugins and solutions.
- 2 http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/
- 5 http://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/
- 6 http://greghoustondesign.com/demos/mocha/
- 7 http://greghoustondesign.com/demos/mocha/
- 8 http://www.filamentgroup.com/lab/developing_an_accessible_slider/
- 9 http://www.filamentgroup.com/lab/developing_an_accessible_slider/
- 10 http://digitarald.de/playground/uplooad.html
- 11 http://digitarald.de/playground/uplooad.html
- 12 http://jqueryfordesigners.com/coda-popup-bubbles/
- 13 http://jqueryfordesigners.com/coda-popup-bubbles/
- 14 http://devthought.com/textboxlist-meets-autocompletion/
- 15 http://devthought.com/textboxlist-meets-autocompletion/
- 16 http://developer.yahoo.com/yui/examples/editor/index.html
- 17 http://developer.yahoo.com/yui/
- 18 http://developer.yahoo.com/yui/examples/editor/index.html
- 19 http://zendold.lojcomm.com.br/icarousel/
- 20 http://zendold.lojcomm.com.br/icarousel/
- 21 http://extjs.com/
- 22 http://extjs.com/
- 23 http://www.unwieldy.net/moowheel/
- 24 http://www.unwieldy.net/moowheel/
- 25 http://jqueryfordesigners.com/slider-gallery/
- 26 http://jqueryfordesigners.com/slider-gallery/
- 27 http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx
- 28 http://www.taggify.net/
- 29 http://www.taggify.net/blog/post/2008/01/How-to-add-advanced-tooltips-for-people-on-your-photo.aspx
- 30 http://woork.blogspot.com/2008/02/gettyone-like-search-options-menu-with.html
- 31 http://www.gettyone.com/
- 32 http://woork.blogspot.com/2008/02/gettyone-like-search-options-menu-with.html
- 33 http://ibolmo.com/projects/moocanvas/
- 34 http://ibolmo.com/projects/moocanvas/
- 35 http://ecosmear.com/relay/
- 36 http://ecosmear.com/relay/
- 37 http://www.glassbox-js.com/
- 38 http://www.glassbox-js.com/
- 39 http://qgallery.quadrifolia.de
- 40 http://qgallery.quadrifolia.de
- 41 http://amberjack.org/
- 42 http://amberjack.org/
- 43 http://gwt-ext.com/
- 44 http://code.google.com/webtoolkit/
- 45 http://extjs.com/
- 46 http://gwt-ext.com/
- 47 http://webplicity.net/flexigrid/
- 48 http://webplicity.net/flexigrid/
- 49 http://www.deliciousdays.com/cforms-plugin/
- 50 http://www.deliciousdays.com/cforms-plugin/
- 51 http://digitalbush.com/projects/masked-input-plugin
- 52 http://digitalbush.com/projects/masked-input-plugin
- 53 http://creativepony.com/journal/scripts/sliding-tabs/
- 54 http://www.panic.com/coda/
- 55 http://www.ndoherty.com/demos/coda-slider/1.1.1/
- 56 http://creativepony.com/journal/scripts/sliding-tabs/
- 57 http://widowmaker.kiev.ua/checkbox/
- 58 http://widowmaker.kiev.ua/checkbox/
- 59 http://nicedit.com/
- 60 http://nicedit.com/
- 61 http://www.ajaxim.com/
- 62 http://www.ajaxim.com/
- 63 http://woork.blogspot.com/2008/01/mootools-animated-sidebar-menu.html
- 64 http://woork.blogspot.com/2008/01/mootools-animated-sidebar-menu.html
- 65 http://www.livevalidation.com/
- 66 http://www.livevalidation.com
- 67 http://www.askthecssguy.com/2007/08/creating_a_table_with_dynamica.html
- 68 http://www.askthecssguy.com/2007/08/creating_a_table_with_dynamica.html
- 69 http://cssglobe.com/lab/tablecloth/
- 70 http://cssglobe.com/lab/tablecloth/
- 71 http://www.frequency-decoder.com/2007/11/15/unobtrusive-table-actions-script
- 72 http://www.frequency-decoder.com/2007/11/15/unobtrusive-table-actions-script
- 73 http://lipidity.com/fancy-form/
- 74 http://lipidity.com/fancy-form/
- 75 http://www.nickstakenburg.com/projects/starbox/
- 76 http://www.nickstakenburg.com/projects/starbox/
- 77 http://cssglobe.com/post/1202/searchfield-unobtrusive-search-field-solution
- 78 http://cssglobe.com/post/1202/searchfield-unobtrusive-search-field-solution
- 79 http://ajaxorized.com/introducing-the-sliding-date-picker/
- 80 http://ajaxorized.com/introducing-the-sliding-date-picker/
- 81 http://www.prototype-ui.com/
- 82 http://www.prototype-ui.com/
- 83 http://minishowcase.frwrd.net/
- 84 http://minishowcase.frwrd.net/
- 85 http://simile.mit.edu/timeline/
- 86 http://simile.mit.edu/timeline/
- 87 http://icant.co.uk/sandbox/ajax-code-display/
- 88 http://icant.co.uk/sandbox/ajax-code-display/
- 89 http://www.artviper.net/test/ajaxslide/
- 90 http://www.artviper.net/test/ajaxslide/
- 91 http://www.reindel.com/accessible_news_slider
- 92 http://www.reindel.com/accessible_news_slider
- 93 http://www.bram.us/projects/js_bramus/jsprogressbarhandler/
- 94 http://www.bram.us/projects/js_bramus/jsprogressbarhandler/
- 95 http://mattberseth.com/blog/2008/01/cnn_style_scrolling_ticker_wit.html
- 96 http://mattberseth.com/blog/2008/01/cnn_style_scrolling_ticker_wit.html
- 97 http://www.artviper.net/moosocialize.php
- 98 http://www.artviper.net/moosocialize.php
- 99 http://blog.lavablast.com/post/2008/01/CheckBoxList-hover-extender.aspx
- 100 http://blog.lavablast.com/post/2008/01/CheckBoxList-hover-extender.aspx
- 101 http://parkerfox.parkerfox.railsplayground.net/cornerz/
- 102 http://parkerfox.parkerfox.railsplayground.net/cornerz/
- 103 http://www.nickstakenburg.com/projects/lightview/
- 104 http://www.nickstakenburg.com/projects/lightview/
- 105 http://stickmanlabs.com/lightwindow/
- 106 http://stickmanlabs.com/lightwindow/
- 107 http://www.smileycat.com/design_elements/calendars_date_pickers/
- 108 http://wildbit.com/demos/modalbox/
- 109 http://wildbit.com/demos/modalbox/
- 110 http://www.stickmanlabs.com/accordion/
- 111 http://script.aculo.us/
- 112 http://www.stickmanlabs.com/accordion/
- 113 http://www.wait-till-i.com/index.php?p=484
- 114 http://www.wait-till-i.com/index.php?p=484
- 115 http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html
- 116 http://www.dynamicdrive.com/dynamicindex1/slashdot.htm
- 118 http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html
- 119 http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html
- 120 http://www.dayfoxdesigns.co.nr/downloads.php
- 121 http://www.labsmedia.com/clickheat/index.html
- 122 http://www.prototype-ui.com/
- 123 http://aka-fotos.de/protoload/
- 124 http://icant.co.uk/sandbox/stepbystep/index.html
- 125 http://dev.justinmaier.com/fontSize/
- 126 http://famspam.com/facebox
- 127 http://www.ajaxrain.com/library.php
- 128 http://www.cult-f.net/2008/02/25/14-cool-mootools-scripts/
- 129 http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html