70 New, Useful AJAX And JavaScript Techniques


As the Web grows and becomes more dynamic, more and more websites have user-generated content and tools that greatly improve the user experience in terms of usability and accessibility.

Interactive solutions for lightboxes, form validation, navigation, upload, auto-complete, image cropping, slideshows, tool tips, sliders and tables are being developed that use nifty JavaScript and AJAX scripts.

When using these, developers have to carefully consider many subtle techniques to help users get things done. In this article, we present 70 new and useful JavaScript and AJAX techniques, all of which are of the highest quality and are more or less easy to configure. You will also find some very useful but better known techniques to use on almost any project you work on.

jQuery1, MooTools2, Prototype3 and script.aculo.us4 are used in these examples, so every taste gets its due.

1. Calendars and Timelines: Examples and Demos

A click-and-drag timeframe, with a function for defining ranges. A better calendar. Check out the demo here6.

Fresh, New and Useful Javascript & Ajax Techniques7

Create astonishing iCal-like calendars with jQuery8
Similar to the iPhone Calendar application, with event description that shows up on mouse hover. The trickiest part is making your images seamless and using a single image for all the graphics whenever possible to decrease download time. Check out the demo here9.

Fresh, New and Useful Javascript & Ajax Techniques10

This element enables you to pick dates with a simple slider bar. By dragging the bar over the timeline, the dates change instantly. And when the user decides to manually change dates, the bar is automatically adjusted to the corresponding dates. Check out the demo here12.

Fresh, New and Useful Javascript & Ajax Techniques13

Elegant animated weekly timeline14
This tutorial explains how to design an elegant and animated weekly timeline, with daily annotations, that you can customize and reuse quickly in your Web projects. Check out the demo here15.

Fresh, New and Useful Javascript & Ajax Techniques16

Unobtrusive datePicker widget17
This unobtrusive datePicker (calendar), which is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/XHTML+XML. Check out the demo here18.

Fresh, New and Useful Javascript & Ajax Techniques19

Date Picker20
Date Picker jQuery plug-in allows users to select a date or range of dates easily. It includes a lot of options: multiple calendars; single, multiple and range selection; marking of special, weekend and special dates; an easy-to-customize look via CSS; custom day to start the week, a fit with the viewport.

Fresh, New and Useful Javascript & Ajax Techniques21

2. Navigation Examples and Demos

auto-scrolling page navigation22
Learn how to create auto-scrolling page navigation using script.aculo.us. Check out the demo here23.

Fresh, New and Useful Javascript & Ajax Techniques24

Creating a “filterable” portfolio with jQuery25
In this tutorial, you will learn how to make “filtering by category” a little more interesting with just a bit of jQuery.

Fresh, New and Useful Javascript & Ajax Techniques26

Create a simple, powerful product highlighter with MooTools27
Learn how to create a flexible tool to highlight your website products and services using the MooTools JavaScript framework. Check out the demo here28.

Fresh, New and Useful Javascript & Ajax Techniques29

Ext Accordion30
The Accordion widget and its InfoPanel are components that use the Ext JS Library31. It can be used for page navigation, tool windows, hide-able details, log-in forms, options dialogs, sticky notes and more.

Fresh, New and Useful Javascript & Ajax Techniques32

jQuery ListNav Plug-In33
This jQuery plug-in provides an easy way to unobtrusively add a letter-based navigation widget to any <ul> or <ol> list. An easily stylable (via CSS) nav bar appears above the list, showing the letters A through Z. Clicking one of the letters filters the list to show only the items starting with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items are contained in that list. Check out the demo here34.

Fresh, New and Useful Javascript & Ajax Techniques35

3. Tool Tip Examples and Demos

Duplicate the jQuery home page tool tips using MooTools36
The jQuery home page has a pretty suave tool tip-like effect, as seen above. Here’s how to accomplish the same effect using MooTools.

Fresh, New and Useful Javascript & Ajax Techniques37

Prototip allows you to easily create both simple and complex tool tips using the Prototype JavaScript framework. You can easily customize it, control the tool tip position and get configurable rounded corners (with no PNG images required).

Fresh, New and Useful Javascript & Ajax Techniques39

Simpletip is a plug-in for the popular jQuery JavaScript library. It allows you to create tool tips with ease for any element on the page using the power of jQuery’s selectors and event management. The tool tips can be static, dynamic or even loaded through AJAX with a variety of different visual effects.

