2010 December | theburningmonk.com

Having fun with HTML5 — contenteditable attribute

As I go through the HTML5 spec, I find some useful new feature just about everywhere, and the new contenteditable attribute is certainly one of those. It’s supported by most elements and provides a simple and yet effective way for you to allow the users to edit user contents (blog posts for instance) inline as opposed to having to open up a separate form.

It couldn’t be simpler to use it, just set the contenteditable attribute of your element to true:

<article id="editable" contenteditable="true">
    <p>This area is an article, its border will light up when you click anywhere inside.</p>
    …
</article>

And now when the user can edit the content of the element themselves:

Here is a quick demo I’ve put together which uses two buttons to save and clear changes to/from the local storage, though you can just easily save the changes automatically when the element loses the focus.

Having fun with HTML5 — Local Storage and Session Storage

HTML5 includes two new ways to store data on the client – local storage and session storage. Local storage has no time limit on how long the data should be kept around, session storage on the other hand (as the name suggests) stores data for only one session.

Traditionally you can store data on the client using cookies, but they are not suited for storing large amounts of data because everything gets sent back to the server on every request and hence slows down the roundtrip and making the user experience less enjoyable.

Using the new storage methods, data is only passed on when asked for and it’s therefore possible to store large amounts of data without slowing down the site. The data is also sandboxed and a website can only access data stored by itself, you can use javascript to set and get data from the relevant storage.

Browser Support Detection

A browser that supports HTML5’s local storage will have a localStorage property on the global window object, you can write your own function to check for the existence of and validity (not null) of the localStorage property, or use a third-party library like Modernizr.

Modernizr is an open source, light weight javascript library that detects support for many HTML5 and CSS3 features, when it runs it creates a global object called Modernizr. To check for local storage support, all you need to do is to check the boolean flag for local storage:

if (Modernizr.localstorage) {
    // browser supports local storage
}
else {
    // browser doesn't support local storage
}

or similarly for session storage:

if (Modernizr.sessionstorage) {
    // browser supports local storage
}
else {
    // browser doesn't support local storage
}

API

The full API specification for the localStorage and sessionStorage objects can be found here. At the time of writing, this is how the common Storage interface look:

Demo

I’ve put together a quick demo here to illustrate how to detect and use the local and session storage to get, set, remove and clear stored items (well, basically, covers each of the available methods on the Storage interface above).

The page itself is simple and crude, just a couple of <div> and most importantly two tables which I use to show all the key value pairs stored in the local and session storage:

Page Load

When the page finishes loading, I call the Modernizr object to find out if the current browser supports local and/or session storage, if not, hide the relevant <div> elements so the tables are not even shown on the page:

$(document).ready(function () {
    // hide the storage divs if browser doesn't support local storage or session storage

    if (Modernizr.localstorage && Modernizr.sessionstorage) {
        $("#detectionSpan").html("Your browser supports both local and session storage");
    } else {
        if (!Modernizr.localstorage) {
            $("#detectionSpan").html("Your browser doesn't support local storage");
            $("#localStorageDiv").hide();
        } else {
            $("#detectionSpan").html("Your browser doesn't support session storage");
            $("#sessionStorageDiv").hide();
        }
    }
    showKeys();
});

Populate Tables

The showKeys() function populates the localTable and sessionTable tables with the keys in the corresponding storage if and only if the storage type is supported by the browser:

// show the keys currently held in the local and session storage
function showKeys() {
    if (Modernizr.localstorage) {
        showStorageKeys("local", "#localTable");
    }
    if (Modernizr.sessionstorage) {
        showStorageKeys("session", "#sessionTable");
    }
}

// show the keys currently held in the specified type of storage in the specified table
function showStorageKeys(type, table) {
    // get the specified type of storage, i.e. local or session
    var storage = window[type + 'Storage'];

    // remove the rows in the specified table before we start
    $(table + " > tbody > tr").remove();

    // loop through the existing keys in the storage and add them to the TBODY element as rows
    for (var i = 0; i < storage.length; i++) {
        var key = storage.key(i);
        var value = storage.getItem(key);
        $(table + " > tbody:last")
            .append("<tr><td>" + key + "</td>" +
                    "<td>" + value + "</td>" +
                    "<td><input type='submit' value='Remove' onclick='removeItem(\"" + type + "\", \"" + key + "\")'/></td></tr>");
    }
}

