120+ Javascript, Ajax, jQuery Mega Toolbox

In this article tripwire magazine provides a huge Javascript, Ajax and jQuery Toolbox that I hope really really gonna make a difference in your work efficiency. Javascript, Ajax and jQuery is in combination with other Web Technologies like fx. CSS key enablers for Dynamic Elements on Websites. Make sure you look carefully through this article to find the goodies you need.

Introduction

Javascript, Ajax and jQuery is used more and more these days and for a reason. These technologies can improve your web site Look & Feel, Usability and functionality significantly. There is a lot of free frameworks, examples, demos etc. available on the Internet and you will get access to some of the best in this article.

Index

This article has been organized in the following sections. Use the links to get instant access to the type of scripting resource you’re looking for.

• Image Handling (Galleries, manipulation etc.)
• Tables Handling (Sorting cell editing etc.)
• Virtual Keyboard
• Forms Handling (Validation, autofill etc.)
• Windows Handling
• Color pickers
• Ajax Loaders
• Calendars
• Dynamic Menus
• Inline Text Editing
• File Uploaders
• Mobile Devices
• Libraries
• Cookies Handling

Other relevant resources

Please take time to read some of the other popular articles on tripwire magazine.

		75+ Excellent Free Fonts For Professional Design In this article tripwire magazine presents an overview of more than 75 excellent free fonts you should consider using for your designs. Not all free Fonts are worth using but the Fonts listed in this article have all been picked out because they are better than the rest.
		100+ Massive CSS Toolbox In this article tripwire magazine provides a Massive CSS Toolbox giving you access to a really large collection of CSS Tools, Tutorials, Cheat Sheets etc.
		35+ very Useful And Powerful CSS techniques In this article tripwire magazine provides a list of very useful CSS Techniques that you can use freely to make your website or blog more dynamic and inprove its Look & Feel. The article will also give you an introduction to CSS and why it should be used instead of table-based layouts. hand-picked because they deserve to.

Image Handling

Phatfusion Slideshow

Very nice Slideshow component.

• Fade, Slide and Wipe transitions
• loops
• Play, Stop, Next and Previous controls
• Inits from array of image src’s, a list of images on the page or using the href of an a tag like the lightbox

Creating a polaroid photo viewer with CSS3 and jQuery

This example is making use of CSS3 and jQuery. It really shows the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean. The result is nice looking polaroidsthat you can drag around on the page…cool!

How to add advanced tooltips for people on your photo

This post demonstrates how you can use Taggify widget to enhance your blog with nice functionality showing popup tooltips for people on your photos.
Let’s add notes for 2 well-known men on the photo below so people far from IT industry do not mix them up while reading our blog. Move mouse over the image and notes below it to see how it looks in live.

Phatfusion

Beautiful Mootools JavaScript framework plugins which you’ll love.

• 2 optional onClick events – open & close
• href passed to onClick events
• stays open when clicked
• closes when clicked
• select item to pre-open

tjpzoom

TJPzoom allows you to zoom in on particular sections of a high-resolution image. Holding down the mouse button and dragging up or down, can decrease or increase the zooming of the image magnifier tool. One way of utilizing TJPzoom is to scale high-resolution pictures down to fit a web page, and then allow the users to zoom into parts of the image using the magnifier tool.

jQuery Multimedia Portfolio

Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3), will automatically detect the extension of each media and apply the adapted player.

Tipmage

Tipmage is a javascript class aimed at creating and managing tooltips (or “notes”) over images. Tipmage makes it possible to mark rectangular portions of an image and attach a description to each one of them. The description will be shown as a tooltip when the mouse is over the right section of the image.

Slider Gallery

This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch.

Instant.js

Instant.js effect dynamically adds a Polaroid-like effect to your images (it tilts it and adds a border with a drop shadow), simulating this popular image technique without having to use a digital-image editing application such as Photoshop.
This can be utilized for when you’re applying this popular visual technique on multiple images and you don’t want to manually edit the pictures yourself (you can probably batch process, but that’s really only effective for simple actions such as resizing images, cropping uniformly, etc.).

iCarousel

iCarousel is an open source (free) javascript tool for creating carousel like widgets.
One of the most common problems a web developer usually face is related to continuously rotate a fragment of content. It can be a presentation of headlines, small fragments of news or a list of thumbnails. The nature of the thing being rotated doesn’t matter too much here because all those kind of applications share always the same idea: Rotating. This objective can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful. It’s a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.

