100 Ajax And JavaScript Techniques

• New! Updated list: 150 JavaScript Techniques

JavaScript is becoming more common in modern web designs and when it is done with taste and moderation it can enhance the user’s experience and provide interactivity to your website. The secret is balance. To not have too much JavaScript and to use the right techniques for your purposes.

Wikipedia: JavaScript is an object-oriented scripting language used to enable programmatic access to objects within the client application and other applications.

There is a lot you can do with JavaScript – form validation, stylish navigation, amazing slideshows, tool tips, interactivity and more can be achieved with some JavaScript code.

Cashrevelations.com presents 100+ Ajax and JavaScript techniques with demos that can make your websites visually and interactively more interesting or user friendly. They are all more or less easy to configure, but perhaps this is not the first thing you should do if you just have learned to build websites – but on the other hand, It doesn’t harm to try.

LIST CONTENT

• General Navigation
• Traditional Menus
• Forms And Auto-Complete
• Form Validation And Hints
• File Upload
• Tables
• Tool Tips And Boxes
• Calendars And Timelines
• Image Previewing
• Slideshow
• Lightbox
• Image Effects
• Image Cropping
• Content Sliders
• Interactivity And Communication
• Miscellaneous

MooTools, jQuery, Prototype and script.aculo.us are among the techniques represented in this list and we have tried to categorize them in a practical and easy searchable way.

Navigation

General Navigation

1. Filterable Portfolio with jQuery
In this tutorial, Trevor Davis, a 25 year old front-end developer, will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.
View Demo

2. jQuery ListNav Plugin
This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter.
View Demo

3. 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.
View Demo

4. Yetii – Yet (E)Another JavaScript Tab Interface
Yetii is a functional tab interface implementation. It has lightweight, object-oriented code and degrades gracefully in browsers without JavaScript-support. You can have many independent tab interfaces on a single page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation, nest one tab interface inside another and define custom function to run after certain tab is clicked.
View Demo

5. Apple Style Menu Improved With jQuery
How to create a similar main navigation like the one of kriesi.at – a so called kwicks menu. Build an Apple-flavored Leopard-text-indent style menu from scratch in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery.
View Demo

6. Jquery Fade In And Fade Out
A fade in fade out effect – the effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website whatever it be an image, text, a link or even a div.
View Demo

7. Morph Effect On Mouseenter And Mouseleave With Mootools 1.2
In this tutorial, you will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools – and turn it into something fun to click.
View Demo

8. Ajaxify – JQuery Plugin
Ajaxify can convert all links in a web page into an ajax load and submit requests. You can build a complex ajax website with one single line. Some features are Ajax GET and POST requests, history and bookmarking support, animations and more.
View Demo

9. Sliding Boxes And Captions With JQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
View Demo

10. Accordion And Hover Effects With JQuery
This tutorial video (QuickTime version is 60Mb – flash version is streaming) explains how the accordion and hover effects on Tim Van Damme’s site can be achieved using jQuery.
View Demo

11. Outside The Box – Navigation
Just about every website uses the regular navigation concepts we’re all used to. After a while this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.
View Demo

12. Powerful Product Highlighter With MooTools
This tutorial will help you to create a flexible tool for highlighting your sites products or services using the MooTools JavaScript framework – a clever rollover mechanism that works well as a product highlighter.
View Demo

Top

Traditional Menus

13. jQuery Context Menu Plug-In
A context menu plugin for jQuery that features easy implementation, keyboard shortcuts, CSS styling, and control methods. It was designed to make implementing context menu functionality easy and requires minimal effort to configure.
View Demo

14. Smooth Animated Menu With jQuery
In this tutorial Zach Dunn will teach you how to build a nice jQuery menu with a smooth transition animation effect.
View Demo

15. Fading Menu – Replacing Content
When a menu item is selected, its 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 the other.
View Demo

16. e24TabMenu – Drop down AJAX Menu
e24TabMenu is a plugin written for scriptaculous. In this tutorial Alfredo Artiles teaches you how to make a nice tab menu that expands and collapses smoothly.
View Demo