Fresh, New and Useful Javascript & Ajax Techniques41

Coda pop-up bubbles42
Re-create Coda’s ‘puff’ pop-up bubbles, shown when you mouse over a downloadable image.

Fresh, New and Useful Javascript & Ajax Techniques43

4. Menu Examples and Demos

Smooth animated menu with jQuery44
Nice jQuery menu with a smooth transition animation effect. Check out the demo here45.

Fresh, New and Useful Javascript & Ajax Techniques46

Fading Menu – Replacing Content47
The example page below has three menu items for three content areas: “Home,” “About” and “Contact.” When a menu item is selected, its menu graphic is shown at full opacity and its corresponding content area is shown, while the other menu items are faded and their content areas hidden. With jQuery, you can fade in the menu item being clicked, fade out all other menu items, display the corresponding content area and hide all other content areas. Check out the demo here48.

Fresh, New and Useful Javascript & Ajax Techniques49

jQuery Context Menu plug-in50
jQuery Context Menu is a context menu plug-in for jQuery. It is designed to make implementing context menu functionality easy, and it requires minimal effort to configure. Check out the demo here51.

Fresh, New and Useful Javascript & Ajax Techniques52

e24TabMenu – AJAX drop-down tab menu53
e24TabMenu is a plug-in written for script.aculo.us. It is a tab menu that expands and collapses smoothly. Check out the demo here54.

Fresh, New and Useful Javascript & Ajax Techniques55

5. Slider Examples and Demos

MooTools Slider with two knobs56
This is the MooTools Slider with two knobs (i.e. a double-pinned slider), with range indicator. Check out the demo here57.

Fresh, New and Useful Javascript & Ajax Techniques58

MooTools CSS-styled scroll bar59
A small piece of JavaScript that creates a CSS-styled scroll bar from the MooTools “slider” class. Check out the demo here60.

Fresh, New and Useful Javascript & Ajax Techniques61

Ultra-versatile slider for websites62
A simple step-by-step tutorial for implementing an ultra-versatile slider with horizontal scrolling and animated effects using MooTools. Check out the demo here63.

Fresh, New and Useful Javascript & Ajax Techniques64

A better Pagination 65
A little script that can turn ugly-looking pagination numbers into a nice-looking slider using MooTools. Check out the demo here66.

Fresh, New and Useful Javascript & Ajax Techniques67

6. Slideshow Examples and Demos

Another slider plug-in created using MooTools.

Fresh, New and Useful Javascript & Ajax Techniques69

Easy Slider70
Easy Slider enables images or any content to slide horizontally or vertically on click. Features include: auto-slide, continuous sliding, “Go to first” and “Go to last” buttons, hiding controls, optional wrapping markup for control buttons, vertical sliding, multiple sliders on one page. Check out the demo here71.

Fresh, New and Useful Javascript & Ajax Techniques72

Supersized – full-screen background/slideshow jQuery plug-in73
Supersized is a jQuery plug-in that automatically resizes (background) images to the size of the browser and runs them as a slideshow. It is lightweight and plays nice with all browsers. Check out the demo here74.

Fresh, New and Useful Javascript & Ajax Techniques75

Animated JavaScript slideshow76
New features for this dynamic JavaScript slideshow include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. Check out the demo here77.

Fresh, New and Useful Javascript & Ajax Techniques78

Moving Boxes79
A jQuery slider with buttons to change panels, and the panels zoom in and out. Check out the demo here80.

Fresh, New and Useful Javascript & Ajax Techniques81

Prototype Carousel with script.aculo.us 82
A Prototype-based carousel that allows for n-item paging. Items within the carousel can be extracted from the HTML itself and so can be indexed by search engines. It also allows for vertical, horizontal and grouped paging. Check out the demo here83.

Fresh, New and Useful Javascript & Ajax Techniques84

7. Image Cropping Examples and Demos

UvumiTools Crop85
This simple tool gives your users the ability to create a selection area that can be used to crop an image live on your website. You can set a minimum size for the selection, real-time preview, support for HTML resizing, on and off toggles, CSS styling and more.

Fresh, New and Useful Javascript & Ajax Techniques86

Unobtrusive script that allows users to rotate, resize and crop your images, with minor changes to your website.

Fresh, New and Useful Javascript & Ajax Techniques88

