Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

70 New, Useful AJAX And JavaScript Techniques

Advertisement

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 Link

Timeframe5
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 jQuery
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 here.

Fresh, New and Useful Javascript & Ajax Techniques

Dateslider8
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 here9.

Fresh, New and Useful Javascript & Ajax Techniques10

Elegant animated weekly timeline11
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 here12.

Fresh, New and Useful Javascript & Ajax Techniques13

Unobtrusive datePicker widget
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 here.

Fresh, New and Useful Javascript & Ajax Techniques

Date Picker14
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 Techniques15

2. Navigation Examples and Demos Link

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

Fresh, New and Useful Javascript & Ajax Techniques18

Creating a “filterable” portfolio with jQuery19
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 Techniques20

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

Fresh, New and Useful Javascript & Ajax Techniques23

Ext Accordion
The Accordion widget and its InfoPanel are components that use the Ext JS Library24. 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 Techniques

jQuery ListNav Plug-In25
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 here26.

Fresh, New and Useful Javascript & Ajax Techniques27

3. Tool Tip Examples and Demos Link

Duplicate the jQuery home page tool tips using MooTools28
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 Techniques29

Prototip30
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 Techniques31

Simpletip
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 Techniques

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

Fresh, New and Useful Javascript & Ajax Techniques

4. Menu Examples and Demos Link

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

Fresh, New and Useful Javascript & Ajax Techniques34

Fading Menu – Replacing Content35
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 here36.

Fresh, New and Useful Javascript & Ajax Techniques37

jQuery Context Menu plug-in38
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 here.

Fresh, New and Useful Javascript & Ajax Techniques39

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

Fresh, New and Useful Javascript & Ajax Techniques

5. Slider Examples and Demos Link

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

Fresh, New and Useful Javascript & Ajax Techniques42

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

Fresh, New and Useful Javascript & Ajax Techniques45

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

Fresh, New and Useful Javascript & Ajax Techniques48

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

Fresh, New and Useful Javascript & Ajax Techniques51

6. Slideshow Examples and Demos Link

noobSlide52
Another slider plug-in created using MooTools.

Fresh, New and Useful Javascript & Ajax Techniques

Easy Slider53
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 here54.

Fresh, New and Useful Javascript & Ajax Techniques55

Supersized – full-screen background/slideshow jQuery plug-in56
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 here57.

Fresh, New and Useful Javascript & Ajax Techniques58

Animated JavaScript slideshow59
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 here60.

Fresh, New and Useful Javascript & Ajax Techniques61

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

Fresh, New and Useful Javascript & Ajax Techniques64

Prototype Carousel with script.aculo.us 65
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 here66.

Fresh, New and Useful Javascript & Ajax Techniques67

7. Image Cropping Examples and Demos Link

UvumiTools Crop68
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 Techniques69

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

Fresh, New and Useful Javascript & Ajax Techniques71

Jcrop 72
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 Techniques73

8. Image Previewing Examples and Demos Link

imgPreview74
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 here75.

Fresh, New and Useful Javascript & Ajax Techniques76

FancyZoom meets Prototype
Orderedlist rewrote FancyZoom77 in Prototype with some small changes. It now uses Apple’s rounded corners78 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 here.

Fresh, New and Useful Javascript & Ajax Techniques

Dojo Zoomer
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 here79.

Fresh, New and Useful Javascript & Ajax Techniques

9. File Upload Examples and Demos Link

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

Fresh, New and Useful Javascript & Ajax Techniques82

Fancy Upload83
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 here84.

Fresh, New and Useful Javascript & Ajax Techniques85

Extension:UploadForm86
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 here.

Fresh, New and Useful Javascript & Ajax Techniques87

10. Auto-Complete Examples and Demos Link

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

Fresh, New and Useful Javascript & Ajax Techniques90

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

Fresh, New and Useful Javascript & Ajax Techniques

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

Fresh, New and Useful Javascript & Ajax Techniques93

Proto! Textbox list meets auto-completion
Fresh, New and Useful Javascript & Ajax Techniques

11. Lightbox Examples and Demos Link

Lightview 94
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 Techniques95

Sexy LightBox 296
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 Techniques97

FancyBox98
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 Techniques99

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

Fresh, New and Useful Javascript & Ajax Techniques

12. Form Examples and Demos Link

FancyForm100
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 Techniques101

Changing form input styles on focus with jQuery102
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 here103.