qGallery

qGallery is a Prototype-based gallery script which automatically takes care of the image processing, offers multipple viewing modes and comes with a number of transition effects.

ImageFlow

Inspired by iPod’s “coverflow”, ImageFlow is a simple effect that displays a collection of images that the user can scroll there using a scroll bar at the bottom of the image set. Advanced developers can probably modify the slider to spruce it up a bit more. When the user clicks on an image, it re-directs them to another web page with the image displayed, so an excellent idea would be to use this in conjunction with a modal box script to open the image instead.

Image Cross Fade Transition

Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer – either in CSS or with the simplest of JavaScript:

$(function () {
  $('img.swap').hover(function () {
    this.src = 'images/sad.jpg';
  }, function () {
    this.src = 'images/happy.jpg';
  });
});

Today’s challenge is the rollover transition! View the working example and the source

Table / Grid Handling

Phatfusion Sortabletable

This scripts gives you simple sort and filter in tables.

• sort on numbers, strings, dates and currency
• filtering on columns

mooTable

mooTable allows you the ability to provide sorting of table data ( without a page refresh) by utilizing the DOM instead of requesting the data again, sorted another way. Implementation is simple, and configuring the sorting of tables is a breeze. This library needs the mootools framework, which you can download here. You can also find a forum post on the mootools boards by the author of mooTable, with feedback from other mootools developers.

dhtmlxGrid :: Editable Ajax Data Grid

dhtmlxGrid is an Ajax-enabled JavaScript grid control with cutting-edge functionality, powerful data binding, and excellent performance with large datasets. The gridview component is easy-to-use and provides great flexibility due to its rich client-side API. dhtmlxGrid supports different datasources, including XML, JSON, CSV, JS array, and HTML table. Since v1.6 grid data can be loaded from custom XML format.

Tablecloth

Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love Try to mouseover or click on a table below.

Unobtrusive Table Actions Script

An attempt at writing an unobtrusive (and fast) script that adds commonly required “actions” to data tables. Can Zebra stripe the table. And supports row hover, column hover and cell hover effects

KeyTable

KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. As a further bonus, KeyTable integrates seamlessly with DataTables. It is a lighweight (~5kb) JS library.
The library provides an Excel-like navigation that can be bundled with features like on-click editing.

DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML tables. Key features:

• Variable length pagination
• On-the-fly filtering
• Multi-column sorting with data type detection
• Smart handling of column widths
• Fully internationalisable: UK, French, German, Spanish, Russian, Norwegian, Portuguese Brazilian (and more) translations provided
• It’s free!

Virtual Keyboard

Customizable jQuery Virtual Keypad Plugin

jQuery Keypad is a plugin for creating more secure input entry by providing a keyboard like interface. The values to be displayed can be easily set which makes it possible to show only numbers, foreign letters, etc.

Virtual Keyboard with jQuery Tutorial

Tutorial on creating a virtual keyboard with jQuery (script can be downloaded).
Such virtual keyboards are generally used in bank websites or forms that require extra security. They are a step for preventing keyloggers (but may not be an absolute solution as keyloggers are getting smarter).

Virtual keyboard

Virtual keyboard interfaces are generally used in websites where the highest level of security is a must like online banking applications. Virtual keyboards help us to prevent any keylogging activies and/or provide users a special keyboard which they don’t already have (like a keyboard of another language). This virtual keyboard very easy to use and already supports many languages.

Forms Handling

iMask

Who haven’t ever wanted to apply an input mask to an HTML form field? This very common feature in traditional GUI applications is not natively supported by web applications. iMask goal is to implement an easy way for developers to add mask into their form fields, increasing the database and software consistency with standard compliant XHTML and unobtrusive JavaScript.
iMask is an open source (free) javascript tool for creating input and textarea masking. It is built on Mootools, supports keyboard control and dynamic charset definition.

dFilter

A tiny JavaScript for input masking. This script will easily allow you to add an input mask to a textbox. The mask for a phone number could look like this for example “(###) ###-####”.

Typecast – The Input Field Library

Typecast is an Input Field Augmentation Library. When complete it will add autocomplete, suggest and realtime character masking ability to the standard HTML input field. And who knows, it’ll probably end up doing even more! I’m currently working on the Suggest functionality which is coming along nicely. Typecast requires no JavaScript code in the <body>. Rather it scans the document on load and binds the appropriate Typecast Behaviours to the fields based on the information you specify in the field’s rel attribute.

Masked Input Plugin for jQuery

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).
A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user. The following mask definitions are predefined:

• a – Represents an alpha character (A-Z,a-z)
• 9 – Represents a numeric character (0-9)
• * – Represents an alphanumeric character (A-Z,a-z,0-9)

JavaScripTools

JavaScripTools is a set o JavaScript components, functions and classes to make the web developer’s life easier. Most modern browsers, like Firefox, Internet Explorer, Opera and Konqueror are supported.
Features:

• Numerous functions that performs common operations on objects, strings, arrays, form fields, events and more
• Parsers / formatters for many data types, including numbers and dates – i18n (internationalization) may be taken to JavaScript level
• A dynamic table, supporting paging, sorting and editing, fully customizable using CSS (Cascading Style Sheets)
• Masks for restricting / formatting user input on form fields

Password Field Image Mask

A nice JavaScript input mask which helps displaying the password field characters as images.

Spinbox.JS

An unobstrusive solution for turning input textboxes into spinboxes. It is very effortless to implement the code. Simply creating a normal textbox, giving an id to it & editing few arguments is enough. Spinbox.JS has 10 predefined skins and new ones can be created via CSS in the skin file. All you have to do is to create a normal text input on the page, give it an ID, edit a few arguments, set a skin in the initialization script and hit F5 to view the amazing transformation.
It supports multiple spinboxes on a single page, and a different skin can be used for each SpinBox on the page.

JSValidate

Free library for validating forms that requires Prototype & Script.aculo.us to run. List of some of the supported validation rules:

• Required field
• Only numbers
• Only letters
• E-mail
• Credit card number format
• US zip code, phone number & state code formats

Expanding a HTML form using JavaScript

In this example, what you want is that the user can give an input and dynamically expand the form. This can be achieved with the help of JavaScript and here I’ll show you how.

jQuery – Ajax Contact Form

A very nice tutorial from Nettuts on creating an Ajaxed contact form with jQuery & PHP. The form has an input validation. After the message is sent in th ebackgroung a “success” message is displayed to the user. Demo

LivePipe UI

LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. MIT licensed and actively maintained. Each script is well tested, highly extensible and unobstrusive. Suite is very well documented. You can easily reach the details of the APIs and this makes the product much more usable. Controls awailable:
Tabs, Window, TextArea, SelectMultiple, Rating, ProgressBar, ScrollBar, ContextMenu

Proto Form – Contact Form With Protoype

A lightweight (only 4KB) & unobtrusive contact form that is built with Prototype. The fields are validated & highlighted accordingly. The e-mail message is sent via Ajax and a success result is displayed. It is a very handy form which can be installed easily.

Custom Form Elements (CFE)

Ever wondered how you could style form elements like checkboxes, radiobuttons and select-fields in a way you like? You tried hard using the most ass-kicking XHTML/CSS tricks, but didn’t succeed without stuffing unnesscesary tags into your sleek sourcecode? Not to speak of the browsers and their “special abilities” in evaluating CSS.
Now this is for you! CFE finally found their way to SourceForge.net and allow you to style your forms individually!

Ajax Contact Form

NB Artcile translated! This contact form uses Script.aculo.us & WForms. An unique feature of it is, it tries to connect to the server of the sender to verify that it accepts mail to the address mentioned. Message size can be limited and remaining characters are displayed in a box. Demo

LiveValidation

Validating forms as users type is a nice feature for users, it lets them see when they make a mistake.
An ajax live form validation library, LiveValidation is not only a form validation library, it can also be used for other types of validations.

LightForm – Ajax / PHP Contact Form

It uses FormCheck2 for validation of fields and NiceForms to style form objects.
There is a simple captcha-like validation which ask the user a sum of 2 numbers. E-mails are sent via PHP & displays user IP, user agent and referrer in the message. Demo

Phatfusion form validation

Simple and easy to use form validation based on mootools.

• optional onFail function.
• optional onSuccess function which will overide the form submition, this can be used to validate an ajax form.
• onBlur validating
• shows errors next to item or in a list.

jQuery Sliding Contact Form

