Smashing Magazine - we smash you with the information that will make your life easier. really.

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.

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

1. Calendars and Timelines: Examples and Demos

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

Ajax-js-techniques46 in 70 New, Useful AJAX And JavaScript Techniques

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.

Ajax-js-techniques32 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques23 in 70 New, Useful AJAX And JavaScript Techniques

Elegant animated weekly timeline
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 here.

Ajax-js-techniques19 in 70 New, Useful AJAX And JavaScript Techniques

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.

Ajax-js-techniques5 in 70 New, Useful AJAX And JavaScript Techniques

Date Picker
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.

Ajax-js-techniques4 in 70 New, Useful AJAX And JavaScript Techniques

2. Navigation Examples and Demos

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

Ajax-js-techniques22 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques7 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques12 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques48 in 70 New, Useful AJAX And JavaScript Techniques

jQuery ListNav Plug-In
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 here.

Ajax-js-techniques2 in 70 New, Useful AJAX And JavaScript Techniques

3. Tool Tip Examples and Demos

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

Ajax-js-techniques66 in 70 New, Useful AJAX And JavaScript Techniques

Prototip
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).

Ajax-js-techniques43 in 70 New, Useful AJAX And JavaScript Techniques

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.

Ajax-js-techniques6 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques65 in 70 New, Useful AJAX And JavaScript Techniques

4. Menu Examples and Demos

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

Ajax-js-techniques53 in 70 New, Useful AJAX And JavaScript Techniques

Fading Menu – Replacing Content
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 here.

Ajax-js-techniques11 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques51 in 70 New, Useful AJAX And JavaScript Techniques

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.

Ajax-js-techniques37 in 70 New, Useful AJAX And JavaScript Techniques

5. Slider Examples and Demos

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

Ajax-js-techniques54 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques25 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques20 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques40 in 70 New, Useful AJAX And JavaScript Techniques

6. Slideshow Examples and Demos

noobSlide
Another slider plug-in created using MooTools.

Ajax-js-techniques56 in 70 New, Useful AJAX And JavaScript Techniques

Easy Slider
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 here.

Ajax-js-techniques52 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques8 in 70 New, Useful AJAX And JavaScript Techniques

Animated JavaScript slideshow
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 here.

Ajax-js-techniques41 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques36 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques38 in 70 New, Useful AJAX And JavaScript Techniques

7. Image Cropping Examples and Demos

UvumiTools Crop
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.

Ajax-js-techniques29 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques30 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques31 in 70 New, Useful AJAX And JavaScript Techniques

8. Image Previewing Examples and Demos

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

Ajax-js-techniques1 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques3 in 70 New, Useful AJAX And JavaScript 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 here.

Ajax-js-techniques16 in 70 New, Useful AJAX And JavaScript Techniques

9. File Upload Examples and Demos

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

Ajax-js-techniques18 in 70 New, Useful AJAX And JavaScript Techniques

Fancy Upload
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 here.

Ajax-js-techniques17 in 70 New, Useful AJAX And JavaScript Techniques

Extension:UploadForm
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.

Ajax-js-techniques69 in 70 New, Useful AJAX And JavaScript Techniques

10. Auto-Complete Examples and Demos

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

Ajax-js-techniques35 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques34 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques67 in 70 New, Useful AJAX And JavaScript Techniques

Proto! Textbox list meets auto-completion
Ajax-js-techniques68 in 70 New, Useful AJAX And JavaScript Techniques

11. Lightbox Examples and Demos

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

Ajax-js-techniques45 in 70 New, Useful AJAX And JavaScript Techniques

Sexy LightBox 2
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.

Ajax-js-techniques26 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques63 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques64 in 70 New, Useful AJAX And JavaScript Techniques

12. Form Examples and Demos

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

Ajax-js-techniques49 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques9 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques15 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques27 in 70 New, Useful AJAX And JavaScript Techniques

Using input values as hints
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.