17. A Different Top Navigation
In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.
View Demo

18. SpriteMenu
This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. The menu is displayed by manipulating the background-position property to display individual sprites in the image.
View Demo

19. Image Menu
A horizontal menu that reveals more of the image as you rollover it. Features 2 optional onClick events (open and close), href passed to onClick events, stays open when clicked, closes when clicked and selects item to pre-open.
View Demo

20. Proto.Menu – Prototype Based Context Menu
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page. Plays nice with JS turned off and menu styling can be easily defined in external stylesheet.
View Demo

Top

Forms And Tables

Forms And Auto-Complete

21. Changing Form Input Styles On Focus With jQuery
This tutorial will show you how to spice them up with CSS classes and default values that change according to which form item is selected. All with just a splash of jQuery.
View Demo

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

23. Incredible Login Form With jQuery
One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content.
View Demo

24. Editable – JQuery Editable Plugin
This is a real customizable jQuery editable plugin. Currently it can convert any tag to text input, password, textarea, drop-down list. You can easily extend it by adding your own input type using its editableFactory object.
View Demo

25. Google Suggest Style Filter – AutoComplete Control
Create a Google Suggest-style filter with AutoComplete Control. AjaxControlToolkit’s AutoComplete control can be used with a data grid.
View Demo

26. Autocomplete – JQuery Plugin
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from.
View Demo

27. Auto Complete To Your Google Custom Search Engine
This tutorial will show you how to use the “Popular Queries” feed from your Google Custom Search Engine (CSE) as a data source for a jQuery autocomplete.
View Demo

28. Ajax Fancy Captcha – JQuery Plugin
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. Basic design and its elements are easy to change and customize.
View Demo

29. Proto! – TextboxList Meets Autocompletion
This is the Prototype version of the extended script by Guillermo Rauch. As with the previous script, this script has been converted and operates like the original.
View Demo

Top

Form Validation And Hints

30. Using Input Values As Hints
Give your visitors a hints on what to write in textfields. Each of the fields auto-clear when the user clicks it. If nothing at all is entered, the hint reappears once the visitor decides to move away.
No Demo

31. FormCheck
FormCheck is a MooTools class that allows you to validate a form by performing different tests before submission – installation tutorial and examples.
View Demo

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

33. Custom Form Elements
This CFE script enhances form elements including radio buttons, checkboxes, file upload, textfield, textarea, images and the select, submit and reset buttons.
View Demo

Top

File Upload

34. FancyUpload – Swiff Meets Ajax
FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup and styleable via CSS and XHTML and uses MooTools to work in all modern browsers.
View Demo

35. Uploadify – JQuery File Upload Plugin Script
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
View Demo

36. Multiple File Uploader – Mootools Version
A script that allows you to create a form in which your visitors can upload more than one file using MooTools.
View Demo

37. Extension – UploadForm
The Ext UploadForm is Ext.form.BasicForm extension for easy upload of (multiple) files to a server. The files are added to a queue first then they are uploaded to the server. Files can be removed from queue individually before upload or whole queue can be cleared. Result of upload is shown for each file by the success or failure icon.
View Demo

Top

Tables

38. TinyTable JavaScript Table Sorter
Easy to use JavaScript table-sorting script. Features column highlighting, optional pagination, support for links, date/link parsing, alternate row highlighting, header class toggling, auto data type recognition and selective column sorting.
View Demo

39. JavaScript Tabifier
Automatically creates an HTML tab interface using plug-and-play JavaScript. Does not require you to set up a list of links, or anchors for the tabs, and you can use CSS to customize the appearance of the tabs.
View Demo

40. Accessible Charts And Graphs From Table Elements
The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.
View Demo

41. Table With Dynamically Highlighted Columns
When you click on “Sign Up” for an option on Crazy Egg’s pricing table, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. The CSS Guy wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.
View Demo

42. TableGear
TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.
View Demo

Top

Tool Tips And Boxes

43. Duplicate the jQuery Homepage Tooltips 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.
View Demo

44. qTip – The jQuery Tooltip Plugin
qTip is an advanced tooltip plugin for the jQuery JavaScript framework. Built from the ground up to be user friendly, feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips.
View Demo