A sliding contact form built with jQuery. Form is normally hidden at the top & slides down with the first click & up at the 2nd click.There is no form validation & mail sending code included. Demo

Validanguage
Validanguage is an inheritance-driven, open source javascript validation library designed to be the most feature-rich, user-friendly validation framework available. It has been verified to work in all major browsers, including Internet Explorer, Firefox, Safari, Opera, Konqueror and Chrome.

wForms: Easy JavaScript Form Controls

For the projects that you don’t already have form controls, wForms is an open source unobtrusive JavaScript form controls library that you’ll find very useful. It includes input validation, tooltips, field synchronization controls and more.
It is pretty easy. After inserting the javaScript library to your pages you can control the field attributes with classes like:
<input type="text" ... class="required"/>

Uni-form

Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.

Brett’s Beta Contact Form

A contact form that checks the validity of the fields & sends the e-mail accordingly. It is not updated for a while but the form works ok.

dhtmlxAccordion

dhtmlxAccordion allows you to organize your content in a space-saving way. This JavaScript DHTML accordion control displays multiple panels within a container. Just one of these panels is expanded at a time, while others are collapsed. If you want to see other panel’s content, just click on its header and chosen panel will open smoothly. This quite popular visual solution is built entirely in JavaScript and works correctly in all major web browsers (FF, IE, Opera, Safari).

Niceforms 2.0

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort. So Niceforms baically is a script to beautify web forms…Try it out yourself!
The script is fully compatible and has been tested with most major browsers, with the exception of IE6.

JavaScript time picker

This is a JavaScript time picker with a drag’n drop enabled clock interface.
Usage is very simple, hour and minute hands can be dragged & dropped to the desired value. Clicking to the AM-PM also enables you to switch between them. This time picker is highly configurable including the “starting hour”, sizes & images used. It requires Mootools and the document to be a XHTML doctype to run. Download package includes all the necessary resources including the PSD files.

jQuery.timepickr.js

jQuery plugin that makes filling time inputs very easy. With a maximum of 2 clicks, a user can fill the form and there is also a keyboard navigation support too.

The sliding Date-Picker

Due to the development of Qash.nl, a Dutch personal finance website full of cool javascript features, it’s somewhat quiet around here. But to keep you satisfied, we present the sliding date-picker. This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly.

CRIR
A combination of JavaScript & CSS that enables you to create custom checkbox and radio buttons. Behind the scenes, CRIR does it with a visual trick by hiding the original form elements (but transferring any values to them) and replacing them with images.

FancyForm

Using FancyForm, which is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements, gives very nice looking form outputs. FancyForm is very quick to setup (only two lines of markup needed), extendible and will degrade if viewed from an older browser.

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

Custom HTML Form Elements

Custom HTML Form Elements is a JavaScript solution which enables you to create custom HTML form elements (radio buttons, checkboxes, etc.). In a nutshell, the JavaScript looks for any form element with class="styled" declared; hides the real element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the stages when it is clicked.

SelectBoxReplacement.JS

An unobtrusive and almost codeless way to give the ordinary HTML combobox form controls (<select>...</select>) cool looks and appeal, totally customize them, even add icons to the options in the option list, and still keep their native functionality and JavaScript events.
All you have to do is to register the runtime script, set a skin and root folder for SelectBoxReplacement.JS.

dhtmlxCombo

dhtmlxCombo can be used in four modes: editable select box – the user can either select a value from the list or type a custom value; read-only select box – the user can select just one value from the associated list of choices; filter – the whole list is loaded on the client-side, and as user begins to type, the list is updated with the appropriate values (which contain or begin from the characters typed); autocomplete – the list is loaded and shown as the user types in the input box.
Like other dhtmlx components, dhtmlxCombo provides complete Javascript API to give developers enough possibilities to control its state and behavior.

Ajax Contact Form With Xajax & PHPMailer

A simple and safe Ajax form. A JavaScript validation mechanism controls the fields & displays a common warning for all fields. Ajax function used is Xajax & the famous PHPMailer is used for sending the e-mail. Demo

jQuery – Ajax Contact Form

This Ajaxed contact form uses jQuery & the jQuery Form plugin for input validation. Inputs are sanitized for the form being safe. A success or an error message is displayed after the form is submitted without leaving the page. Demo

jQuery Contact Form