Jcrop 89
Jcrop is the quick and easy way to add image-cropping functionality to your Web application. It combines the ease of use of a typical jQuery plug-in with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

Fresh, New and Useful Javascript & Ajax Techniques90

8. Image Previewing Examples and Demos

The imgPreview plug-in allows users to preview an image before clicking it and preloads the image so that when a user does click it there is no waiting time. The image preview displays in a tool tip-like box on hover. Check out the demo here92.

Fresh, New and Useful Javascript & Ajax Techniques93

FancyZoom meets Prototype94
Orderedlist rewrote FancyZoom95 in Prototype with some small changes. It now uses Apple’s rounded corners96 and supports pretty much any HTML you can throw in a <div> (images, text, Flash, etc.). It was built using Prototype and script.aculo.us; AJAX was not used, so it now works with any HTML already included on the page. Check out the demo here97.

Fresh, New and Useful Javascript & Ajax Techniques98

Dojo Zoomer99
A fully featured demo showing the power of the Dojo toolkit. The markup is valid, with two external “script” tags that load progressive enhancements to an otherwise plain list of anchors and thumbnails. Check out the demo here100.

Fresh, New and Useful Javascript & Ajax Techniques101

9. File Upload Examples and Demos

Multiple file uploader102
Allows you to create a form in which users can upload more than one file using MooTools. Check out the demo here103.

Fresh, New and Useful Javascript & Ajax Techniques104

Fancy Upload105
FancyUpload is a file-input replacement tool that features an unobtrusive multiple-file selection menu and queued upload, with an animated progress bar. It is easy to set up, server-independent and completely styleable via CSS and XHTML. It uses MooTools, so it works in all modern browsers. Check out the demo here106.

Fresh, New and Useful Javascript & Ajax Techniques107

The Extension:UploadForm is an Ext.form.BasicForm extension that allows you to easily upload multiple files to a server. The files are added to a queue first and then uploaded to the server. Check out the demo here109.

Fresh, New and Useful Javascript & Ajax Techniques110

10. Auto-Complete Examples and Demos

AutoComplete Control111
A stand-alone widget for putting an auto-complete feature on your website. Check out the demo here112.

Fresh, New and Useful Javascript & Ajax Techniques113

AutoComplete Control114
Create a Google Suggest-style filter with AutoComplete Control. Check out the demo here115.

Fresh, New and Useful Javascript & Ajax Techniques116

Autocomplete is an input field that enables users to quickly find and select a value, leveraging searching and filtering. Check out the demo here118.

Fresh, New and Useful Javascript & Ajax Techniques119

Proto! Textbox list meets auto-completion120
Fresh, New and Useful Javascript & Ajax Techniques121

11. Lightbox Examples and Demos

Lightview 122
Lightview was built to change the way you overlay content on a website. Designed to complement your content, it has the following features: smart image preloading, customization without CSS, adjustable rounded corners, no PNG required, resizing to always fit the screen and one-click slideshow.

Fresh, New and Useful Javascript & Ajax Techniques123

Sexy LightBox 2124
SexyLightBox is a more lightweight clone of the classic Lightbox. It supports all kinds of images and different sizes. Large images are automatically resized to fit the browser.

Fresh, New and Useful Javascript & Ajax Techniques125

A jQuery Lightbox clone with some great features: automatic resizing to fit large images in the window; a nice drop shadow under zoomed items; grouping of related items with navigation; inline and iframe content displays; customization through settings and CSS.

Fresh, New and Useful Javascript & Ajax Techniques127

A Lightbox clone that renders to many media formats correctly, with some nice animation effects.

Fresh, New and Useful Javascript & Ajax Techniques129

12. Form Examples and Demos

FancyForm is a powerful checkbox-replacement script that provides ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supported browsers.

Fresh, New and Useful Javascript & Ajax Techniques131

Changing form input styles on focus with jQuery132
This tutorial will help spice up your form with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery. Check out the demo here133.

Fresh, New and Useful Javascript & Ajax Techniques134

FormCheck is a MooTools class that allows you to validate a form by performing different tests before submission. Check out the demo here136.

Fresh, New and Useful Javascript & Ajax Techniques137

fValidator is a free, open-source and unobtrusive JavaScript tool for handling form validation easily.

Fresh, New and Useful Javascript & Ajax Techniques139