Introducing the new placeholder attribute

You might have noticed that the two text boxes had placeholder text similar to that familiar search box in Firefox:

This is done using HTML5’s placeholder attribute for the <input> tag:

<input id="keyText" placeholder="Enter key"/>
<input id="valueText" placeholder="Enter value"/>

Nice and easy, eh? ;-)

Setting an item

To add a new key value pair or update the value associated with an existing key, you just have to call the setItem method on the intended storage object:

// adds a new key to both local and session storage
function setKey() {
    var key = $("#keyText").val();
    var value = $("#valueText").val();

    if (Modernizr.localstorage) {
        localStorage.setItem(key, value);
    }
    if (Modernizr.sessionstorage) {
        sessionStorage.setItem(key, value);
    }
    showKeys();
}

Removing an item

Earlier in the showStorageKeys(type, table) function, I added a row to the relevant table for each key value pair in the storage including a button with a handler for the onclick event. The handlers are created with the correct storage type (“local” or “session”) and key for the current row baked in already so that they will call the removeItem(type, key) function with the correct parameters:

// removes an item with the specified key from the specified type of storage
function removeItem(type, key) {
    // get the specified type of storage, i.e. local or session
    var storage = window[type + 'Storage'];
    storage.removeItem(key);
    showKeys();
}

Clearing all items

Finally, the ’”Clear” buttons underneath the tables call the clearLocalKeys() and clearSessionKeys() function to remove all the key value pairs in the corresponding storage:

function clearLocalKeys() {
    clearKeys("local");
}

function clearSessionKeys() {
    clearKeys("session");
}

// clear all the held keys in the specified type of storage
function clearKeys(type) {
    // get the specified type of storage, i.e. local or session
    var storage = window[type + 'Storage'];

    // clear the keys
    storage.clear();

    showKeys();
}

So that covers all the interesting bits about the demo and all and all pretty straight forward and easy to implement, admittedly I’m a javascript novice so if you feel any of this could be done better please feel free to point out to me!

Having fun with CSS3 — Box Shadow property

CSS3 introduces a useful little property called box-shadow, which as the name suggests adds a shadow to an element.

Simple box shadow

You can create a basic box shadow like this:

div {
    -webkit-box-shadow: 10px 20px #000;  /* for Chrome */
    -moz-box-shadow: 10px 20px #000;  /* for Firefox */
}

This casts a shadow with an X-offset of 10 pixels and a Y-offset of 20 pixels:

You can equally use negative values for the offsets, which will simply cast the shadow onto the other side of the element:

div {
    -webkit-box-shadow: –10px -20px #000;  /* for Chrome */
    -moz-box-shadow: -10px -20px #000;  /* for Firefox */
}

You might have noticed the use of vendor prefixes (-webkit for Chrome and –moz for Firefox), the reason for this is described in my post about the border radius here.

Adding a blur distance

To make the shadow look more realistic, you can blur the shadow by supplying an additional parameter:

div {
    -webkit-box-shadow: 10px 20px 10px #000;  /* for Chrome */
    -moz-box-shadow: 10px 20px 10px #000;  /* for Firefox */
}

The higher the number of pixels the more pronounced the effect of the blur is.

Adding opacity

What’s more? You can add opacity to the shadow to make the shadow semi-transparent, to do this in CSS3 is simple as it introduces a new rgba function which you can use to specify the colour of the shadow. Most of you should be familiar with how RGBa works (a stands for alpha which is a value between 0 and 1 with 0 being fully transparent and 1 being fully opaque) already and to use it on a shadow here’s what you can do:

div {
    -webkit-box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.4);  /* for Chrome */
    -moz-box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.4);  /* for Chrome */
}

Compare the two images below, using solid colour on the left and using RGBa function with alpha value of 0.4 on the right:

As you can see, the shadow on the right look a lot more believable!

Multiple shadows

With the box-shadow property in CSS3, you’re not limited to only one shadow, to specify additional shadows simply turn the box-shadow property into a comma separated list of shadow specifications:

div {
    -webkit-box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.4),
                        -10px 20px 10px rgba(100, 0, 0, 0.4);
    -moz-box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.4),
                     -10px 20px 10px rgba(100, 0, 0, 0.4);
}

Creating an inner shadow

You can create an inner shadow by adding the inset keyword:

div {
    -webkit-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4);  /* for Chrome */
    -moz-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4);  /* for Firefox */
}

You could create multiple inner shadows, though the effect tend to be a little strange if you ask me..:

div {
    -webkit-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4),
                        inset -10px -20px 10px rgba(0, 0, 150, 0.6);
    -moz-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4),
                     inset -10px -20px 10px rgba(0, 0, 150, 0.6);
}

Or combine inner shadow with normal shadows:

div {
    -webkit-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4),
                        10px 20px 10px rgba(0, 0, 150, 0.6);
    -moz-box-shadow: inset 10px 20px 10px rgba(0, 0, 0, 0.4),
                     10px 20px 10px rgba(0, 0, 150, 0.6);
}

again, doesn’t feel quite right…

Adding a spread distance

Finally, you can add a ‘spread’ to the shadow, which basically adds some padding to the edges of the shadow:

div {
    -webkit-box-shadow: 10px 20px 0px 10px #000;  /* for Chrome */
    -moz-box-shadow: 10px 20px 0px 10px #000;  /* for Firefox */
}

Compare these two images, one with spread of 10 pixels (left) and one without:

Demo

Finally, here’s a quick demo page I’ve put together to let you play around with the box-shadow property and see its effects as you change the relevant parameters, note it only works with webkit browsers (Safari and Chrome) for now as I’m using the new range type input in HTML5 which is not yet supported in Firefox and iE.

References:

CSS3info.com on box shadows

Having fun with HTML5 — Range type input

Besides the much talked about video tag, HTML5 also introduced a couple of new input types, one of which is a rather interesting range input type which basically translates to a slider bar control:

The range input type is currently supported by the latest versions of Safari, Chrome and Opera while other browsers such as Firefox simply treat the field as a textbox.

There are four available attributes – min, max, step and value. min and max should be self explanatory, step determines the size of each increment/decrement and value is the current value of the slider and also determines the placement of the slider when the element is loaded (if not specified, the slider will appear at the centre of the control when it’s first loaded):

<input type="range" min="0" max="200" step="5"></input>

<input type="range" min="0" max="200" value="0" step="5"></input>

I talked about the new border radius property being introduced in CSS3 in my previous blog post, and with a little JQuery I’ve put together a quick demo here of how a 400px by 400px square looks as the border radius changes.

If you look at the source of the page you will see that I added a changeBorder javascript function to handle the onchange event fired by the slider, which dynamically updates the HTML content of an internal CSS class called mySliderBarStyles using the current value of the slider control:

<input id="mySliderBar" type="range" min="0" max="200" value="0" step="5"
       onchange="changeBorder(this.value)"></input>
…
<script type="text/javascript">
    function changeBorder(newValue) {
        var newRadius = newValue + "px";
        // set the html content of the label showing the current radius value
        $("#rangeValue").html(newRadius);
        // set the style with the new radius value
        $("#mySliderBarStyles").html(
            "#myDiv { -webkit-border-radius: " + newRadius + "; }"
        );
    }
</script>
…
<style type="text/css" id="mySliderBarStyles"></style>

References:

Dive Into HTML5

Having fun with CSS3 — Border Radius

As you may know already, CSS3 has introduced a new set of properties which allows you to easily add curved corners to a box.

Simple round corners

You can create a div with round corners with this simple css:

div {
    border-radius: 50px;
}

However, given the stage of development CSS3 is at as of now this is only supported by Google Chrome… Instead, you are encouraged to add vendor prefixes :

div {
    -webkit-border-radius: 50px; /* for Chrome */
    -moz-border-radius: 50px; /* for Firefox */
}

How much of a curve the corners get is worked out by placing an imaginary circle of a radius of the given number of pixels at each of the corners (see image below):

Naturally this introduces an interesting edge condition – what if the radius of the imaginary circles is set to be equal to or greater than half of the width of a square-shaped element? Do we just get a circle back?

Yes.