Fresh, New and Useful Javascript & Ajax Techniques104

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

Fresh, New and Useful Javascript & Ajax Techniques107

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

Fresh, New and Useful Javascript & Ajax Techniques109

Using input values as hints110
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 Techniques111

Custom Form Elements112
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 here113.

Fresh, New and Useful Javascript & Ajax Techniques114

13. Table Examples and Demos Link

TableGear
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 here.

Fresh, New and Useful Javascript & Ajax Techniques

JavaScript table sorter115
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 here116.

Fresh, New and Useful Javascript & Ajax Techniques117

DrasticGrid118
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 Techniques119

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

Fresh, New and Useful Javascript & Ajax Techniques121

14. Worth Checking Out: Examples and Demos Link

typeface.js
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 Techniques

Drag and Drop Sortable Lists122
Fresh, New and Useful Javascript & Ajax Techniques123

Starbox124
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 Techniques125

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

Fresh, New and Useful Javascript & Ajax Techniques128

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

Fresh, New and Useful Javascript & Ajax Techniques131

jQuery Fade In.Fade Out
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 here.

Fresh, New and Useful Javascript & Ajax Techniques

Opacity change using script.aculo.us132
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 Techniques133

Morph effect on mouseenter/mouseleave134
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 here135.

Fresh, New and Useful Javascript & Ajax Techniques136

Editable
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 Techniques

15. AJAX Examples and Demos Link

AJAX username availability checker using MooTools 137
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 here138.

Fresh, New and Useful Javascript & Ajax Techniques

Ajaxify
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 here.

Fresh, New and Useful Javascript & Ajax Techniques

AJAX file upload
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 here.

Fresh, New and Useful Javascript & Ajax Techniques

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

Fresh, New and Useful Javascript & Ajax Techniques142

Animated AJAX Record Deletion Using MooTools143
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 here144.

Fresh, New and Useful Javascript & Ajax Techniques145

(al)