45. MooTooltips – JavaScript Tooltips With MooTools
MooTooltips can display tooltip messages from HTML elements, Ajax calls or text added manually. Tooltip parameters can be passed either when instantiating the class or on the rel element parameter.
View Demo

46. Coda Popup Bubbles
In this tutorial you will learn how to create Coda’s ‘puff’ pop-up bubbles, shown when you mouse over a downloadable image. This effect can be perfected by changing the initial reset code to read from the trigger element and approximate it’s position.
View Demo

47. Prototip 2
Prototip allows you to easily create both simple and complex tooltips 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).
View Demo

48. Better Tooltip With JQuery
Browsers will automatically display a tooltip when you provide a title attribute. In this tutorial Jon Cazier is going to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.
View Demo

49. MoreCSS
An easy to use, lightweight and fast JavaScript toolkit/library with CSS syntax for common things. With only 8 KB and it’s CSS like syntax MoreCSS is perfect for all the daily JavaScript things: popups, tabs, tooltips and more.
View Demo

50. - Link is deactivated due to hacker attack on Web2Ajax.com
FaceBook Like – jQuery and autosuggest Search Engine. Features autosuggest and ajax support, support search plugins, support cache and cross browser support.
View Demo

51. Facebook-Style Modal Box Using MooTools
Facebook’s Modal box is one the best modal box around. It’s lightweight, subtle, and very stylish. David Walsh has taken Facebook’s imagery and CSS and combined it with MooTools’ awesome functionality to duplicate the effect.
View Demo

52. GlassBox
GlassBox is a lightweight JavaScript User Interface (UI) library, which uses Prototype and Script.aculo.us for some effects. GlassBox lets you easily build lucent borders, colorful layouts and “Flash-like” effects.
View Demo

Top

Calendars And Timelines

53. Elegant Animated Weekly Timeline
This tutorial explains how to design an elegant and animated weekly timeline, with daily annotations, you can customize and reuse quickly in your web projects.
View Demo

54. Unobtrusive Date-Picker Widget V4
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.
View Demo

55. Date Picker – jQuery Plug-In
Date Picker component with a lot of options. Date Picker allows users to easily select a date or range of dates. Some features are: multiple calendars; single, multiple and range selection; marking of special, weekend and special dates; an easy-to-customize look via CSS and more
View Demo

56. JQuery Interactive Date Range Picker With Shortcuts
Date Range Picker plugin uses jQuery UI 1.7 and the new jQuery UI CSS Framework. This plugin wraps the jQuery UI datepicker into an interactive component specifically designed for choosing date ranges.
View Demo

57. Calendar – A JavaScript Class For Mootools
Calendar is a JavaScript class that adds accessible and unobtrusive date-pickers to your form elements. Features highly configurable inputs and selects, multi-calendar support, variable navigation options and multi-lingual and fancy date formatting.
View Demo

58. Scrollable Timelines
Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.
View Demo

59. MooGenda – JavaScript Calendar Based On MooTools
MooGenda is a calendar based on MooTools, that reads events from JSON requests. Supports double click on event to see the deafult event view and features also drag and drop event in month view, drag and drop and resize event in diary view and every change send a request to back end (to store when and what changed in the event).
View Demo

60. MooTools Events Calendar
The MooTools Events Calendar is a JavaScript calendar class that was built using the MooTools framework – the calendar supports week/day/month view and the addition of events.
View Demo

Top

Image Handling And Sliders

Image Previewing

61. imgPreview – jQuery Plug-In
The ‘imgPreview’ plugin allows your users to preview an image before clicking on it and, out of necessity, will preload the image so when a user does click through to it there is no waiting time. The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link.
View Demo

62. SlideItMoo – Image Slider
SlideItMoo is a banner and image slider developed with MooTools. The image slider supports continuous sliding when navigating, offers the possibility to set how the slider will slide (from left or from right) when used with the auto slide feature on, offers the possibility to give it the item width (width of the slider’s items) and let it display the elements according to that width and the visible items parameter.
View Demo

