Blog Entry

Preferences Form Using HTML5 Local Storage, Drag And Drop And New Input Types

This demo incorporates the new Web Storage API, the Drag And Drop API, and finally, some new input types available to us. Using the form, the web page visitor can set font size, web page background color, font style and colour, and so forth. These settings make use of the new colour picker control, the range input, and drag and drop of web page elements. These settings are then stored ready for their next visit in Local Storage, happening client-side.

Introduction

HTML5 has several new input types for forms. These new features allow better input control and validation. The new input types are:

•color

•date

•datetime

•datetime-local

•email

•month

•number

•range

•search

•tel

•time

•url

•week

All of these input types can be used now as they fallback to ordinary text fields in non-supporting browsers, and there is in any case, a myriad of Javascript fallback plug ins to replicate this functionality.

Range Input Type

On the demo web page of the demo website, the form uses this input type for adjusting the size of text, to be saved as a user preference for the look of the website:

There is no fallback in place in the demo web page as this is an example of how the browser displays this input without any JavaScript or HTML5 support. View the demo page in IE and you will simply see a text field, which is perfectly useable.

Color Input Type

On the demo web page, the form uses this input type for choosing the background colour of the web page, to be saved as a user preference.

For storing user preference settings across sessions we use the localStorage object, using JavaScript to add and remove items, as key value pairs. Items stored are specific to the browser used to open the client, and so if the player opens the client in another browser his previous browser settings will not take effect. These values only exist for the domain the application is hosted on.

Local storage is supported on the following browsers:

Chrome 5+

Firefox 3.5+

Safari 4+

IE8+

Opera 10.5+

IOS

Android browsers

The max quota for data in local storage is 5mbytes, and this is per origin (domain) not per application. If this is exceeded when trying to set an item, a QUOTA_EXCEEDED_ERR exception is thrown.

The preferences form on the demo page also makes use of the HTML5 color picker control, and range input.

Please Note: Using Chrome Developer Tools means that you can easily see what is currently in Local Storage on the device you are developing on.

Fallback Solution

If not supported we use scripts/plugins/localStorage/jquery.Storage.js. This library can be found at:

In the demo it is possible to set user preferences, such as website background colour. This form employs the HTML5 Drag And Drop API to select a coloured square and drag it to the drop area, which then sets that colour into Local Storage, and sets CSS to change the background colour of the web page. The script for this can be found in scripts/myScripts/dragAndDrop.js.

Basically we get a reference to a <div> and add the following listeners to it:

onDragStart(e) {

e.dataTransfer.effectAllowed = "copy";

e.dataTransfer.setData("Text", e.target.style.backgroundColor);

}

function onDragOver(e) {

if (e.preventDefault) {

e.preventDefault(); // Required

}

e.dataTransfer.dropEffect = "copy";

return false;

}

function onDrop(e) {

e.target.style.backgroundColor = e.dataTransfer.getData("Text");

colorChosen = e.target.style.backgroundColor;

return false;

}

function onDragEnter(e) {

dragColour = e.target.style.backgroundColor;

e.target.style.backgroundColor = "#e0e0e0";

return false;

}

function onDragLeave(e) {

e.target.style.background;

}

Fallback Solution

If we detect that this feature is unsupported, we fallback to the script that uses JQuery instead to achieve this functionality: scripts/myScripts/jQueryDragAndDrop.js.

Categories

About

Hello, and welcome to my blog devoted to all things concerning web design and development.

I am Tim Daniels, a web designer and software developer, currently living in Bere Alston. I graduated from Plymouth University with an Upper Second Class (Hons) Degree in Advanced Web Technologies, and since then, for the last nine years, have been working in the IT industry.

The aim of the blog is to discuss and document any new techniques and tricks that I come across in my quest to become a better developer.

I do not profess to be an expert in any of these topics, but want to build up a knowledge base of modern web design and responsive techniques. Please feel free to download any supplied source code, and to use these components in your own projects.

Tim Daniels Design

I am Tim Daniels, a web designer and software developer, currently living in Bere Alston. The technologies I know well are: C#, JavaScript, CSS, Java, PHP and HTML5. My full C.V. can be downloaded here.