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.[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

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 (outdated – link removed) 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.

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.

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.

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

Table / Grid Handling

Phatfusion Sortabletable

This scripts gives you simple sort and filter in tables.

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.

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.

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.

An Accessible Slider

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.

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

Phatfusion lightbox

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.

Check out our latest 650-568 dumps compiled by our 199-01 certified team to help you in pass real EC0-350 exam.

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.