Using input values as hints140
Give users hints on what to input in textfields. Each field auto-clears when the user clicks or tabs to it. If nothing is entered, the hint reappears once the user moves away.

Fresh, New and Useful Javascript & Ajax Techniques141

Custom Form Elements142
This script enhances form elements including checkboxes, radio buttons, file upload, textfield, textarea, images and the select, submit and reset buttons. Check out the demo here143.

Fresh, New and Useful Javascript & Ajax Techniques144

13. Table Examples and Demos

Built in MooTools, TableGear gets your data onto a Web page. It handles submitted data both from AJAX calls and a standard post, and it returns data to the application. Check out the demo here146.

Fresh, New and Useful Javascript & Ajax Techniques147

JavaScript table sorter148
This JavaScript table-sorting script is easy to use, fast and lightweight at only 1.7 KB. It includes alternate-row formatting, header-class toggling, auto-data-type recognition and selective column sorting. It can currently sort strings, numbers and currencies. Check out the demo here149.

Fresh, New and Useful Javascript & Ajax Techniques150

DrasticGrid is an AJAX-based data grid with editing support. It uses MySQL as a data source and supports pagination, sorting, as well as editing, adding and removing records.

Fresh, New and Useful Javascript & Ajax Techniques152

A good and simple way to sort data in a table with a simple click on table headers.

Fresh, New and Useful Javascript & Ajax Techniques154

14. Worth Checking Out: Examples and Demos

Instead of using images or Flash to show your website’s text in the font you want, you can use typeface.js and just write in plain HTML and CSS, as if your visitors had the font installed locally.

Fresh, New and Useful Javascript & Ajax Techniques156

Drag and Drop Sortable Lists157
Fresh, New and Useful Javascript & Ajax Techniques158

Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on the Prototype JavaScript framework. For some extra effects, you can add script.aculo.us as well.

Fresh, New and Useful Javascript & Ajax Techniques160

jQuery alert dialogs161
This jQuery plug-in aims to replace the basic functionality of the standard JavaScript alert(), confirm() and prompt() functions. Check out the demo here162.

Fresh, New and Useful Javascript & Ajax Techniques163

Building an interactive map with jQuery instead of Flash164
This map was made to be as engaging as possible by using smooth animations and crisp graphics. Check out the final map here165.

Fresh, New and Useful Javascript & Ajax Techniques166

jQuery Fade In.Fade Out167
This effect fades an element to 30% upon page load, then brings it to full opacity when hovered over. The effect can be assigned to virtually anything on a website, whether an image, text, link or even a div. Check out the demo here168.

Fresh, New and Useful Javascript & Ajax Techniques169

Opacity change using script.aculo.us170
This tutorial explains how to use script.aculo.us to implement a nice “change opacity” effect for a layer and its contents.

Fresh, New and Useful Javascript & Ajax Techniques171

Morph effect on mouseenter/mouseleave172
In this tutorial, you’ll see how to add some amazing effects to an unordered list on mouseover with the element Method: morph and how to make a whole list item region clickable with Mootools 1.2. The goal is to turn a boring unordered list into something fun to click on. Check out the demo here173.

Fresh, New and Useful Javascript & Ajax Techniques174

This is a customizable, editable jQuery plug-in. Currently, it can convert any tag (span, div, p, etc.) to text input, password, textarea or drop-down list. You can easily extend it by adding your own input type using the “editableFactory” object.

Fresh, New and Useful Javascript & Ajax Techniques176

15. AJAX Examples and Demos

AJAX username availability checker using MooTools 177
Why make users submit forms when you can use AJAX to let them know right away if their chosen usernames are available? Here’s how to implement a username availability checker using MooTools 1.2. Check out the demo here178.

Fresh, New and Useful Javascript & Ajax Techniques179

Ajaxify is a jQuery plug-in that can convert all links on a Web page into an AJAX load and submit requests. Check out the demo here181.

Fresh, New and Useful Javascript & Ajax Techniques182

AJAX file upload183
This plug-in, for both jQuery and Prototype, allows users to easily upload multiple files without having to refresh the page. And any element can be used to open the file selection window. Check out the demo here184.

Fresh, New and Useful Javascript & Ajax Techniques185

AJAX page loads using MooTools Fx.Explode186
A nice MooTools effect: click on any Fx.Explode187 element, and it “explodes” off the screen. Click it again, and it magically reappears. Check out the demo here188.

