150 Worth Knowing Web Developer Tools and Techniques

June 19, 2013 · 75 comments

by Lars

ajax_techniques
Creating state of the Art Web Development in reasonable time requires access to quality resources, tools and experience. You simply cant afford to start over from scratch all the time when everyone else is taking advantage of all the free goodies making advanced Web Development a easier.

This article combines tools, scripts, solutions that I have stumbled over over time and that I find worth knowing. You will find different types of Ajax scripts and tricks ready to use, menus, navigation and tabs, auto completion, form and button enhancements, table and grid aid, powerful stuff you can do with images windows and much more. Get started and boost your development with 125 worth knowing Web Developer Tools and Techniques.


ElegantThemes
ThemeForest

Advertisement

Ajax Navigation, Menus, Tabs

Ajax Tabs Content Script

This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs.

Ajax Tabs Content Script

Virtual Pagination script

Does your page contain lengthy chunks of text, a series of images, or long forms that dissuade people from reading them top to bottom? This script lets you transform long content on your page into a series of virtual pages, browseable via pagination links.

Virtual Pagination script

Switch Content Script

One of the most versatile scripts of its kind, we created this one to compact arbitrary content on your page so they’re expandable on demand. This allows you to save space within your webpage and even add to the aesthetics of the webpage’s design in many cases.

Switch Content Script

Switch Content Script II

Switch Content Script II is a flexible script that adds contact/expand functionality to arbitrary block content on a page using a simple “icon” to toggle its state.

Switch Content Script II

19. Ajax Pagination script

This script lets you include content from multiple pages and display them on demand, using Ajax. Pagination links are automatically created, with each page downloaded only when requested

Ajax Pagination script

RSS Display Boxes

Using Ajax, this script makes it easy to display RSS feeds from other sites inside DIV containers. Each RSS box can be independently tailored, from the RSS feed to fetch, how many items to show (and whether to paginate them), to what portions of each entry (just the “title”, or “title” plus “description” etc) to display. All this is done on the client side via the script’s exposed methods.

RSS Display Boxes

Ajax scrolling pages

This script loads content from the server and inserts it into an empty HTML element(example a DIV tag) on your page. New pages can be appended dynamically and the script will scroll down to the content of the new pages.

Ajax scrolling pages

Accordion Content script

Group contents together and reveal them on demand when the user clicks on their associated headers, with Accordion content script! Specify whether only one content within the group should be open at any given time, style the headers depending on their content state, and even enable persistence so the state of the contents is preserved within a browser session.

Accordion Content script

Form Auto Completion Enhancements

Ajax Auto Suggest v.2

Very flexible and professionally looking auto complete Ajax script.

  • Optional JSON Support
  • Callback function support (set ID when user selects list item, or anything else…)
  • Can display more information
  • An optional message when no results are returned
  • Completes field when enter key is pressed
  • Slick new look (2.0 ready!) including fade effect!

view the demo download AutoSuggest v2.1.3 (make sure to check site for updates!)

JSON showcase:

slideshow

XML showcase:

slideshow

AutoCompleter (v1.1)

This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

Local Country showcase:

slideshow

HTTP Request Showcase:

slideshow

TextboxList

TextboxList turns normal text boxes into a widget which can be navigated with the keyboard, effectively turning your input into a “list” of items that can be easily deleted. It comes with an Auto complete plugin.

Click here to see it in action.

slideshow

TextboxList is essentially very easy to use, but is extremely configurable and extensible. Let’s review some sample usage scenarios:

loadXML($res);new TextboxList('form_tags_input');

This turns the <input id=”form_tags_input”> into a TextboxList widget. By default, as shown in the demo, the user can add new boxes by pressing enter, write between boxes, delete them with backspace and delete keys. Additionally, a delete button is shown in each of the added items. All these behaviors can be configured, as shown in the sections below.

var t = new TextboxList('form_tags_input');
t.add('Tag 1').add('Tag 2').add('Tag 3');

In this example we call the public add() method of the TextboxList instance to add items from JavaScript.

slideshow

Spellify

AJAX driven web application which uses the Google spell checker to automatically spell check and display spelling suggestions after the user stops typing. It supports several languages and can spell check any pasted or typed text.

slideshow

Spellify is a script.aculo.us/prototype based spell checker for form fields that utilizes Google as its spell check engine

Requirements
- PHP 4+ with CURL library installed (developed using PHP 4.4.6)
- script.aculo.us 1.8.0 (latest prototype.js, and effects.js required)

