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

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.

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.

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

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

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.

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.

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.

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:

XML showcase:

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:

HTTP Request Showcase:

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.

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.

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.

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.

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.

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.

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.

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.

The Lightbox Effect without Lightbox

Lightbox Gone Wild!

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

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.

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

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.

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.

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

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

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';});});

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.

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!

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.

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.

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

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

Tables and Grids

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!

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.

Sortable Ajax Tables

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

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.

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

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.

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.

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.

Phatfusion form validation

Simple and easy to use form validation based on mootools.

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.

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

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.

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.

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!

wForms: Easy JavaScript Form Controls

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.

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.

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

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

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

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

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.

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.

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.

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

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

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.