63. Fancy Thumbnail Hover Effect With JQuery
This is a thumbnail hover effect jquery and CSS tutorial. If you switch up the absolute potion coordinates, you can create various ways the hover effect pops out as well.
View Demo

64. FancyZoom Meet Prototype
FancyZoom 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 script.aculo.us and Prototype – it now works with any HTML already included on the page.
View Demo

Top

Slideshow

65. Moving Boxes
A jQuery slider with buttons to change panels, and the panels zoom in and out.
View Demo

66. Supersized – Full Screen Background/Slideshow jQuery Plugin
Supersized features include: cycles Images/backgrounds via slideshow with transitions and preloading, navigation controls allow for pause/play and forward/back, resizes images to fill browser while maintaining image dimension ratio.
View Demo

67. Animated JavaScript Slideshow
This dynamic JavaScript slideshow is feature packed and under 5KB. A few features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
View Demo

68. Easy Slider 1.7 – JQuery Plugin
JQuery plugin for sliding images and content. Easy Skider 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.
View Demo

69. Image Rotator With Description
Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.
View Demo

70. BarackSlideshow
BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images.
View Demo

71. noobSlide – MooTools
An easy to install and flexible slider plug-in created by using MooTools. The download includes a ready page example.
View Demo

Top

Lightbox

72. Lightview – Overlay Anything With Style
Lightview was built to change the way you overlay content on a website. Designed to complement your content, and features include: smart image preloading, customization without CSS, adjustable rounded corners, no PNG required, resizing to always fit the screen and one-click slideshow.
View Demo

73. LightWindow
The ultimate modal window system, LightWindow, allows you to build your own theme, create mixed media galleries including flash, quictkime and images.
View Demo

Top

Image Effects

74. jParallax
jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse.
View Demo

75. swfIR – swf Image Replacement
Using JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website.
View Demo

76. Animated Postcard With jQuery
In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere. Sam Dunn will teach you the art of looping animations using setTimeout(), how to take advantage of the Easing plugin and a new way to spice up your banner.
View Demo

77. BBC Radio 1 Zoom Tabs
How to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.
View Demo

78. Animate Image Filling Up Using jQuery
Spruce up your website’s header by letting Sam Dunn teach you how to make an image appear to fill up with just a splash of jQuery and Photoshop.
View Demo

Top

Image Cropping

79. UvumiTools Crop
This simplified tool gives your users the ability to create a selection area that can be used to crop an image live on your web site. This is an extremely useful tool for any site that provides image hosting, for example.
View Demo

80. Jcrop – The jQuery Image Cropping Plugin
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 plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
View Demo

Top

Content Sliders

81. Ultra Versatile Slider
In this tutorial Antonio Lupetti explains a simple step-by-step way to implement an ultra versatile slider with horizontal scrolling and animated effects using MooTools.
View Demo

82. Mootools Slider With Two Knobs
Mootools slider with two knobs (double pinned slider) with range indicator. You can easily change the look and feel of the range indicator, slider knob, the slider track by modifying the slider.css.
View Demo

83. Mootools CSS Styled Scrollbar
A small piece of JavaScript that creates a CSS-styled scroll bar from the MooTools “slider” class.
View Demo

84. AnythingSlider – JQuery Plugin
This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders Chris Coyier created and adding new features. In other words, to create a really “full featured” slider that could be widely useful.
View Demo

85. Fantastic News Ticker Newsvine-Like Using Mootools
In this tutorial Antonio Lupetti teachs you how to in a simple way implement a Newsvine-like News Ticker (with news vertical scrolling) on your website.
View Demo

86. Amazon Books Widget With jQuery And XML
It makes sense to forgo database tables and server-side code when you need to store a limited amount of non-sensitive data. Accessing this data can be a snap with jQuery because the library was built to traverse XML documents with ease. With some custom JavaScript and jQuery magic you can create some interesting widgets. A good way to demonstrate this functionality is by building a browsable Amazon.com books widget.
View Demo

Top

Interactivity And Communication

87. Starbox – Rating Stars For Prototype
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype JavaScript framework. For some extra effects you can add Scriptaculous as well.
View Demo