download form demo

AJAX – Powered AutoComplete (for Prototype.js)

The AutoComplete class adds a pull down 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.

ajax-powered-autocomplete

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.

Auto-Complete-Control

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.

searchfield

Dynamic client lookup

This script uses Ajaxto autofill a form – based on Simple Ajax Code Kit library(SACK). Open the Demo and type in 1001 in the “client ID” text field. AJAX will when you have done this call a script on the server and auto fill the rest of the form with client data.

There are very good instructions on how to get this installed and configured.

Dynamic client lookup

Modal Windows

Lightbox JS v2.0

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers. This is the latest version of Lokesh Dhakar initial Lightbox JS script.

lightwindow

Lightbox Plus

WordPress is so popular and its huge free community have put forward several plugins that provide Lightbox style functionality. Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar (see above). Lightbox Plus is used to create overlay display images on the web-page and to automatically add the correct overlay links to images.

lightwindow

The Lightbox Effect without Lightbox

lightwindow

Lightbox Gone Wild!

In this tutorial, we’ll take a look at how to create a modal window using some nifty JavaScript and CSS.

lightwindow

Leightbox

I’ve changed ParticleTree’s lightbox functionality to allow the use of inline div’s instead of AJAX calls. Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screenreaders etc. This adaptation makes that possible. Mind you, i’ve completely removed the AJAX calls.

lightwindow

GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way.

  • It does not conflict with pop-up blockers
  • It’s only 22 KB!
  • It’s super easy to setup
  • It’s super easy to use
  • You can easily alter the style as it is controlled through CSS

GreyBox

Interstitial Content Box

An interstitial is a container that appears over an entire webpage intermittently to display content in an eye catching way. A common example is an interstitial ad, though advertising is certainly just one of many handy uses of an interstitial.

Interstitial Content Box

Building a Lightbox with jQuery

Rather than assume that you know what I mean by a lightbox, I’ll briefly explain it. The first experience I had with this UI pattern, and I believe the first real example of it, was by Lokesh Dhakar in 2005. Since then, this pattern of simple, unobtrusive script used to overlay images on the current page huddletogether.com is everywhere. It’s hard to find a modern site without some variant of the in-page popup element over a semi-transparent background. In fact, if you click any external link on my site, you will get that site loaded for you in an lightboxed iframe.

lightwindow

SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website

SmoothGallery

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

Booklaylet

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.

amberjack

Phatfusion Pageloader

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

pageloader

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

multibox

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.

mooslide

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

glassbox

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.

shadowbox

GreyBox

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

GreyBox

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.

lightbox

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.

coda

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.

tagcloud

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

mochaui

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

slideshow

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!

polaroid_photo_viewer

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.

How-to-add-advanced-tooltips

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

imagemenu

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.

tjpzoom

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.

jQuery-Multimedia

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.

tipmage

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.

slider-gallery

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

instant

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.

icarousel

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.

qgallery

ImageFlow

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

imageflow

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

image-cross-fade-transition

Dynamic Content

Ajax tooltip

A nice tooltip script where the content of the tooltip is retrieved by Ajax from external files. Can be styles to your specific needs.

Ajax tooltip

Advanced RSS Ticker

RSS is a popular format for syndicating and displaying external content on your site, such as the latest headlines from popular news sites. With this powerful RSS ticker script, you can now easily display any RSS content on your site in a ticker fashion!

Advanced RSS Ticker

Pausing RSS scroller

Pausing RSS scroller is an innovative scroller that combines PHP and external JavaScript to let you show any RSS feed on your site- and beyond! By bypassing Ajax in favour of dynamically loaded JavaScript, the scroller can be included on any site, enabling you to syndicate your feed for other sites to display, just by allowing webmasters to cut and paste the frontend portion of this script.

Pausing RSS scroller

Ajax XML Ticker

This is an Ajax enhanced ticker script that lets you use a text file as the contents of the ticker to show! Easily define your messages, which support rich HTML, all inside this external text file. Now there’s no more excuse to not update the contents of your ticker more often! Note that due to Ajax limitations, the ticker script and text file to draw from need to be on the same domain/server.

Ajax XML Ticker

Dynamically loaded articles

This is a basic example showing you how to use AJAX. In this

script, you have a list of article titles at the right side. When you click on one of them, AJAX will be used to request the content of the article from an

external file and show it in the main <DIV>.

Dynamically loaded articles

“Slide in” RSS items

This scripts reads RSS feeds from an