Fresh, New and Useful Javascript & Ajax Techniques189

Animated AJAX Record Deletion Using MooTools190
Learn how to create the effect seen in WordPress, where you click to delete an article, the menu item changes to red and then disappears. Here’s how to achieve that functionality with MooTools JavaScript. Check out the demo here191.

Fresh, New and Useful Javascript & Ajax Techniques192



  1. 1 http://jquery.com
  2. 2 http://mootools.net/
  3. 3 http://www.prototypejs.org
  4. 4 http://script.aculo.us/
  5. 5 http://stephencelis.com/projects/timeframe
  6. 6 http://stephencelis.com/projects/timeframe#example_information
  7. 7 http://stephencelis.com/projects/timeframe
  8. 8 http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery
  9. 9 http://www.stefanoverna.com/wp-content/tutorials/ical_like_calendar/
  10. 10 http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery
  11. 11 http://dateslider.googlecode.com/
  12. 12 http://ajaxorized.com/dateslider/v1.3/example1.html
  13. 13 http://dateslider.googlecode.com/
  14. 14 http://woork.blogspot.com/2009/01/elegant-animated-weekly-timeline-for.html
  15. 15 http://woorktuts.110mb.com/weeklytimeline/timeline.html
  16. 16 http://woork.blogspot.com/2009/01/elegant-animated-weekly-timeline-for.html
  17. 17 http://www.frequency-decoder.com/2009/02/03/unobtrusive-date-picker-widget-v4
  18. 18 http://www.frequency-decoder.com/demo/date-picker-v4/
  19. 19 http://www.frequency-decoder.com/2009/02/03/unobtrusive-date-picker-widget-v4
  20. 20 http://www.eyecon.ro/datepicker/
  21. 21 http://www.eyecon.ro/datepicker/
  22. 22 http://tobielangel.com/examples/auto-scrolling-page-navigation
  23. 23 http://tobielangel.com/examples/auto-scrolling-page-navigation
  24. 24 http://tobielangel.com/examples/auto-scrolling-page-navigation
  25. 25 http://nettuts.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/
  26. 26 http://nettuts.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/
  27. 27 http://nettuts.com/site-builds/create-a-simple-powerful-product-highlighter-with-mootools/
  28. 28 http://nettuts.s3.amazonaws.com/022_Mootools/example.html
  29. 29 http://nettuts.com/site-builds/create-a-simple-powerful-product-highlighter-with-mootools/
  30. 30 http://aariadne.com/accordion/
  31. 31 http://www.extjs.com/
  32. 32 http://aariadne.com/accordion/
  33. 33 http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx
  34. 34 http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx
  35. 35 http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx
  36. 36 http://davidwalsh.name/jquery-homepage-mootools
  37. 37 http://davidwalsh.name/jquery-homepage-mootools
  38. 38 http://www.nickstakenburg.com/projects/prototip2/
  39. 39 http://www.nickstakenburg.com/projects/prototip2/
  40. 40 http://craigsworks.com/simpletip/
  41. 41 http://craigsworks.com/simpletip/
  42. 42 http://jqueryfordesigners.com/coda-popup-bubbles/
  43. 43 http://jqueryfordesigners.com/coda-popup-bubbles/
  44. 44 http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
  45. 45 http://buildinternet.com/live/smoothmenu/animated-menu.html
  46. 46 http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
  47. 47 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
  48. 48 http://css-tricks.com/examples/MenuFader/
  49. 49 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
  50. 50 http://abeautifulsite.net/notebook/80
  51. 51 http://abeautifulsite.net/notebook_iles/80/demo/jqueryContextMenu.html
  52. 52 http://abeautifulsite.net/notebook/80
  53. 53 http://www.flash-free.org/en/2008/04/05/e24tabmenu-%E2%80%93-menu-desplegable-ajax/
  54. 54 http://www.flash-free.org/wp-content/files/e24tabmenu/index.html
  55. 55 http://www.flash-free.org/en/2008/04/05/e24tabmenu-%E2%80%93-menu-desplegable-ajax/
  56. 56 http://developer.expressionz.in/blogs/2008/10/24/mootools-slider-with-two-knobs-double-pinned-slider-with-range-indicator/
  57. 57 http://developer.expressionz.in/downloads/mootools_double_pinned_slider_with_clipped_gutter_image_v2.2/slider_using_mootols_1.2.html
  58. 58 http://developer.expressionz.in/blogs/2008/10/24/mootools-slider-with-two-knobs-double-pinned-slider-with-range-indicator/
  59. 59 http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/
  60. 60 http://www.solutoire.com/experiments/scrollbar/index.html
  61. 61 http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/
  62. 62 http://woork.blogspot.com/2009/01/ultra-versatile-slider-for-websites.html
  63. 63 http://woorktuts.110mb.com/art_of_reuse_code/index4.html
  64. 64 http://woork.blogspot.com/2009/01/ultra-versatile-slider-for-websites.html
  65. 65 http://og5.net/christoph/article/A_better_Pagination
  66. 66 http://og5.net/christoph/Scripts/Pagination/index.php?start=10
  67. 67 http://og5.net/christoph/article/A_better_Pagination
  68. 68 http://www.efectorelativo.net/laboratory/noobSlide/
  69. 69 http://valums.com/ajax-upload/
  70. 70 http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
  71. 71 http://cssglobe.com/lab/easyslider1.5/05.html
  72. 72 http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
  73. 73 http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
  74. 74 http://buildinternet.com/live/supersized/
  75. 75 http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
  76. 76 http://www.scriptiny.com/2008/12/javascript-slideshow/
  77. 77 http://sandbox.scriptiny.com/javascript-slideshow/
  78. 78 http://www.scriptiny.com/2008/12/javascript-slideshow/
  79. 79 http://css-tricks.com/moving-boxes/
  80. 80 http://css-tricks.com/examples/MovingBoxes/
  81. 81 http://css-tricks.com/moving-boxes/
  82. 82 http://miedlar.com/dev/carousel/
  83. 83 http://miedlar.com/dev/carousel/Prototype_1_6_Sample.html
  84. 84 http://miedlar.com/dev/carousel/
  85. 85 http://tools.uvumi.com/crop.html
  86. 86 http://tools.uvumi.com/crop.html
  87. 87 http://kroppr.rborn.info/
  88. 88 http://kroppr.rborn.info/
  89. 89 http://deepliquid.com/content/Jcrop.html
  90. 90 http://deepliquid.com/content/Jcrop.html
  91. 91 http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/
  92. 92 http://james.padolsey.com/demos/imgPreview/full/
  93. 93 http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/
  94. 94 http://orderedlist.com/articles/fancyzoom-meet-prototype
  95. 95 http://www.cabel.name/2008/02/fancyzoom-10.html
  96. 96 http://www.apple.com/ilife/iphoto/
  97. 97 http://orderedlist.com/demos/fancy-zoom/
  98. 98 http://orderedlist.com/articles/fancyzoom-meet-prototype
  99. 99 http://dojocampus.org/content/2009/01/19/dojo-zoomer/
  100. 100 http://dante.dojotoolkit.org/dojobox/anon/release/dojo/demos/cropper/demo.html
  101. 101 http://dojocampus.org/content/2009/01/19/dojo-zoomer/
  102. 102 http://the-stickman.com/web-development/javascript/multiple-file-uploader-mootools-version/
  103. 103 http://the-stickman.com/files/mootools/multiupload/
  104. 104 http://the-stickman.com/web-development/javascript/multiple-file-uploader-mootools-version/
  105. 105 http://digitarald.de/project/fancyupload/
  106. 106 http://digitarald.de/project/fancyupload/2-0/showcase/photoqueue/
  107. 107 http://digitarald.de/project/fancyupload/
  108. 108 http://extjs.com/learn/Extension:UploadForm
  109. 109 http://aariadne.com/uploadform/
  110. 110 http://extjs.com/learn/Extension:UploadForm
  111. 111 http://capxous.com/
  112. 112 http://capxous.com/try.html
  113. 113 http://capxous.com/
  114. 114 http://mattberseth.com/blog/2007/12/creating_a_google_suggest_styl.html
  115. 115 http://mattberseth2.com/datatable_with_autocomplete_filter/
  116. 116 http://mattberseth.com/blog/2007/12/creating_a_google_suggest_styl.html
  117. 117 http://plugins.jquery.com/project/autocompletex
  118. 118 http://jquery.bassistance.de/autocomplete/demo/
  119. 119 http://plugins.jquery.com/project/autocompletex
  120. 120 http://www.interiders.com/2008/02/11/prototextboxlist-meets-autocompletion/
  121. 121 http://www.interiders.com/2008/02/11/prototextboxlist-meets-autocompletion/
  122. 122 http://www.nickstakenburg.com/projects/lightview/
  123. 123 http://www.nickstakenburg.com/projects/lightview/
  124. 124 http://www.coders.me/ejemplos/sexy-lightbox-2/
  125. 125 http://www.coders.me/ejemplos/sexy-lightbox-2/
  126. 126 http://fancy.klade.lv/
  127. 127 http://fancy.klade.lv/
  128. 128 http://stickmanlabs.com/lightwindow/
  129. 129 http://stickmanlabs.com/lightwindow/
  130. 130 http://lipidity.com/fancy-form/
  131. 131 http://lipidity.com/fancy-form/
  132. 132 http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/
  133. 133 http://buildinternet.com/live/jqueryform/jqueryform1.php
  134. 134 http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/
  135. 135 http://mootools.floor.ch/en/demos/formcheck/index.htm
  136. 136 http://mootools.floor.ch/en/demos/formcheck/index.htm
  137. 137 http://mootools.floor.ch/en/demos/formcheck/index.htm
  138. 138 http://zendold.lojcomm.com.br/fvalidator/
  139. 139 http://zendold.lojcomm.com.br/fvalidator/
  140. 140 http://mir.aculo.us/2009/1/7/using-input-values-as-hints-the-easy-way
  141. 141 http://mir.aculo.us/2009/1/7/using-input-values-as-hints-the-easy-way
  142. 142 http://customformelements.net/
  143. 143 http://customformelements.net/demopage.php
  144. 144 http://customformelements.net/
  145. 145 http://www.andrewplummer.com/code/tablegear/
  146. 146 http://www.andrewplummer.com/demos/tablegear/
  147. 147 http://www.andrewplummer.com/code/tablegear/
  148. 148 http://www.scriptiny.com/2008/11/javascript-table-sorter/
  149. 149 http://sandbox.scriptiny.com/sorter/
  150. 150 http://www.scriptiny.com/2008/11/javascript-table-sorter/
  151. 151 http://www.drasticdata.nl/DDDrasticGrid.php
  152. 152 http://www.drasticdata.nl/DDDrasticGrid.php
  153. 153 http://www.kryogenix.org/code/browser/sorttable/
  154. 154 http://www.kryogenix.org/code/browser/sorttable/
  155. 155 http://typeface.neocracy.org/
  156. 156 http://typeface.neocracy.org/
  157. 157 http://tool-man.org/examples/sorting.html
  158. 158 http://tool-man.org/examples/sorting.html
  159. 159 http://www.nickstakenburg.com/projects/starbox/
  160. 160 http://www.nickstakenburg.com/projects/starbox/
  161. 161 http://abeautifulsite.net/notebook/87
  162. 162 http://abeautifulsite.net/notebook_files/87/demo/
  163. 163 http://abeautifulsite.net/notebook/87
  164. 164 http://www.newmediacampaigns.com/page/jquery-vs-flash-for-interactive-map
  165. 165 http://ncmarinescience.com/
  166. 166 http://www.newmediacampaigns.com/page/jquery-vs-flash-for-interactive-map
  167. 167 http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/
  168. 168 http://www.hv-designs.co.uk/tutorials/jquery/image.html
  169. 169 http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/
  170. 170 http://woork.blogspot.com/2008/02/opacity-change-using-scriptaculous.html
  171. 171 http://woork.blogspot.com/2008/02/opacity-change-using-scriptaculous.html
  172. 172 http://web-kreation.com/index.php/tutorials/morph-effect-on-mouseenter-mouseleave-with-mootools-12/
  173. 173 http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/
  174. 174 http://web-kreation.com/index.php/tutorials/morph-effect-on-mouseenter-mouseleave-with-mootools-12/
  175. 175 http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html
  176. 176 http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html
  177. 177 http://davidwalsh.name/ajax-username-availability-checker-mootools
  178. 178 http://davidwalsh.name/dw-content/ajax-username-check.php
  179. 179 http://valums.com/ajax-upload/
  180. 180 http://maxblog.me/ajaxify/
  181. 181 http://maxblog.me/ajaxify/demo.php
  182. 182 http://maxblog.me/ajaxify/
  183. 183 http://valums.com/ajax-upload/
  184. 184 http://valums.com/wp-content/uploads/ajax-upload/demo-prototype.htm
  185. 185 http://valums.com/ajax-upload/
  186. 186 http://davidwalsh.name/ajax-mootools-fx-explode
  187. 187 http://mootools.kassens.net/fxexplode/
  188. 188 http://davidwalsh.name/dw-content/fx.explode.php
  189. 189 http://davidwalsh.name/ajax-mootools-fx-explode
  190. 190 http://davidwalsh.name/animated-ajax-record-deletion-mootools
  191. 191 http://davidwalsh.name/dw-content/mootools-record-delete.php
  192. 192 http://davidwalsh.name/animated-ajax-record-deletion-mootools