Specify different radius for each corner

You can specify a different radius for each of the top-left, top-right, bottom-right and bottom-left corners either like this:

div {
    /* for Chrome */
    -webkit-border-top-left-radius: 40px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 80px;
    -webkit-border-bottom-left-radius: 20px;

    /* for Firefox */
    -moz-border-radius-topleft: 40px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 80px;
    -moz-border-radius-bottomleft: 20px;
}

Note: the property names are different!

Or using the short-hand syntax by listing 4 consecutive values for each of the four corners in the above mentioned order:

div {
    -webkit-border-radius: 40px 10px 80px 20px;  /* for Chrome */
    -moz-border-radius: 40px 10px 80px 20px;  /* for Firefox */
}

both will produce the same result:

Oval-shaped corners

You don’t have to be content with circular-shaped corners either, to specify an oval-shaped corner, just use this syntax:

div {
    -webkit-border-radius: 80px / 40px;  /* for Chrome */
    -moz-border-radius: 80px / 40px;  /* for Firefox */
}

The only thing we’re doing differently now is that we’re putting an oval as opposed to a perfect circle into the corners. The oval is defined by a width and height:

And once more, you can specify these for each corner by setting separate properties:

div {
    /* for Chrome */
    -webkit-border-top-left-radius: 80px 40px;
    -webkit-border-top-right-radius: 10px 50px;
    -webkit-border-bottom-right-radius: 40px 80px;
    -webkit-border-bottom-left-radius: 60px 20px;

    /* for Firefox */
    -moz-border-radius-topleft: 80px 40px;
    -moz-border-radius-topright: 10px 50px;
    -moz-border-radius-bottomright: 40px 80px;
    -moz-border-radius-bottomleft: 60px 20px;
}

though unfortunately there’s no short-hand syntax to save you from all these typing this time around.

And finally, you don’t HAVE to use pixels as unit either, most other standard CSS units work too. It’s also worth noting that using the vendor prefix (e.g. –webkit, –moz) allows for a more graceful degrading behavior IF the final spec for CSS3 uses a different naming scheme for the border radius properties.

Demo

Check out this quick demo page I’ve put together for you to see the effect of changing the border radius, note this only works if your browser supports the new ‘range’ input type defined in HTML5 (Chrome works fine, but Firefox doesn’t support it yet).

theburningmonk.com

a blog for Yan and Yinan

Having fun with HTML5 — contenteditable attribute

Having fun with HTML5 — Local Storage and Session Storage

Browser Support Detection

API

Demo

Page Load

Populate Tables

Introducing the new placeholder attribute

Setting an item

Removing an item

Clearing all items

Having fun with CSS3 — Box Shadow property

Simple box shadow

Adding a blur distance

Adding opacity

Multiple shadows

Creating an inner shadow

Adding a spread distance

Demo

References:

Having fun with HTML5 — Range type input

References:

Having fun with CSS3 — Border Radius

Simple round corners

Specify different radius for each corner

Oval-shaped corners

Demo

Recent Posts

Categories

Archives

theburningmonk.com

a blog for Yan and Yinan

Having fun with HTML5 — contenteditable attribute

Having fun with HTML5 — Local Storage and Session Storage

Browser Sup­port Detection

API

Demo

Page Load

Pop­u­late Tables

Intro­duc­ing the new place­holder attribute

Set­ting an item

Remov­ing an item

Clear­ing all items

Having fun with CSS3 — Box Shadow property

Sim­ple box shadow

Adding a blur distance

Adding opac­ity

Mul­ti­ple shadows

Cre­at­ing an inner shadow

Adding a spread distance

Demo

Ref­er­ences:

Having fun with HTML5 — Range type input

Ref­er­ences:

Having fun with CSS3 — Border Radius

Sim­ple round corners

Spec­ify dif­fer­ent radius for each corner

Oval-shaped cor­ners

Demo

Recent Posts

Categories

Archives

Browser Support Detection

Populate Tables

Introducing the new placeholder attribute

Setting an item

Removing an item

Clearing all items

Simple box shadow

Adding opacity

Multiple shadows

Creating an inner shadow

References:

References:

Simple round corners

Specify different radius for each corner

Oval-shaped corners