external source and displays them on your page. Each items appears after a predefined number of seconds by sliding in from the right side.

Slide in RSS items

Tables and Grids

Phatfusion Sortabletable

This scripts gives you simple sort and filter in tables.

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

sortabletable

mooTable

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

mootable

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.

dhtmlxGrid

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.

tablecloth

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

table-actions

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.

KeyTable

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!

datatables

TableKit

TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.

TableKit

Sortable Ajax Tables

MochiKit to do sortable tables from data given by the server in either JSON or XML format.

Sortable Ajax Tables

On Screen Editing

AJAX inline text edit 2.0

A small piece of javascript reads al SPAN tags, checks if it has class=“editText” and a id=. If that is true, it adds a onclick function. That onclick function will create a textfield or input (depending on the size of the editable text). Someone has the ability to edit the field. When the text field is blurred, it will read the contents, and starts a XMLHttpRequest and ‘sends’ the content + fieldname + any set vars to an update file. That file will update your database, and reply with the newly set text and the textfield will dissapear again.

AJAX instant edit script

Create flickr-like Editing Fields

  1. Show user the data field normally (for instance: the title of a picture)
  2. When mouse rolls over that title, make the background of the word yellow
  3. If the user clicks on the word, change that word to a input box with the word in it. Also show a “save” and “cancel” button
  4. A user can rename the picture and then push “save.”
  5. Run a little script that updates the name into the database
  6. Remove the input box and the buttons and return to the original title display (updated with new title).

Create flickr-like Editing Fields

Forms Validation and masks

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.

imask

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 “(###) ###-####”.

dfilter

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.

Typecast

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)

masked-input-plugin

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

javascriptools

Password Field Image Mask

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

password-mask

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.

livevalidation

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.

validate

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.

validanguage

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

jsvalidate

Form Enhancements

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.

Spin_Box_JS

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.

expanding_a_html_form

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!

customformelements

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

wforms

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.

uni-form

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.

time_picker

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.

ui-timepickr

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.

dateslider

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.

crir

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.

fancy-form

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.

jQuery-checkbox

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.

custom-checkboxes-and-radio-buttons

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.

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

dhtmlxCombo

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

circlesixdesign

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

jquerycontactform

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

LightForm

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

AJAX-contact-Form

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

contactform

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.

protoformclass

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

xajax_contact_form_using_phpmailer

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

ajaxcontactformv1

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.

jqueryajaxform

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.

mootoolssecureform

Sliders and Progress Bars

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.

dhtmlxSlider

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.

jsProgressBarHandler

Phatfusion Slider

Good looking and easy to use bar and slider.

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

slider

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.

accessible-slider

Button enhancements

Beautiful CSS buttons with icon set

If you love clean love clean design and in general simple solutions to design nice and attractive elements for my websites, this tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.

slideshow

UI technique: changing submit button appearance via background images

“Now every so often, in my applications there will be a fair bit of processing going on after a form submission– enough to make for a delay of a second or more before the browser redraws the screen. This can happen particularly when the form allows for a file upload. And I know people for whom that one-second delay is enough to make them wonder if their click was received. So they click again… and perhaps again… and in the process, send several identical requests up to the server (probably making the page-refresh delay even worse for themselves). So, my solution is to change the state of the submit button after the first click to let them know that there is, indeed, something going on after the first click”

slideshow

Submit A Form Without Page Refresh using jQuery

“Previously on NETTUTS, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh. In this tutorial I’ll show you how easy it is to do just that — submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background). “

slideshow

Preventing multiple page requests after double-clicks

To prevent multiple clicks from sending more than one request, you can use a JavaScript that does up to two things: first, you can use the “return false;” function of a hyperlink or submit button to prevent any click after the first from sending a request, and second, you can change the link or button to a disabled state so that the browser won’t accept clicks and the user can see that a request has already been sent.

<input type="submit" name="save" value="Save" onclick="this.form.submit(); this.disabled = 1;" />

Simple Image Submit Button Rollovers with jQuery

Have you ever wanted a simple rollover technique with a form submission button? Something like this:

slideshow

… without having to resort to a complicated mess of javascript form submission and cross browser compatibility issues? With jQuery it’s really easy

How to make sexy buttons with CSS

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.

slideshow

The ULTIMATE Submit Button REVEALED!