This form checks the fields to see if they are valid, displays an error if there is a problem & sends the message as an e-mail when everything is ok. E-mail is sent via a PHP file with no refresh. The script is normally an e-mail sending form which can easily be modified to turn it into a contact form.

MooTools Contact Form

A contact form built with MooTools. Input is checked via JavaScript & PHP. Message field does not accept any http addresses considering most spams reach this way.

dhtmlxToolbar

This free cross-browser JavaScript component enables you to create an attractive horizontal DHTML toolbar within minutes. dhtmlxToolbar is flexible, powerful, lightweight and easy to use.
You can freely define visual appearance of the toolbar by simply changing its parameters (color, font, borders, padding, position, background image, etc.). With a rich set of ready-made skins dhtmlxToolbar can match any application design. The component supports several button types (image, text button, two-state button, select box, slider, input box, and others).

dhtmlxSlider

A DHTML JavaScript component that allows you to implement vertical or horizontal slider into web pages. This component is highly customizable and really easy to implement. dhtmlxSlider is delivered with a number of predefined skins, but any other custom appearance can be created without any effort. Simple but effective, this JavaScript component is a neat way of creating nice-looking slider bars.

jsProgressBarHandler

Dynamic Unobtrusive Javascript Progress/Percentage Bar. jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

Phatfusion Slider

Good looking and easy to use bar and slider.

• Horizontal or Vertical options
• snap to steps
• apply transitions to the slide

An Accessible Slider

Slider control that allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.

Because there is currently no slider element in HTML, the slider is made up of non-semantic markup (divs, spans), and requires advanced CSS (positioning, background images) and Javascript to work properly. In the absence of CSS or Javascript, the slider is unusable, and the markup is meaningless to users navigating the page with keystrokes or screen readers.

AJAX – Powered AutoComplete (for Prototype.js)

The AutoComplete class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP, ASP, ASPX script, or similar). The results of the first request are cached on the client machine and are filtered as the user continues to type, to reduce the number of requests hitting the server.

Auto Complete Control

Form auto-completing feature is seen on many websites like Gmail, Yahoo and more. Auto-completing makes inputting experience easier & faster for the user. On the other hand it is very helpful for the standardization of content, keywords, tags, etc. It may prevent a user wrongly writing Mcrsoft rather than Microsoft for example. Auto Complete Control is a javascript script which offers a simple to use solution. It is not an Ajax, dynamic-keywords script. The keywords which will be shown while filling the form are defined staticly. Auto Complete Control has some nice features like defining “delimiters” which makes it easier to use for “tag inputs”. And it can be styled so easily.

SearchField

A lightweight and unobtrusive script that adds styling and static auto-suggest behaviour to your search form fields.
Auto-suggest data comes from a static data source, a JavaScript file, no data connections are necessary, updating the JavaScript with the common phrases is enough.

TextboxList

Dynamic form autocomplete code, named TextboxList, is built on Mootools javascript framework and works just like the Facebook form inputs that are very functional.

Max’s AJAX Rating System

Simple AJAX rating system. Supports multiple ratings on one page and no database required. Max’s AJAX Rating System is a simple, easy to install script which allows your visitors to rate any item on your page. You can put as many rating boxes on your page as you want. Vistors can rate only once. No database is required.

Windows Handling

Booklaylet

This is a bookmarklet wrapper code to load any other page content inside the opened window, using an overlayed div and an iframe. This code works on Firefox 1.0-3.0, Safari 2.0-3.0 and Opera 9.0.
It doesn’t work on Internet Explorer 5.01-7.0 (IE6 has a limitation to 488/508 chars).

Create site tours with Amberjack

Amberjack is a lightweight Open Source library, enabling webmasters to create cool site tours. By guiding your site visitors, Amberjack tours can greatly improve the usability of your website.
The Amberjack JavaScript library is lightweight (~4K), stable, LGPL licensed, browser compatible, set up in 2 minutes & super-easy to customize. Best of all, nothing must be installed or learned. Use the Tour Wizard to create great looking and helpful tours for your site or intranet application.

Phatfusion Pageloader

Script that load a div from another page into a div on this page.

Phatfusion multibox

Lightbox that supports images, flash, video, mp3s, html.

• supports a range of multimedia formats
• auto detects formats or you can specify the format, useful if your passing a querystring!
• html descriptions