↑ Back to top Tweet itShare on Facebook

Noura Yehia is a Web designer and blogger and the former owner of noupe.com. If you want to connect with the author, you can follow her on Twitter.

  1. 1

    while 1=1
    rss = rss + 1
    end while
    what’s going on? your rss is crashed.

  2. 102

    Very helpful!

  3. 203

    the rss is broken/hacked, I would say.

  4. 304

    Smashing + Hacked = Smacked!

  5. 405

    I start to hate the Smashing RSS feed. Their system seems to be screwed. They changed the feed provider and the problems still exist. It is a shame that a site that also lectures other sites how to do their sites, can’t handle their own.

  6. 506

    Appreciate for this great value added posting.

  7. 607

    Very nice collection.Thx!!

  8. 708

    Very nice codes, there are all types of JS and ajax available.. thanks to author…

  9. 809

    These are awesome Techniques

    Thanx for that


  10. 910

    Amazing!!! thanxs in billions..

  11. 1011

    George Serradinho

    March 18, 2009 12:49 am

    Hi and thanks for the info, there sure are loads of things you can do with Ajax and JS.

  12. 1112

    Khalid Laariche

    March 26, 2009 3:48 am

    Great resources as usual. Thanks!

  13. 1213

    Some really inspirational stuff. Thanks

  14. 1314

    it is so good !

  15. 1415

    good good

  16. 1516

    Kool Resources..
    Even i like the jquery more..

  17. 1617

    Awesome. Kudos.

  18. 1718

    Great useful stuff. Awesome one.

  19. 1819

    Have you checked out Spry? For folks who have trouble with JavaScript, it is a wonder and very easy to use. For you designers who use Dreamweaver it is even easier with the built-in wizards.
    Check out Spry

  20. 1920

    Great post. Thank you. I would add to the validation section VanadiumJS.com. This is declarative, require no codding client-side validation toolkit which can be easly integrated with any server-side technology via json.

  21. 2021

    this is cool…!, thx :D

  22. 2122

    Gracias por tal aporte vi la tecnología que usan google , fecebook y quise hacer algo asi, bien por los script .

  23. 2223

    WOW.. What a great set of resources :) This is going into the favorites ASAP!

  24. 2324

    wish i knew all! great post! all u need is here. cheers mate

  25. 2425

    Nice roundup of some of the options out there.

    Keep the ideas coming….

  26. 2526

    it is so good !

  27. 2627

    Thanks for a great article

  28. 2728

    Girish Audichya

    March 5, 2010 2:29 am

    awesome examples!
    it is very useful, user friendly and Stylish look

  29. 2829

    Great collection…

  30. 2930

    Just one word to say….. AWESOME :)

  31. 3031

    want to use the various features of Ajax

  32. 3132

    Thank you for nice ajax techniques.

  33. 3233

    reaaly ! what a great collection, thanks for sharing.

  34. 3334

    Thanks a lot for sharing those techniques :)

  35. 3435

    So Awesome, Thanks so much

  36. 3536

    Syed Abrar Haider

    April 27, 2010 11:13 pm

    Thanks Ajax Menu Was very helpful for me

  37. 3637

    wow.. these freebies are great and i loved it a lot..

    Thankzzzz a lot for this list…

  38. 3738

    Another cool advansed table-sorter – http://www.datatables.net/

  39. 3839
  40. 3940

    may be you should stick to kfc?

  41. 4041

    Hi I want to use http://www.eyecon.ro/datepicker/ this date picker but in that calendar I want to start date from current months t next 12 months and one row only showing 3 months per row.please help me

  42. 4142

    Amazing javascript list !!!


↑ Back to top