See how Eric Graham, “The Conversion Doctor” creates what he likes to call “The ULTIMATE Submit Button”! He first noticed a border around a submit button about 4 years ago when he saw it on Google’s Adsense Log-in page. Since that time he tested several different variations and colors of borders around submit buttons and in most cases a red border converts best.

slideshow

Rediscovering the Button Element

Creating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing withform elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button.

slideshow

CSS Oval buttons

These buttons use the sliding doors technique of CSS, plus two sliced background images with “on” and “off” states.

slideshow

4-Style your Form Buttons with Only CSS and Zero Javascript

show you how to style submit button without any JavaScript and how to make rollover effect! can you believe it ZERO JavaScript and tested on all browsers.

slideshow

Scalable CSS Buttons Using PNG and Background Colors

Create dynamic CSS buttons using PNG, transparency and background colors that degrades nicely and supports full scalability. With full scalability it means it should resize in all directions according to the font size and content.

slideshow

Make fancy buttons using CSS sliding doors technique

This article will show you how to create fancy buttons using CSS sliding doors technique. It is much better to use this technique than to use image buttons because you can apply the style to any link and at the same time you don’t have to create an image for each button.

slideshow

slideshow

3D CSS buttons

By using an element’s border-style CSS attribute to outset, you can easily create a 3D looking button. Taking it one step further the button can also appear depressed if desired, by switching from a border-style value of outset to inset.

slideshow

Pressed Button State With CSS

The active anchor state is the state an anchor (a link) is in when you click on it. The moment you click on a link, it becomes active. You will use the “hover” or “visited” states in this tutorial, but the active state can come in very handy when you’ve got custom styled buttons.

slideshow

CSS Sliding Door using only 1 image

In this tutorial, you will be shown how to code the navigation bar using only 1 image, making it user friendly and uses less CSS code.

slideshow

The buttons are designed to look very similar to basic HTML input buttons. But they can handle multiple interactions with one basic design. The buttons we’re using are imageless, and they’re created entirely using HTML and CSS, plus some JavaScript to manage the behavior. They’re also easily skinnable with a few lines of CSS, which was a key factor now that Gmail has themes.

slideshow

Roll Over Button

In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded. The advantage to this technique is that upon hovering over your button, the user won’t have to wait for it’s hover state image to appear; there’ll be no ‘graphic-less’ moment while the image loads, all without a single line of JavaScript.

slideshow

Liquid & Color Adjustable CSS Buttons

When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop. Making future adjustments on the verbiage and colors can be also time consuming. By having dynamic buttons, this scenario is much easier to handle, and by having liquid and color adjustable buttons with CSS, we are able to change the verbiage and colors with ease.

slideshow

CSS Hover Button

In this tutorial, to start with, you will need to make an image in two different states (state number one will be the natural state and state number two will be the hover state) and bring the button altogether with CSS.

slideshow

Submit button should look same everywhere

When some one works on a website design, it is important that the look will remain same in all browsers. But creating a consistent interface for users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done.

slideshow

CSS Overlapping Arrow Buttons

“I was recently asked to create arrow buttons for a step-through type of navigation. At first, from a CSS standpoint, it seemed like trying to fit a triangle peg in a square hole. But with a little creative maneuvering I was able to work it out. I’m sure there are many ways… but here’s my approach.”

slideshow

Pure CSS Buttons v1.0 by Halmat Ferello

This is simple and effective way to have buttons that scale (width-wise) without any weird browser-specific CSS (apart from IE6/7) or JavaScript implementations. Just using pure CSS goodness.

And since we should care about the user, the buttons also offer feedback – hence different images for :hover, :active CSS events.

slideshow

Form Upload Enhancements

FancyUpload – Swiff meets Ajax (v3.0)

This free open source upload form script is really interesting, works very well and looks good.

Swiff meets Ajax for powerful and elegant uploads. 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, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all.

Multiple file upload showcase:

slideshow

Attach file upload showcase (google mail style):

slideshow

Features

  • Select and upload multiple files
  • Filter files by type in the select dialog
  • A lot of possible Events to add your own behaviour
  • Show and filter useful file information before the upload starts
  • Limit uploads by file count, type or size
  • Platform and server independent, just needs Flash 9+ (> 95% penetration)
  • Graceful Degradation, since the element is replaced after the Flash is loaded successfully
  • Cancel running uploads, add files during upload
  • Everything is optional, documented and easy editable
  • New in 2.0
    • Get the server response after upload for showing additional informations or previewing the image, etc.
    • Shows the current upload speed and the time left
    • Send additional request data via GET or POST variables
    • Set the filename for the upload request
  • New in 3.0 (Completely rewritten API)
    • Fully Flash 9 and 10 compatible and an additional IFrame-based uploader
    • Browse-button can be an invisible overlay or an interactive image sprite
    • Event based Flash communication, future-proof und more stable
    • File-specific options for setting url, data and method, intelligently merged
    • Append cookies automatically to the request data
    • Relative URLs are converted automatically