Ajax-js-techniques28 in 70 New, Useful AJAX And JavaScript Techniques

Custom Form Elements
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 here.

Ajax-js-techniques24 in 70 New, Useful AJAX And JavaScript Techniques

13. Table Examples and Demos

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.

Ajax-js-techniques58 in 70 New, Useful AJAX And JavaScript Techniques

JavaScript table sorter
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 here.

Ajax-js-techniques42 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques60 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques62 in 70 New, Useful AJAX And JavaScript Techniques

14. Worth Checking Out: Examples and Demos

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.

Ajax-js-techniques70 in 70 New, Useful AJAX And JavaScript Techniques

Drag and Drop Sortable Lists
Ajax-js-techniques47 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques44 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques50 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques59 in 70 New, Useful AJAX And JavaScript Techniques

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.

Ajax-js-techniques10 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques39 in 70 New, Useful AJAX And JavaScript Techniques

Morph effect on mouseenter/mouseleave
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 here.

Ajax-js-techniques21 in 70 New, Useful AJAX And JavaScript Techniques

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.

Ajax-js-techniques61 in 70 New, Useful AJAX And JavaScript Techniques

15. AJAX Examples and Demos

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

Ajax-js-techniques57 in 70 New, Useful AJAX And JavaScript 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.

Ajax-js-techniques33 in 70 New, Useful AJAX And JavaScript 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.

Ajax-js-techniques55 in 70 New, Useful AJAX And JavaScript Techniques

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

Ajax-js-techniques14 in 70 New, Useful AJAX And JavaScript Techniques

Animated AJAX Record Deletion Using MooTools
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 here.

Ajax-js-techniques13 in 70 New, Useful AJAX And JavaScript Techniques

(al)

Noura Yehia

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.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading ... Loading ...

Tags: ,