mooSlide

Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc.
By clicking the mooSocialize button, a window will appear, which lets you choose your favorite network. Having a thumbnail of each service beside the link, it’s easy to see and find the one of your liking.
But that’s not all – it doesn’t redirect you to that page, but opens up the page in a hovered layer. Convenient and easy. On top of the opened layer is a small “x”, which allows to close the window later on.

GlassBox

GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. Take a look at the site itself: you can use the keyboard navigation: Keys 1-8 (display page), arrows left/right (previous/next page) and arrows up/down (Scroll content).

Shadowbox.js

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.
Shadowbox supports all of the web’s most popular media publishing formats including images, QuickTime, Windows Media Player, Flash, Flash video, HTML, and even external web pages. This makes it easy to display your content without converting it to some other format.
Shadowbox ships with support for many of the world’s most-spoken languages. That means that your users will probably be able to interact with the application in their native tongue.

GreyBox

GreyBox allows you to launch other websites in a modal window (like a pop-up window, but it doesn’t open another browser). This is great for when you’re linking to multiple websites and don’t want the user to navigate away from your web page or to open another browser window that might be blocked by the user’s browser. Using GreyBox is easy and involves a 3-step process outlined in the web page.
Here’s some key pages regarding GreyBox: Download page, Documentation, Examples, Installation, and Advanced Usage (for the more experienced JavaScript’ers, check this page out for tips on how you can extend the library’s functionality).

Phatfusion lightbox

An inline image popup, overlays and fades out the current page. This is based on Slimbox by Christophe Beyls.

• Lightbox has the following added features compared to Slimbox
• Specify a containing div rather than just the body.
• Place the next/previous buttons in the footer.
• Add a description with html markup.

dhtmlxLayout

dhtmlxLayout is a JavaScript DHTML component that provides powerful and efficient solution for building Ajax-enabled web interfaces with ease. This component allows you to programmatically define interface structure, including layout of elements and their sizes. End users can easily resize interface elements, collapse or expand them.
Since version 2.0 dhtmlxLayout provides a high level of integration with other DHTMLX components: dhtmlxGrid, dhtmlxTree, dhtmlxWindows, dhtmlxMenu, etc. The components can be integrated both globally for the application and separately for each Layout pane.

dhtmlxWindows

dhtmlxWindows is a JavaScript control which enables developers to build cross-browser dialog windows. The component mimics the behaviour of operating system dialogs and provides all common functionality which is available in a desktop environment: the windows can be closed, minimized/maximized, resized, put on top, dragged, etc.

Coda Popup Bubbles

Coda is one of the new web development tools for the Mac – and it’s popular amongst designers and developers I know. Panic (the developers of Coda) are also known for their sharp design. In particular, Jorge Mesa writes to ask how to re-create their ‘puff’ popup bubble shown when you mouse over the download image.

Hover Sub Tags

Using jQuery to reduce the size of the tag cloud that you have on your sites, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.

Mocha UI

Mocha is a web applications user interface library built on the Mootools javascript framework. The Mocha GUI components are made with <canvas> tag graphics.
Uses

• Web Applications
• Virtual Desktops
• Web Sites
• Widgets
• Standalone Dialog Windows, Modals, and Wizards

Color pickers

mooRainbow

An easy to integrate JavaScript color picker built with mootools.
This color picker can be attached to any element in the DOM. A click event would automatically be attached to that element and simply clicking on it you will be able to show or hide mooRainbow.

Farbtastic

A jQuery color picker plugin for easily adding a color picker into any webpage. The picker is linked to an existing element (e.g. a text field) and updates the value of the element when a color is selected.Layered transparent PNGs are used for rendering a saturation/luminance gradient inside of a hue circle. It is not Flash or pixel sized divs.

Photoshop-Like JavaScript Color Picker

There are lots of JavaScript color pickers which work great but there are few which are similar to the Photoshop’s color picker. This JavaScript color picker has HSB and RGB options, uses Prototype and compatible with all major browsers.

ColorPicker.JS

Supply your webforms or rich text online editor with this multifunctional, easy to set up, crossbrowser and cool looking color picker. All you have to do is to create instances of the script (you may have unlimited number of pickers on your page). You may select among 12 preset skins^*, several modes, 8 color presets and even create custom color palettes. Demo.

dhtmlxColorPicker