Visit the demo seen on image.

FancyUpload is available under the MIT License and can be downloded here.

Other useful stuff

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

dhtmlxToolbar

{ 30 comments… read them below or add one }

zavera January 12, 2013 at 8:56 am

Amazing list for web developers to extend knowledge with tools and techniques!

Reply

wdt June 3, 2012 at 12:54 pm
new era September 20, 2011 at 3:45 pm

That list is awesome!!!

Reply

cheap custom jerseys May 19, 2011 at 9:02 am

150 Worth Knowing Web Developer Tools and Techniques

Reply

arnob.resumes May 2, 2011 at 8:38 pm

Wow!! You really stay on top of things… This is a great blog you have!! I’m totally keeping your blog bookmarked! Lots of great info. for ‘’ !! I’m so glad I came across this… I was unaware that most of what you have posted was going on… Very interesting and resourceful blog!

Reply

venis April 23, 2011 at 1:48 am
Rajveer Singh January 24, 2011 at 1:55 pm

thats really great…gd efforts….everything is present here

Reply

Gordon November 13, 2010 at 11:29 am

The point is people like You get people like me knowledge. Thank You for that :)

Reply

Supachet November 5, 2010 at 5:29 am

Good Job
Thank

Reply

printable subway coupon June 19, 2010 at 9:44 pm

Wonderful web-site, where did you discovered this details in this article? I am glad I observed it. i will be checking out back soon to check what other content you are able to have.

Reply

Teylor Feliz April 6, 2010 at 3:04 am

Thanks for the collection.

Good job!!!!

Reply

Elmer | Digital Room December 12, 2009 at 2:33 am

A powerhouse list!

Reply

abel September 3, 2009 at 5:36 pm

Great tools….thanks…need more creative tools….

Reply

Udhayakumar September 3, 2009 at 11:58 am

Its a great information for the web developers like me…

Thank you…

Reply

ming andrada August 26, 2009 at 10:36 am

this is very nice…this will really help me to improve my projects and my own website too…

Reply

Dinos August 9, 2009 at 9:42 am

Great list! Very usefull!!!

Reply

Paul August 6, 2009 at 4:58 am

Cool, let’s see which we’ll use for the overhaul from our site.
http://www.jerleaw.com

Reply

Viraj July 15, 2009 at 5:18 am

What a list. Its really really helpful.

Million thanks!.

Reply

Navdeep July 10, 2009 at 5:38 am

I am Web Dev…….. Great…… This collection will surely help me in my daily projects knitting…….. Thanks a lot

Reply

Jay Philips July 9, 2009 at 2:37 pm

Wow, what an awesome list. Thank you so much for taking the time to put all of this together.

Reply

photoshop masking July 8, 2009 at 4:54 am

Wow! What a great list!! Thanks for sharing!!

Reply

Graphiz July 7, 2009 at 4:05 pm

Great article, a bit too long maybe…

Reply

j2eehunter July 6, 2009 at 4:02 am

really great collection dude..
all in one..
thanks lot
:)

Reply

Ezrad Lionel July 5, 2009 at 8:16 pm

That list was definitely padded. Should have used margins.

Reply

Web Design Mumbai July 5, 2009 at 7:43 pm

absolutely superb list….. really helpful for me.

thanks a ton

Reply

Dainis Graveris July 5, 2009 at 2:17 pm

This is sick! So huge list with many many useful tools, I bet this article took You several days to complete – a huge work.. Appreciated your time..and bookmarking this one definitely!

Reply

clussman July 5, 2009 at 1:57 pm

Nice list, thanks.

Small correction: the third section title should be “Modal Windows” not “Mordal Windows”–unless they’re windows in Sauron’s house. ;)

Reply

tripwiremag July 5, 2009 at 5:22 pm

They actually are….thanks for the message I’ll corrent it!

Reply

sunil July 5, 2009 at 12:13 pm

wawoo.. great list.. I will save it in my bookmark

Reply

Hirvesh July 5, 2009 at 3:31 am

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 45 trackbacks }

Previous post:

Next post:


Web Analytics