Footnotes Link

  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://dateslider.googlecode.com/
  9. 9 http://ajaxorized.com/dateslider/v1.3/example1.html
  10. 10 http://dateslider.googlecode.com/
  11. 11 http://woork.blogspot.com/2009/01/elegant-animated-weekly-timeline-for.html
  12. 12 http://woorktuts.110mb.com/weeklytimeline/timeline.html
  13. 13 http://woork.blogspot.com/2009/01/elegant-animated-weekly-timeline-for.html
  14. 14 http://www.eyecon.ro/datepicker/
  15. 15 http://www.eyecon.ro/datepicker/
  16. 16 http://tobielangel.com/examples/auto-scrolling-page-navigation
  17. 17 http://tobielangel.com/examples/auto-scrolling-page-navigation
  18. 18 http://tobielangel.com/examples/auto-scrolling-page-navigation
  19. 19 http://nettuts.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/
  20. 20 http://nettuts.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/
  21. 21 http://nettuts.com/site-builds/create-a-simple-powerful-product-highlighter-with-mootools/
  22. 22 http://nettuts.s3.amazonaws.com/022_Mootools/example.html
  23. 23 http://nettuts.com/site-builds/create-a-simple-powerful-product-highlighter-with-mootools/
  24. 24 http://www.extjs.com/
  25. 25 http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx
  26. 26 http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx
  27. 27 http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx
  28. 28 http://davidwalsh.name/jquery-homepage-mootools
  29. 29 http://davidwalsh.name/jquery-homepage-mootools
  30. 30 http://www.nickstakenburg.com/projects/prototip2/
  31. 31 http://www.nickstakenburg.com/projects/prototip2/
  32. 32 http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
  33. 33 http://buildinternet.com/live/smoothmenu/animated-menu.html
  34. 34 http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
  35. 35 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
  36. 36 http://css-tricks.com/examples/MenuFader/
  37. 37 http://css-tricks.com/learning-jquery-fading-menu-replacing-content/
  38. 38 http://abeautifulsite.net/notebook/80
  39. 39 http://abeautifulsite.net/notebook/80
  40. 40 http://developer.expressionz.in/blogs/2008/10/24/mootools-slider-with-two-knobs-double-pinned-slider-with-range-indicator/
  41. 41 http://developer.expressionz.in/downloads/mootools_double_pinned_slider_with_clipped_gutter_image_v2.2/slider_using_mootols_1.2.html
  42. 42 http://developer.expressionz.in/blogs/2008/10/24/mootools-slider-with-two-knobs-double-pinned-slider-with-range-indicator/
  43. 43 http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/
  44. 44 http://www.solutoire.com/experiments/scrollbar/index.html
  45. 45 http://solutoire.com/2008/03/10/mootools-css-styled-scrollbar/
  46. 46 http://woork.blogspot.com/2009/01/ultra-versatile-slider-for-websites.html
  47. 47 http://woorktuts.110mb.com/art_of_reuse_code/index4.html
  48. 48 http://woork.blogspot.com/2009/01/ultra-versatile-slider-for-websites.html
  49. 49 http://og5.net/christoph/article/A_better_Pagination
  50. 50 http://og5.net/christoph/Scripts/Pagination/index.php?start=10
  51. 51 http://og5.net/christoph/article/A_better_Pagination
  52. 52 http://www.efectorelativo.net/laboratory/noobSlide/
  53. 53 http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
  54. 54 http://cssglobe.com/lab/easyslider1.5/05.html
  55. 55 http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
  56. 56 http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
  57. 57 http://buildinternet.com/live/supersized/
  58. 58 http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
  59. 59 http://www.scriptiny.com/2008/12/javascript-slideshow/
  60. 60 http://sandbox.scriptiny.com/javascript-slideshow/
  61. 61 http://www.scriptiny.com/2008/12/javascript-slideshow/
  62. 62 http://css-tricks.com/moving-boxes/
  63. 63 http://css-tricks.com/examples/MovingBoxes/
  64. 64 http://css-tricks.com/moving-boxes/
  65. 65 http://miedlar.com/dev/carousel/
  66. 66 http://miedlar.com/dev/carousel/Prototype_1_6_Sample.html
  67. 67 http://miedlar.com/dev/carousel/
  68. 68 http://tools.uvumi.com/crop.html
  69. 69 http://tools.uvumi.com/crop.html
  70. 70 http://kroppr.rborn.info/
  71. 71 http://kroppr.rborn.info/
  72. 72 http://deepliquid.com/content/Jcrop.html
  73. 73 http://deepliquid.com/content/Jcrop.html
  74. 74 http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/
  75. 75 http://james.padolsey.com/demos/imgPreview/full/
  76. 76 http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/
  77. 77 http://www.cabel.name/2008/02/fancyzoom-10.html
  78. 78 http://www.apple.com/ilife/iphoto/
  79. 79 http://dante.dojotoolkit.org/dojobox/anon/release/dojo/demos/cropper/demo.html
  80. 80 http://the-stickman.com/web-development/javascript/multiple-file-uploader-mootools-version/
  81. 81 http://the-stickman.com/files/mootools/multiupload/
  82. 82 http://the-stickman.com/web-development/javascript/multiple-file-uploader-mootools-version/
  83. 83 http://digitarald.de/project/fancyupload/
  84. 84 http://digitarald.de/project/fancyupload/2-0/showcase/photoqueue/
  85. 85 http://digitarald.de/project/fancyupload/
  86. 86 http://extjs.com/learn/Extension:UploadForm
  87. 87 http://extjs.com/learn/Extension:UploadForm
  88. 88 http://capxous.com/
  89. 89 http://capxous.com/try.html
  90. 90 http://capxous.com/
  91. 91 http://mattberseth2.com/datatable_with_autocomplete_filter/
  92. 92 http://plugins.jquery.com/project/autocompletex
  93. 93 http://plugins.jquery.com/project/autocompletex
  94. 94 http://www.nickstakenburg.com/projects/lightview/
  95. 95 http://www.nickstakenburg.com/projects/lightview/
  96. 96 http://www.coders.me/ejemplos/sexy-lightbox-2/
  97. 97 http://www.coders.me/ejemplos/sexy-lightbox-2/
  98. 98 http://fancy.klade.lv/
  99. 99 http://fancy.klade.lv/
  100. 100 http://lipidity.com/fancy-form/
  101. 101 http://lipidity.com/fancy-form/
  102. 102 http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/
  103. 103 http://buildinternet.com/live/jqueryform/jqueryform1.php
  104. 104 http://buildinternet.com/2009/01/changing-form-input-styles-on-focus-with-jquery/
  105. 105 http://mootools.floor.ch/en/demos/formcheck/index.htm
  106. 106 http://mootools.floor.ch/en/demos/formcheck/index.htm
  107. 107 http://mootools.floor.ch/en/demos/formcheck/index.htm
  108. 108 http://zendold.lojcomm.com.br/fvalidator/
  109. 109 http://zendold.lojcomm.com.br/fvalidator/
  110. 110 http://mir.aculo.us/2009/1/7/using-input-values-as-hints-the-easy-way
  111. 111 http://mir.aculo.us/2009/1/7/using-input-values-as-hints-the-easy-way
  112. 112 http://customformelements.net/
  113. 113 http://customformelements.net/demopage.php
  114. 114 http://customformelements.net/
  115. 115 http://www.scriptiny.com/2008/11/javascript-table-sorter/
  116. 116 http://sandbox.scriptiny.com/sorter/
  117. 117 http://www.scriptiny.com/2008/11/javascript-table-sorter/
  118. 118 http://www.drasticdata.nl/DDDrasticGrid.php
  119. 119 http://www.drasticdata.nl/DDDrasticGrid.php
  120. 120 http://www.kryogenix.org/code/browser/sorttable/
  121. 121 http://www.kryogenix.org/code/browser/sorttable/
  122. 122 http://tool-man.org/examples/sorting.html
  123. 123 http://tool-man.org/examples/sorting.html
  124. 124 http://www.nickstakenburg.com/projects/starbox/
  125. 125 http://www.nickstakenburg.com/projects/starbox/
  126. 126 http://abeautifulsite.net/notebook/87
  127. 127 http://abeautifulsite.net/notebook_files/87/demo/
  128. 128 http://abeautifulsite.net/notebook/87
  129. 129 http://www.newmediacampaigns.com/page/jquery-vs-flash-for-interactive-map
  130. 130 http://ncmarinescience.com/
  131. 131 http://www.newmediacampaigns.com/page/jquery-vs-flash-for-interactive-map
  132. 132 http://woork.blogspot.com/2008/02/opacity-change-using-scriptaculous.html
  133. 133 http://woork.blogspot.com/2008/02/opacity-change-using-scriptaculous.html
  134. 134 http://web-kreation.com/index.php/tutorials/morph-effect-on-mouseenter-mouseleave-with-mootools-12/
  135. 135 http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/
  136. 136 http://web-kreation.com/index.php/tutorials/morph-effect-on-mouseenter-mouseleave-with-mootools-12/
  137. 137 http://davidwalsh.name/ajax-username-availability-checker-mootools
  138. 138 http://davidwalsh.name/dw-content/ajax-username-check.php
  139. 139 http://davidwalsh.name/ajax-mootools-fx-explode
  140. 140 http://mootools.kassens.net/fxexplode/
  141. 141 http://davidwalsh.name/dw-content/fx.explode.php
  142. 142 http://davidwalsh.name/ajax-mootools-fx-explode
  143. 143 http://davidwalsh.name/animated-ajax-record-deletion-mootools
  144. 144 http://davidwalsh.name/dw-content/mootools-record-delete.php
  145. 145 http://davidwalsh.name/animated-ajax-record-deletion-mootools
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

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