88. JQuery Plugin For Zoomable And Interactive Maps
A jQuery plugin for zoomable and interactive maps – the map was made to be as appealing as possible by using crisp graphics and smooth animations.
View Demo

89. Digg-Style Post Sharing Tool With JQuery
Kevin Liew will show you how to create a social bookmarking tool that looks similar to digg’s. He also includes the komodomedia’s social bookmarking icons and a long list of submission URL for one click bookmark.
View Demo

90. Ajax IM
Ajax im is a browser-based instant messaging client. It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites. Demo usernames are “test”, and “test (1 to 4)”. Password is “test”.
View Demo

91. Drag To Share
We’ve all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. In this tutorial Dan Wellman is going to show you how you can replicate this behavior with jQuery and jQuery UI.
View Demo

92. Better Blogroll – Dynamic Fun With SimplePie And JQuery
A traditional blogroll is a simple list of other sites, often in the sidebar. Let’s improve upon the concept of a blogroll by not just listing sites, but dynamically pulling recent headlines from them, and using some fun jQuery animation.
View Demo

93. Twitter Friends And Followers Widget – JQuery Plugin
Here is a jQuery plugin that you can embed anywhere to display pictures of your Twitter followers or friends (whom you follow) and their latest tweets if you like.
View Demo

94. Search And Share
Search and Share makes highlighting text to a more functional action. More specifically, it attempts to understand the intention of a user’s text selection and presents a variety of options accordingly.
View Demo

95. Realtime Related Tweets Bar – JQuery Plugin
A real-time tweets bar related to your posts from your twitter timeline or from anybody or even limit it by a geocode coordinates. Features; show realtime related tweets based on your post tags, show your twitter timeline (related to your post or not), return only tweets with links or return all and more.
View Demo

96. jsDraw2D – 2D Graphics Library For JavaScript
This is a pure JavaScript library to draw 2D graphics on web pages inside web browser without using SVG or VML. JavaScript developers, web developers and webmasters can take advantage of the library to add graphics drawing functionality to their web applications or websites using the library.
View Demo

Top

Miscellaneous

97. Typeface.js – Rendering Text With JavaScript, <canvas>, And VML
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
View Demo

98. FontEffect – JQuery Plugin
Font effect is a jQuery plugin that adds some effect to html text. The available effects are Outline, Shadow, Gradient and Mirror. No images are used for these effects and no additional CSS is necessary. All effects are contained in the plugin and do not interfere with page rendering in older browser or browser with JavaScript disabled.
View Demo

99. Ajax Page Loads Using MooTools Fx.Explode
When you click on any of the designated Fx.Explode elements, the elements “explode” off of the screen. Click again and they magically reappear.
View Demo

100. Step By Step – Show And Explain Visitors What Your Page Has For Them
You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.
View Demo

101. Music Player In JQuery
In this tutorial you create an amazing music player coded in xHTML and jQuery that made use of mouse gestures and hotkeys. You can click and drag with mouse to interact with interface’s music player or use directional keys and spacebar instead of mouse.
View Demo

102. Skype-Style Buttons Using MooTools
JQuery expert Janko Jovanovic dropped a sweet tutorial showing you how to create a Skype-like button using jQuery. David Walsh was impressed by Janko’s article so he decided to port the effect to MooTools.
View Demo

103. Folder Collapser For Dynamic Content
How to create a group of collapsible folders using pure JavaScript and some JQuery added to the final product to give it a little bit of flare. The code will be structured in such a way that allows for implementation into a dynamic page – wherein the number of folders may be unknown.
View Demo

104. Twitter-Like Load More Widget
Twitter uses a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, JavaScript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.
View Demo

105. Web 2.0 Document Search Site
In this tutorial we will create a document searching site with jQuery. This site will be used to search documents by specifying an extension (file type). The data is then filtered and sent to Google.
View Demo

Top

The resources are not in any particular order and as usual you decide what resource fits best for your purposes. Cashrevelations.com is not affiliated with any of the authors.

• Part Two: 40 JavaScript Tools