150 JavaScript Techniques

On October 26 we published the article 100 Ajax And JavaScript Techniques. This list is basically an update of that collection of JavaScript and Ajax techniques. We noticed that some of the links on the old list were broken, and we began to update the list when the catastrophe suddenly occurred - the list disappeared!!! We managed to recover the list, but on a different URL. One important thing was learned from that: do not touch things that work, and in the future we will make all updates separately. Like we do right now.

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

Modern web designs require JavaScript and added with moderation JavaScript is an asset for any productive website. Stylish navigation, tool tips, amazing slideshows, interactivity and much more, all that can be achieved with just a little bit of JavaScript code.

Cashrevelations.com presents 150+ JavaScript and Ajax techniques together with demos (where available). All the JS techniques are more or less easy to configure - but, as we wrote before, maybe not the first you should do if you just learned website building.

Wikipedia: Ajax (JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications.

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 And Galleries
• Slideshow
• Lightbox
• Image Effects
• Image Cropping
• Content Sliders
• Interactivity And Communication
• Font And Text
• 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. Halftone Navigation Menu - jQuery And CSS3
In this tutorial you will learn how to make a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
View Demo

2. Elastic Thumbnail Menu - jQuery And CSS
In this tutorial Sam Dunn will learn you how to make an elastic thumbnail menu. The menu magnifies menu items when they are hovered over and the menu items expand upwards.
View Demo

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

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

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

6. Fresh Content Accordion
A simple, yet very eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.
View Demo

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

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

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

10. Mootools Navigation Plugin
The goal of this plugin is to create a complex navigation menu as seamless as possible. All you need to do is create a standard unordered list and the plugin will do the rest.
View Demo

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

12. jPaginate - Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo

13. Clickable Table Row
If an HTML table row contains only one <a> link, it can be useful to make the entire row clickable and make it activate that link. This tutorial shows how to make the entire row clickable so that clicking anywhere in the row is the same as clicking that link.
View Demo

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

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

16. Thumbnail Hover Effect Using Mootools
Image is splitting in the middle using two instances of the same image. One instance goes toward left while second image goes right, in effect giving an illusion that image is splitting in middle.
View Demo

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

18. MooTools ScrollSidebar
ScrollSidebar allows you to attach an element to a place on the screen and animate the menu to the current scroll position.
View Demo

19. Icons To External Links
A trend going on around on websites is putting icons on links that point to web pages externally. If you want that on your site, this simple script will dynamically take care of that for you with the help of Mootools and some CSS.
View Demo

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

21. Scrolling To The Top And Bottom - jQuery
Scrolling to the Top and Bottom of your website with a simple click with the help of jQuery special scroll events from James Padolsey, and some few extra lines of jQuery.
View Demo

22. Mootools 1.2 cvLinkSelect Class
This class links the select boxes to each other. When you change the first select element the options for the following select boxes are loaded.
View Demo

Top

Traditional Menus

23. Apple-Style Icon Slide Out Navigation - CSS And jQuery
In this tutorial you will learn how to create an Apple-style navigation menu with a twist - it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element.
View Demo

24. Mega Drop Down Menus - CSS And jQuery
In this tutorial Soh Tanaka will learn you how to make an awesome Mega Drop Down Menu with the help of CSS, jQuery and the Hover Intent jQuery plugin from Cherne.net
View Demo

25. Awesomeness-Filled Navigation Menu
In this tutorial you will learn how to create a navigation menu inspired by Dragon Interactive. CSS sprites can dramatically increase a websites performance and with jQuery you will implement awesome transition effects easily.
View Demo

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

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

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

29. Fixed Fade Out Menu
This tutorial has the aim to teach you to build a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.
View Demo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

63. Overlay With Slide Out Box
How to with CSS and jQuery create a semi-transparent overlay that covers all the page, and a message box that can be turned off again.
View Demo

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

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

66. Advanced Event Timeline
In this tutorial you will learn how to make an Advanced Event Timeline with the help of PHP, MySQL, CSS and jQuery, that will display a pretty time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.
View Demo

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

68. FullCalendar - jQuery Plugin
FullCalendar is a jQuery plugin that provides a full-sized drag and drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format.
View Demo

69. Unobtrusive Date-Picker Widget V5
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

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

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

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

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

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

75. 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 And Galleries

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

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

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

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

80. Pikachoose jQuery Image Gallery
Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed and easy to setup.
View Demo

81. PiroBox - jQuery Plugin For Fast Performing Photo Galleries
jQuery piroBox plugin is simple images gallery, realized with jQuery library. There is a choice between three different styles - shadow, white and black.
View Demo

82. Galleriffic - jQuery Plugin For Photo Galleries
Galleriffic is a jQuery plugin that provides a rich, post-back free experience, optimized to handle high volumes of photos while conserving bandwidth. Note: there is more demos inside the article.
View Demo

83. Polaroid Photo Viewer - jQuery And CSS3
In this tutorial you will learn how to create a Polaroid Photo Viewer using jQuery and CSS3. You can drag the images around, rotate them by combining the CSS3 Box Shadow and Rotate properties - the jQuery inject the CSS3, keeping the CSS file clean.
View Demo

Top

Slideshow

84. Sliding Image Gallery - jQuery
Display a varying number of images in an attractive and easy to use manner. The inspiration for this plug-in this iTunes album viewer. The plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. Note: There is more demos inside the article.
View Demo

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

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

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

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

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

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

91. s3Slider - jQuery plugin
s3Slider is a plugin built in jQuery for cross-fading slideshow, with inspiration from the JD`s Smooth Slide Show script. Realatively easy to install and use.
View Demo

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

93. PrettyPhoto - jQuery Lightbox
PrettyPhoto is a jQuery based lightbox clone. It supports images and has also support for videos, flash, YouTube, iFrames. The setup is relatively easy and quick, plus the script is compatible in every major browser.
View Demo

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

95. Shadowbox Media Viewer
Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Written entirely in JavaScript and CSS and is highly customizable.
View Demo

96. jQuery Visual LightBox 2.3.0
Visual LightBox script ported to jQuery. Now you can choose which engine to use with your image gallery - jQuery or old Prototype JS. Overlay image floats on scroll staying always visible, fit image inside the thumbnail and set background color for the thumbnails and options to set watermark image, position, font, color, and transparency.
View Demo

97. TopUp - JavaScript Pop Up
TopUp is an easy to use JavaScript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness. Beta release.
View Demo

98. ColorBox - Customizable Lightbox Plugin
A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4 - supports photos, photo groups, slideshow, ajax, inline and iframed content. Less than 9KB of JavaScript. Note: there is more demos inside the article.
View Demo

99. imgZoom - jQuery Plugin
imgZoom is a jQuery plugin that implements a smooth zoom effect on images. It uses vector graphics (SVG or VML) to create a graceful transition between the thumbnail and the full-sized image.
View Demo

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

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

102. Rotating Billboard System With jQuery And CSS
In this tutorial you will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one appear.
View Demo

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

104. Interactive Picture With jQuery
In this tutorial you will learn how to piece together an interactive picture – aka an image that contains tooltips and popup boxes. The original inspiration for this tutorial came from the IKEA website.
View Demo

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

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

107. Floom - Blinds Effect MooTools Slideshow
Floom is a Blinds-effect MooTolls slideshow plugin. There are two ways of setting up Floom. One is the object way, where you specify the image url and the caption using the key-value notation. The second one is by simply passing an element collection, ie. $$('#blinds img'), where the passed element has to be the actual image collection.
View Demo

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

109. imgAreaSelect - jQuery Plugin
imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes. Note: more demos Here.
View Demo

110. CropZoom - jQuery Plugin
CropZoom is a plugin that let you select an area of an image to crop, whit this plugin you can zoom in or zoom out, drag and also rotate. The CropZoom plugin needs ui.droppable, ui.resizable, ui.slider from JQuery UI.
View Demo

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

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

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

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

115. jPaginate - Fancy jQuery Pagination Plugin
jPaginate is a jQuery pagination plugin that comes with a twist: animated page numbers. The user can slide through the available page numbers by clicking or just hovering over the arrows. Shortlinks to the first and last page are available as well.
View Demo

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

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

118. jCapSlide - jQuery Image Caption Plugin
Plugin for creating nice sliding captions for images. When hovering over the image, the caption appears and the image gets a semi-transparent color overlay.
View Demo

119. A Bullet-Proof Content Viewer
In this tutorial, we’re going to look at how we can create an attractive and space-saving content viewer which even works with JavaScript disabled. You will build a solid core of semantic HTML - styled with some basic CSS and some use of jQuery to add further enhancements in the form of transition animations.
View Demo

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

121. Star Rating - CSS Sprite And jQuery
In this tutorial from Web Developer Juice you will learn how to create star rating with the help of CSS Sprite and jQuery - AJAX Call is used to store the voting value.
View Demo

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

123. Animated Sharing Bar
Encourage your visitors to share your content on the networks by using pure JavaScript with the jQuery framework, to make an animated sharing bar, which will enable your website visitors to share posts on a number of social networks.
View Demo

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

125. OpenSocial jQuery Mixi Platform 1.0.0
OpenSocial jQuery is a jQuery based concise JavaScript Library for rapid OpenSocial Applications development - The jQuery mixi Platform is a plugin to use the extension of mixi specifically.
View Demo

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

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

128. jFeedback - Minimal jQuery Notification Plugin
A minimal way to notify users of success or error, based on Twitter’s bar and jBar. The notification consists of a simple “OK” or “Error” icon which the user can decide to click if he is interested in the details of the notification.
View Demo

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

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

131. Twitter Trackbacks Widget - jQuery Plugin
Highly customizable Twitter trackbacks widget to integrate tweets that mention your post into your blog. Each tweet comes with reply and retweet links to get more readers engaged in your story conversation. Display tweets as a bar with transition effects or as a fixed list. Many transition options like opacity, height and font-size.
View Demo

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

133. jQuery Twitter Ticker
In this tutorial you will learn how to create a jQuery & CSS twitter ticker which utilizes Twitter’s Search API. It will show your or your friends’ latest tweets, and will not require any server side code or databases.
View Demo

134. Animated TwitterReader
Animated TwitterReader class with MooTools. The MooTools plug-in for downloading and displaying Twitter status via Twitter Search API - created by Jakub Karlec.
View Demo

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

136. Fantastic News Ticker Newsvine Like - 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

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

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

Font And Text

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

140. jQSlickWrap - Slick Text Wrapping For jQuery
jQSlickWrap is a plugin for jQuery which allows you to wrap content around irregularly shaped images, easily. Use float and padding CSS styles to specify how the wrapping will work. Written with Progressive Enhancement in mind.
View Demo

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

142. New York Times-Style Text Selection Widget
NYT’s text selection widget listens for text selection and presents the user with a “search” icon they may click on to learn more about that term. Also available as jQuery.
View Demo

143. Pull Quotes With MooTools
Chris Coyier authored a post titled Better Pull Quotes: Don’t Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content — instead he uses jQuery to dynamically create the pull quotes. The following is the MooTools method for doing so.
View Demo

144. Columnizer - jQuery Plugin
The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns. Note: there is more demos inside the article.
View Demo

145. PrettyNumber – Plugin For Formatting Numbers
A jQuery plugin that transforms a number into a human readable format. This simple plugin formats a number like 23454321234 into 23.454.321.234 - you can use different delimiters like the comma, dot, space or anything you specify in the plugin.
No Demo

Top

Miscellaneous

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

147. Day And Night - Scenery Animation
How to with jQuery and CSS create an amazing animated scenery with just a few lines of jQuery and some absolute positioned elements with images. Note: This will not work in any IE version.
View Demo

148. jQuery Slider Plugin - Safari Style
jQuery Slider is easy to use and multifunctional jQuery plugin. Helps you to build a range slider with Safari Style. Useful and usable on for example real estate websites.
View Demo

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

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

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

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

153. MooTools Drag Opacity
In this tutorial David Walsh will learn you how to make a “drag opacity and fading” effect with the help of some MooTools. The code itself is quite simple — Drag.Move’s onStart and onComplete events to begin and end the fading.
View Demo

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

155. Retro Animated Flip-Down Clock
In this tutorial, you will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, Alexandru Pitea tried to replicate the flip action of the pads and make it as lifelike as possible.
View Demo

156. Colorful Clock With CSS And jQuery
In this tutorial Martin Angelov will learn you how to make a cool and colorful clock with the help of some jQuery and CSS.
View Demo

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

158. Fast And Simple Toggle View Content
This script is using the UL list and allows user to toggle to display the content of LI items. This is a useful user interface feature that helps designers to save space and build a less complicated user interface.
View Demo

159. Depender
A new plugin called Depender which uses MooTools dependency mappings to allow you to lazy load additional scripts on the fly based on what you need.
View Demo

Top

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