Advertisement
  1. 1

    Kyle Simpson

    March 8, 2009 5:50 pm

    I have built a tool called ‘flXHR’ http://flxhr.flensed.com/ which is a javascript+invisible flash replacement for native XHR. It implements an identical API and so can be dropped into any existing page and code, including major JS frameworks like jQuery, Dojo, Prototype, and Ext, without any additional code changes.

    But, because it uses flash invisibly, it has the ability to do cross-domain Ajax calls within the context of normal native XHR calls. The only requirement is that the target server has a server opt-in policy (“crossdomain.xml”), of which most open web-service API’s do have.

    Adobe reports that 99% of computers worldwide have some recent version of flash installed, and flXHR has in it code logic to automatically, inline prompt users to upgrade if their flash plugin is out-of-date. This makes a robust solution wherein almost everyone will be able to take advantage of cross-domain Ajax in a stable, secure, and efficient way (as opposed to various other workarounds which are both insecure and inefficient).

    0
  2. 2

    :D:D Very helpful, thank you.

    -2
  3. 3

    Thanks for including my tutorial. much appreciated

    0
  4. 4

    Nice Tips and Techniques Noura…. Thanks for sharing.

    0
  5. 5

    Elijah Grey

    March 8, 2009 2:47 pm

    “70 New, Useful Asynchronous JavaScript and XML and JavaScript Techniques” doesn’t quite sound right to me. You don’t need to say JavaScript twice.

    1
  6. 6

    Great resources as usual. Thanks!

    0
  7. 7

    African Boy

    March 8, 2009 2:55 pm

    Nice resource. Though I always find it hard working with Javascript, no matter how much I try

    -1
  8. 8

    awesome.. greatly appreciated

    0
  9. 9

    Fantastic work! Really appreciate the great effort you guys make with these lists.

    0
  10. 10

    Jewen Soyterkijn

    March 8, 2009 3:09 pm

    tyvm Noura! ty Smashingmagazine! Wonderful resource once again!

    I feel smashed.

    0
  11. 11

    Very nice! Thx!

    0
  12. 12

    Great resource roundup! Thanks for the three includes!

    0
  13. 13

    Is there no creativity left?
    I’m looking back a couple of months, and I see much better AJAX techniques than now….these are just copies that bring nothing new…weak :|

    -1
  14. 14

    justin marcus

    March 8, 2009 3:19 pm

    Thanks for the list, but there are no new items here. This is the same stuff as usual.

    0
  15. 15

    Azrie Muzaffar

    March 8, 2009 3:22 pm

    Excellent! Love this.

    1
  16. 16

    For those of us who aren’t fluent in AJAX this is a great leap forward

    0
  17. 17

    Andy Gongea

    March 8, 2009 3:43 pm

    Nice collection. Soon we will see articles like: 359 CSS ….

    This means the web is getting bigger and innovation is still here.
    Keep up the good work!

    0
  18. 18

    That slider pagination at the end of section 5 looks like it would be a pain to use. I’ll take some “ugly numbers” that I can easily click on, over trying to nudge that slider just enough to get to the next page.

    0
  19. 19

    Wow. I love them! Amazing collection.

    0
  20. 20

    Sam Granger

    March 8, 2009 5:03 pm

    New? Are you kidding me? Quite a few of these are months and months old. If not, maybe some even a year or more!

    0
  21. 21

    Juan Cherry

    March 8, 2009 5:32 pm

    Nice listing!

    0
  22. 22

    I love it ;)

    0
  23. 23

    There is some good stuff here, not all new, but still some good stuff.

    Only, I wonder if you might be able to improve on these “(big number) of the (best|newest|whatever) (topic)” posts by breaking them up into a number of articles and maybe putting some more involved text around them. Or even better distilling them down to “(small number) of the (best|newest|whatever) (topic)”, and going into some detail on why they are the best.

    Just a suggestion.

    0
  24. 24

    Another excellent list to bookmark! :) Thanks SM

    0
  25. 25

    Very nice collection.

    0
  26. 26

    Thanks

    0
  27. 27

    Peter Richardson

    March 8, 2009 8:19 pm

    Very helpful, but I am still looking for a way to make reading RSS and displaying it on my page better looking and more customizable. Right now its just ugly old php/css.

    Any ideas?

    1
  28. 28

    Spiffy stuff. Thanks for the round up.

    -1
  29. 29

    Abdul Akbar

    March 8, 2009 9:25 pm

    I think for me as a designer this is a Great resource.
    I will add a link for this post on my Blog.
    This post will help me for long time.

    0
  30. 30

    I would really prefer you had used “Tools” instead of “Techniques” in your title.

    These are almost all pre-fab library functions. I was expecting to find code snippets that I could learn from or modify, based on my own needs.

    The tools are interesting, but because they come from many libraries, it is totally impractical to adopt all of them. You just don’t want to mix too many libraries.

    0
  31. 31

    Incredibly helpful list. Thank you!

    0
  32. 32

    Great ARTICLE!!!
    Very Helpful!
    TNX!!!!!

    0
  33. 33

    awesome really help ful

    0
  34. 34

    jQuery, MooTools, Prototype and script.aculo.us are used in these examples, so every taste gets its due.

    No YUI? Really? That’s pretty sad imo.

    1
  35. 35

    another smashing article!
    very very usefull.

    let’s stumble! ;)


    @heziabrass

    0
  36. 36

    Allahverdi Sefihanov

    March 8, 2009 11:37 pm

    really useful post… thanks gicks

    0
  37. 37

    Another croppingtool with jQuery: http://odyniec.net/projects/imgareaselect/

    0
  38. 38

    Very useful article, thanks

    0
  39. 39

    Collection of design.
    Thanks.

    0
  40. 40

    Its awesome Man….

    0

↑ Back to top