This DHTML JavaScript component allows you to implement a fast and intuitive color picker similar to the one used in graphical desktop applications. dhtmlxColorPicker handles RGB, HSL, and hex formats and provides powerful solution for adding visual color selection to your web applications or sites.

Ajax Loaders

Max’s AJAX website preloader

Max’s AJAX website preloader is a simple AJAX framework which allows you to display an animation during your website is loading. Installation and usage is very easy, only takes some line of copy and paste. An example code and detailed installation instructions are also attached.

Web 2.0 AJAX Loading Panel

Enhance your site’s look and feel during AJAX requests with the fully customizable state-of-the art Web 2.0 AJAX Loading Panel without writing a single line of code!
All you have to do is to follow a few easy steps, modify a couple of properties and add the show and hide methods to your XMLHttpRequest function.

Calendars

dhtmlxCalendar

Alightweight cross-browser JavaScript calendar which can be configured as a popup datepicker or a flat calendar. The component is easy-to-use and fully customizable. It can be attached to any text input field and provides fast and intuitive date selection in web-based applications.

Dynamic Menus and Trees

dhtmlxMenu

An Ajax-enabled JavaScript menu that represents an excellent solution for web navigation. This completely customizable and slick menu component allows you to integrate an attractive DHTML navigation menu effortlessly into your web site or application.

DHTML JavaScript Tree

dhtmlxTree (DHTML extensions Tree) is a feature rich JavaScript tree menu that allows you to effortlessly create attractive and fast-loading hierarchical interfaces with cross-browser compatibility, AJAX support, in-line node editing, and drag-n-drop capabilities. Rich client-side API provides complete control over the tree appearance and behaviour.
Special techniques implemented into the component allow loading really big trees in a matter of moments. The next step in this direction – Smart Rendering – introduced in v.1.6, solves performance problems in trees with great number of nodes per level. The tree implements AJAX model of data processing which allows the tree content to be updated seamlessly without reloading the entire webpage. All changes performed in the tree on the client-side can be saved to the database automatically in real time. Advanced drag-and-drop makes it possible to drag items not just within one tree, but between different ones (even if trees are located in different frames or iframes).

Sliding Top Menu With jQuery

Sliding menus are very effective in areas where we have limited space. This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name.
You can also use it as an info box, login area & more.
Click here to see the final working demo of this jQuery sliding menu.

dhtmlxTabbar

JavaScript tabbar control for creating dynamic tabbed-navigation interface. This Ajax-enabled UI component lets you add feature-rich and nice looking tabs to your site or web application.
The control can be easily initialized on a web page that makes building of DHTML tabbed interface a breeze. Just assign any elements on your page (for example, DIVs) to the tabs of the Tabbar, and it will automatically do all the work for you – the component will switch these elements, displaying them by clicking on the corresponding tab.

Inline Text Editing

Jeditable

Normal flow is this. User clicks text on web page. Block of text becomes a form. User edits contents and presses submit button. New text is sent to webserver and saved. Form becomes normal text again. You can test how Jeditable works with live demo.

inWriter

Asmall JavaScript class that makes inline editing of textfields possible with a very simple coding. The library supports for sure Internet Explorer 5.01-6.0, Firefox 1.0.4, Safari 2.0 and Opera 8.0, should work on IE7, Firefox (others) and Safari (others). Testers are welcome.

File Uploaders

jQuery File Upload Plugin

Uploadify is a VERY COOL jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
Uploadify is available under the GPL and MIT licenses. This allows Uploadify to be used in a number of applications and commercial products.

dhtmlxVault

dhtmlxVault (DHTML extensions File Upload) helps you to implement a modern and feature-rich file uploading part of your web application. So much wanted, the Progress bar will inform your customer about the ongoing process during a long-time operation. Different file types are displayed with the corresponding icons (you may add more file types when required).
Built with AJAX technology, the control allows files to be uploaded seamlessly without reloading the entire webpage.

FancyUpload

Swf meets Ajax. An upload widget that allows queued multiple-file upload including progress bars.

Asynchronous File Upload – YUI’s Approach

YUI is a truly amazing framework for those who are writing Ajax applications. Its JavaScript widgets allow programmer to create richly interactive UI components with ease. However, these UI widgets are not very useful unless the end result of the interaction can be saved to the server side. Hence YUI has added Ajax support to most of its widgets. While many people are familiar with YUI Connection Manager’s Ajax capability, only a few know that Connection Manager can be used to simulate Ajax-like file upload.