Advertising
  1. 1
    Teo Bitca
    March 8th, 2009 2:02 pm

    :D:D Very helpful, thank you.

    Reply
  2. 2
    hvdesigns
    March 8th, 2009 2:08 pm

    Thanks for including my tutorial. much appreciated

    Reply
  3. 3
    DKumar M.
    March 8th, 2009 2:15 pm

    Nice Tips and Techniques Noura…. Thanks for sharing.

    Reply
  4. 4
    Elijah Grey
    March 8th, 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.

    Reply
  5. 5
    Jen
    March 8th, 2009 2:51 pm

    Great resources as usual. Thanks!

    Reply
  6. 6
    African Boy
    March 8th, 2009 2:55 pm

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

    Reply
  7. 7
    SUmarov
    March 8th, 2009 3:02 pm

    awesome.. greatly appreciated

    Reply
  8. 8
    Akai
    March 8th, 2009 3:06 pm

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

    Reply
  9. 9
    Jewen Soyterkijn
    March 8th, 2009 3:09 pm

    tyvm Noura! ty Smashingmagazine! Wonderful resource once again!

    I feel smashed.

    Reply
  10. 10
    m4c
    March 8th, 2009 3:13 pm

    Very nice! Thx!

    Reply
  11. 11
    Zach Dunn
    March 8th, 2009 3:13 pm

    Great resource roundup! Thanks for the three includes!

    Reply
  12. 12
    Cosmin
    March 8th, 2009 3:16 pm

    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 :|

    Reply
  13. 13
    justin marcus
    March 8th, 2009 3:19 pm

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

    Reply
  14. 14
    Azrie Muzaffar
    March 8th, 2009 3:22 pm

    Excellent! Love this.

    Reply
  15. 15
    Evan
    March 8th, 2009 3:23 pm

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

    Reply
  16. 16
    Andy Gongea
    March 8th, 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!

    Reply
  17. 17
    Ian
    March 8th, 2009 4:02 pm

    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.

    Reply
  18. 18
    AYANO
    March 8th, 2009 4:34 pm

    Wow. I love them! Amazing collection.

    Reply
  19. 19
    Sam Granger
    March 8th, 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!

    Reply
  20. 20
    Juan Cherry
    March 8th, 2009 5:32 pm

    Nice listing!

    Reply
  21. 21
    CoLLaPSe
    March 8th, 2009 5:34 pm

    I love it ;)

    Reply
  22. 22
    Kyle Simpson
    March 8th, 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).

    Reply
  23. 23
    Allen
    March 8th, 2009 6:04 pm

    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.

    Reply
  24. 24
    Adeline
    March 8th, 2009 6:23 pm

    Another excellent list to bookmark! :) Thanks SM

    Reply
  25. 25
    Andrew
    March 8th, 2009 6:40 pm

    Very nice collection.

    Reply
  26. 26
    Haris
    March 8th, 2009 7:54 pm

    Thanks

    Reply
  27. 27
    Peter Richardson
    March 8th, 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?

    Reply
  28. 28
    Ariyo
    March 8th, 2009 8:49 pm

    Spiffy stuff. Thanks for the round up.

    Reply
  29. 29
    Abdul Akbar
    March 8th, 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.

    Reply
  30. 30
    Naruki
    March 8th, 2009 9:50 pm

    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.

    Reply
  31. 31
    Brian Bates
    March 8th, 2009 10:10 pm

    Incredibly helpful list. Thank you!

    Reply
  32. 32
    Noam N
    March 8th, 2009 10:25 pm

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

    Reply
  33. 33
    Virajkumar
    March 8th, 2009 10:36 pm

    awesome really help ful

    Reply
  34. 34
    Pat Cavit
    March 8th, 2009 10:55 pm

    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.

    Reply
  35. 35
    Hezi
    March 8th, 2009 11:33 pm

    another smashing article!
    very very usefull.

    let’s stumble! ;)

    —
    @heziabrass

    Reply
  36. 36
    Allahverdi Sefihanov
    March 8th, 2009 11:37 pm

    really useful post… thanks gicks

    Reply
  37. 37
    Natrium
    March 8th, 2009 11:41 pm

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

    Reply
  38. 38
    onur
    March 8th, 2009 11:49 pm

    Very useful article, thanks

    Reply
  39. 39
    Bin Gong
    March 8th, 2009 11:50 pm

    Collection of design.
    Thanks.

    Reply
  40. 40
    Srenath
    March 8th, 2009 11:59 pm

    Its awesome Man….

    Reply
  41. 41
    Nirmal Kumar
    March 8th, 2009 11:59 pm

    Very Good Collection :)

    Helps me a lot :)

    Reply
  42. 42
    jacksuc
    March 9th, 2009 12:02 am

    it’s too much,someone can package it?

    Reply
  43. 43
    gaurav
    March 9th, 2009 12:17 am

    Oye Delicious oye thanks a lot!

    Reply
  44. 44
    moabi
    March 9th, 2009 12:22 am

    once again…
    so useful,
    thx a lot
    best magazine ever.

    Reply
  45. 45
    simon
    March 9th, 2009 12:30 am

    as a designer this is an amazing list of examples that I could trully use in the real word. Thank you.

    Reply
  46. 46
    W3Planting
    March 9th, 2009 12:40 am

    Excellent collection !!!

    Reply
  47. 47
    liebesiech
    March 9th, 2009 1:45 am

    What should I say? Again, a very good compilation! Thanks for that!

    Reply
  48. 48
    germaine
    March 9th, 2009 2:07 am

    Magnificent, thanks for the selection, very usefull as always

    Reply
  49. 49
    mecaniqueorange
    March 9th, 2009 2:32 am

    lol where do you see NEW techniques ???
    you are repeating yourself…

    Reply
  50. 50
    Two Socks - Graphic design and print
    March 9th, 2009 2:37 am

    Hey guys you know your work is solid, but I’ll say it anyway. Great round up!

    Reply
  51. 51
    Zeb
    March 9th, 2009 2:48 am

    Awesome post ! Thank you

    Reply
  52. 52
    adwin wijaya
    March 9th, 2009 2:58 am

    For grid, I think you forgot to put this
    http://www.trirand.com/blog/

    jqgrid is very good :)

    Reply
  53. 53
    Astho
    March 9th, 2009 3:15 am

    it’s cool post,…
    thanks..

    Reply
  54. 54
    suman
    March 9th, 2009 3:30 am

    hi there
    nice collection and hope you will share same kind of stuff in near future.

    Reply
  55. 55
    Chris
    March 9th, 2009 4:08 am

    Awesome article! Thanks again, I love jQuery and it’s power.

    Reply
  56. 56
    Timothy
    March 9th, 2009 4:42 am

    I just like to write the scripts myself. Did a datepicker (calendar) pop-up the other day.

    Reply
  57. 57
    Stuart Thursby
    March 9th, 2009 4:42 am

    An awesome article, at just the right time. Thank you so much!

    Reply
  58. 58
    Yohan Siddique
    March 9th, 2009 5:20 am

    oj

    Reply
  59. 59
    Kevin Thomas
    March 9th, 2009 5:21 am

    This was so helpful.. You guys rock…

    Reply
  60. 60
    Tom Bradshaw
    March 9th, 2009 5:27 am

    Thanks for such a comprehensive selection of examples. This type of functionality is becoming more and more important in my work as a web designer, and it is now available to all rather than just large companies or say web designer portfolios etc.

    Tools like this are really changing the way users interact with a website. Could they replace flash as the tool of choice for creating interactive websites?

    Reply
  61. 61
    redrock93
    March 9th, 2009 5:34 am

    Just… waaaaooow! I’m in love with Smashin Magazine now! Give us more like these! :)

    Reply
  62. 62
    Eduardo
    March 9th, 2009 5:36 am

    really incredible list! I’ll try to learn some of them.

    Reply
  63. 63
    Dave
    March 9th, 2009 5:37 am

    “A better Pagination”
    is a really sad idea – the numbers are actually useful to everyone, whereas a slider is much less accessible, much less intuitive, and much harder to use.

    Reply
  64. 64
    Roc
    March 9th, 2009 6:02 am

    Interesting

    Reply
  65. 65
    Jasper
    March 9th, 2009 6:07 am

    I will definitely use some of these!
    Thanks for making such a nice list :-)

    Reply
  66. 66
    Chandan
    March 9th, 2009 6:24 am

    very helpful and nice !!!!

    Thank you smashing magazine

    Reply
  67. 67
    Extraordinare
    March 9th, 2009 6:26 am

    very usefull! keep it up

    Reply
  68. 68
    Joakim
    March 9th, 2009 6:49 am

    thank you for this awesome collection!

    Reply
  69. 69
    Mark
    March 9th, 2009 7:11 am

    Noura you rock… thanks for this great list!

    Reply
  70. 70
    brian reynolds story
    March 9th, 2009 7:31 am

    Raivo Pommer
    raimo1@hot.ee

    Obama Strategie

    Viele Investmentexperten machen jedoch die ersten sechs Amtswochen der Regierung Obama für die Eintrübung ihres Aktienmarktausblicks verantwortlich. „Die Latte der Erwartungen lag zu hoch“, meint der unabhängige Marktstratege Doug Peta. Zu viele Menschen hätten gehofft, dass die neue Regierung „einen Zaubertrank zur Lösung unserer Probleme zur Hand haben würde“, sagt er. „Das war unrealistisch.“

    Vorschläge für ein Gesetzespaket zur Ankurbelung der Wirtschaft lösten ein Kursfeuerwerk bei Infrastrukturaktien aus. So schoss etwa die Aktie des Baumaschinenherstellers Caterpillar von den Markttiefs im November 2008 bis Anfang Januar 2009 um 39 Prozent nach oben, stürzte seitdem aber wieder um 43 Prozent abwärts.

    Viele Investoren hatten gehofft, dass Obama die Lösung des größten Problems der Wirtschaft und des Aktienmarktes angehen werde: die Kreditkrise. „Dies erwies sich als falsche Hoffnung“, sagt Brian Reynolds, leitender Marktstratege bei der WJB Capital Group. Nach seiner Meinung „kann die Regierung die Krise nicht aufhalten“.

    Reply
  71. 71
    banji
    March 9th, 2009 7:32 am

    Thanks a lot ! You gave me a solution for what I was looking for today ! :)

    Reply
  72. 72
    Nomark
    March 9th, 2009 7:45 am

    Thanks Noura,

    I really like the jQuery confirm boxes. I’m going to use them in a current project.

    Reply
  73. 73
    David
    March 9th, 2009 8:16 am

    What an absolutely fantastic list!

    Reply
  74. 74
    Do5an
    March 9th, 2009 8:18 am

    Very nice article , this is what called web design treasure :)

    Reply
  75. 75
    Chris Robinson
    March 9th, 2009 8:26 am

    dugg, nice roundup!

    Reply
  76. 76
    Oleg
    March 9th, 2009 8:30 am

    This is a great stuff! I’d also add to this list, they have lots of widgets, like autocomplete, accordion, very powerful grid, etc.

    Reply
  77. 77
    MakeDesign,NotWar
    March 9th, 2009 8:31 am

    Wow, quite a comprehensive post – there’s certainly a few of these I might use (esp the lightbox stuff and page nav. Thanks for sharing this set.

    Reply
  78. 78
    Navdeep
    March 9th, 2009 8:46 am

    Amazing… my dev team would love this post.

    Reply
  79. 79
    Lulu
    March 9th, 2009 8:53 am

    I LOVE JQUERY, thank-you for this!!

    Reply
  80. 80
    Lexi
    March 9th, 2009 8:55 am

    Thank you so much for this! I can see a million uses for all the information given here! : D

    Reply
  81. 81
    scasmflop
    March 9th, 2009 11:24 am

    Great collection

    Reply
  82. 82
    Brian Temecula
    March 9th, 2009 1:41 pm

    It’s too bad that Lightview isn’t cheaper or free. It looks nice, but you can’t even download a trial version.

    Reply
  83. 83
    jp
    March 9th, 2009 2:04 pm

    these aren’t techniques, they’re products.

    Reply
  84. 84
    Brian Temecula
    March 9th, 2009 4:12 pm

    I was wrong about the Lightview not having a trial. It does have a trial, and it works well, but it’s just too expensive! I’ll stay with Slimbox until I get rich!

    Reply
  85. 85
    Raghu
    March 9th, 2009 9:24 pm

    That is truly wonderful and useful..!! Thanks a million :)

    Reply
  86. 86
    sue
    March 9th, 2009 9:27 pm

    thank you !

    Reply
  87. 87
    Oliver
    March 9th, 2009 10:03 pm

    wow. nice compilation.useful tools for web applications.
    thank you. God bless. nice post

    Reply
  88. 88
    joris_lucius
    March 10th, 2009 12:52 am

    Thank you very much for this very usefull post!

    Reply
  89. 89
    Dave
    March 10th, 2009 7:30 am

    Thanks for the great roundup!!!

    As for those of you who are complaining that the article isn’t new, isn’t this… isn’t that… Why don’t you write your own articles? Or better yet, write your own scripts and put them out there free for everyone to complain about.

    This is a free article. If it doesn’t suit you, don’t read it.

    Reply
  90. 90
    pablo
    March 10th, 2009 7:40 am

    Date Picker – jQuery plugin
    doesn`t support IE6 – CSS

    Reply
  91. 91
    Kam
    March 10th, 2009 7:47 am

    So amazing AJAX……never thought about these control..

    Reply
  92. 92
    Alfredo San Martin
    March 10th, 2009 10:21 am

    Great list of techniques! I’ll definitely have to use them in some of my projects!

    Reply
  93. 93
    Roberto Justos
    March 10th, 2009 11:58 am

    muito PICA esse post.
    a fuder!

    Reply
  94. 94
    Hezzuo
    March 11th, 2009 2:00 pm

    Thanks a lot for this great post! Keep that great work coming!

    Reply
  95. 95
    Aditya
    March 12th, 2009 3:39 am

    really good tips! keep them coming

    Reply
  96. 96
    mark
    March 12th, 2009 5:48 am

    Your RSS feed is screwy.

    Reply
  97. 97
    Ivan
    March 12th, 2009 6:05 am

    The RSS Feed is listing the comments on this post. You may want to fix that ;)

    Reply
  98. 98
    wilhel1812
    March 12th, 2009 6:19 am

    i’m in ur RSS feed feeding everybody!
    (seriously SM, fix that)

    Reply
  99. 99
    Antonio
    March 12th, 2009 6:23 am

    GET OUT OF MY RSS, lol.

    OMG

    Reply
  100. 100
    John (Human3rror)
    March 12th, 2009 6:31 am

    stop…………….. RSS HACKED!

    Reply
  101. 101
    r3xha
    March 12th, 2009 6:39 am

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

    Reply
  102. 102
    mario
    March 12th, 2009 6:40 am

    Very helpful!
    Thanks!!!!

    Reply
  103. 103
    Lucian Lature
    March 12th, 2009 7:11 am

    the rss is broken/hacked, I would say.

    Reply
  104. 104
    Brian Lang
    March 12th, 2009 7:15 am

    Smashing + Hacked = Smacked!

    Reply
  105. 105
    Mugros
    March 12th, 2009 9:41 am

    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.

    Reply
  106. 106
    Nagaraju Merugu
    March 16th, 2009 12:19 am

    Appreciate for this great value added posting.

    Reply
  107. 107
    zekken5
    March 16th, 2009 1:03 pm

    Very nice collection.Thx!!

    Reply
  108. 108
    Chintan
    March 16th, 2009 9:39 pm

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

    Reply
  109. 109
    Jamshed
    March 17th, 2009 2:18 am

    These are awesome Techniques

    Thanx for that

    jamshed

    Reply
  110. 110
    Nadun
    March 18th, 2009 12:47 am

    Amazing!!! thanxs in billions..

    Reply
  111. 111
    George Serradinho
    March 18th, 2009 12:49 am

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

    Reply
  112. 112
    Khalid Laariche
    March 26th, 2009 3:48 am

    Great resources as usual. Thanks!

    Reply
  113. 113
    Grant Taylor
    March 26th, 2009 4:31 am

    Some really inspirational stuff. Thanks

    Reply
  114. 114
    wangkai
    March 28th, 2009 4:56 pm

    it is so good !

    Reply
  115. 115
    khaledmadian
    March 29th, 2009 7:21 am

    good good

    Reply
  116. 116
    Hastimal Shah
    April 14th, 2009 4:55 am

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

    Reply
  117. 117
    observer
    May 6th, 2009 9:29 pm

    Awesome. Kudos.

    Reply
  118. 118
    Niks
    July 1st, 2009 10:44 pm

    Great useful stuff. Awesome one.

    Reply
  119. 119
    spidre
    July 11th, 2009 2:02 pm

    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

    Reply
  120. 120
    Daniel Kwiecinski
    September 1st, 2009 10:14 am

    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.

    Reply
  121. 121
    ian pratama
    October 6th, 2009 8:56 am

    this is cool…!, thx :D

    Reply
  122. 122
    Palacinho
    November 10th, 2009 12:28 pm

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

    Reply
  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
  • Re: Correct way to learn PHP

    Start off by reading all the 15 parts of PHP 101 on Devzone.

  • Re: Using Tutorials?

    I say you're okay. I wouldn't straight up jack someone else's design and present it as my own, even if it was a tutorial, but it's certainly acceptable to learn some…

  • Correct way to learn PHP

    So, I'm a designer but I wanna expand my abilities and learn PHP, to be more exact I wanna learn CI - Codeigniter!

  • I wanna make comics!

    Hello,I'm designer but I've never involved in vector painting so I need your help

  • Re: Twitter

    @gatorwebdesignShould tweet something really...

Post your job


Advertisement