Webtoolkit Ajax Uploader

Ever wanted to upload files using AJAX like in GMAIL, without reloading the page? Now you can. Cross browser method to upload files using AJAX in only 1Kb of code. You need to create a form with file fields you wish to upload and define “onsubmit” event. Look at the example below how to do that. Tested in IE5.5+, FF1.0+, OP 8.0+. demo

Upload Progress Meter

This is an AJAX upload progress meter for PHP. The code is released under the GPL.Author is Joshua Eichorn
It uses the upload progress meter patch and extension from: http://pdoru.from.ro/. For more information read the blog posting about this code

Ajax upload

AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and starting from version 2.0 doesn’t require any library to run (although it will use some jQuery functions if it’s already loaded on the page). AJAX Upload doesn’t pollute the global namespace, so it’s compatible with jQuery, Prototypejs, Mootools, and other JavaScript libraries. View an usage examples for jquery and prototype with various options.

Mobile Devices

Want iPhone style on a webpage? Marcofolio.net is presenting a nice tutorial (with source files) for creating the famous iPhone unlock interface with XHTML-CSS & the slide effect via jQuery.
Although there are missing features from the standard effect like “the slider not going back”, it is still inspiring & can be used to create a form control (like captcha) or present a content in an iPhone like interface. View Demo.

The iPhone Contacts App with CSS and jQuery

Want iPhone style on a webpage? The design of the Contacts app will be used and displayed in your browser. Funny fact is that this is the first “iPhone to CSS/jQuery conversion” that I created (before the unlock and springboard screen). I’ll try to give you the real iPhone feeling with these tutorials.

• XHTML and CSS valid.
• “Top indicator” changes character while scrolling (Just like the iPhone).
• Including “Search” on the right (Just like the iPhone).
• Pretty sleek interface, including see-through elements (Just like the iPhone).
• Falls back nicely when the user has JavaScript disabled.
• Combined with the unlock and springboard screen, it looks like the real deal.
• Tested and working on Firefox 3, Internet Explorer 7 (With fixes) and Safari 3.

View Demo.

The iPhone Springboard in xHTML, CSS and jQuery

Want iPhone style on a webpage? iPhone Springboard in xHTML, CSS and jQuery.

Libraries

dhtmlxAjax

dhtmlxAjax is a JavaScript library that provides an easy way to send Ajax requests to the server and process the response. It allows sending GET, POST requests in both asynchronous and synchronous modes. The results of request execution are provided as a standard JavaScript object Response together with the ability to access its textual and XML parts (responseText, responseXML). dhtmlxAjax provides the following possibilities for processing the response: XPath processing, XSL transformation, serialization of XML object to string.
With dhtmlxAjax library you can add the advantage and flexibility of Ajax communication between client and server to any web interface and enhance your application with Ajax capabilities.

The Yahoo! User Interface Library (YUI)

The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses. The YUI project includes the YUI Library and two build-time tools: YUI Compressor (minification) and YUI Doc (documentation engine for JavaScript code).

inputEx
Javascript framework, built on the top of YUI, for creating forms and form objects. It uses no html (opposite of unobtrusive libraries): all the fields and forms are configured using JSON. It provides a very efficient abstraction for building interactive web applications.

Ext JS – JavaScript Library

An extensive JavaScript-Framework with numerous modules and components such as tables, trees, windows, layouts, forms, and tabs. All of them look as if they’ve been used in standard desktop-applications.

liteAJaX

This is a small proof-of-concept of a lightweight AJaX class. Should work on: Internet Explorer 5.5+, Firefox, Opera 7.6+

GWT-Ext Widget Library

GWT-Ext is a powerful widget library that provides rich widgets like Grid with sort, paging and filtering, Tree’s with Drag & Drop support, highly customizable ComboBoxes, Tab Panels, Menus & Toolbars, Dialogs, Forms and a lot more right out of the box with a powerful and easy to use API. It uses GWT and Ext.

Cookies Handling

aMemento

This is a small javascript class to handle Cookies in a smarter way. Very simple, but well packaged. The library supports for sure Firefox 1.0-2.0, should work on Internet Explorer 5.01-7.0, Safari 1.0-2.0 and Opera 6.0-9.0. Testers are welcome.