Unknown Kadath ( a blog about HTML5 )

HTML 5 Compliant Browser Required

CSS3 Series: Multiple Columns

Posted on August 21st, 2010 by James Litten

Even though this wonderful feature has been around for five years, it has yet to be implemented consistently across the major browsers. Hopefully, this will change soon.
If you know a reason why this is so, please leave a comment. Thanks.

The specification for CSS Multi-column Layout has 10 properties for CSS Multiple Columns.
They are pretty self explanatory except for maybe ‘rule’ which in this context means a vertical divider between the columns that behaves like a CSS border.

column-width
column-count
columns (This is shorthand that can set either or both ‘width’ and ‘count’)
column-gap
column-rule
column-rule-width
column-rule-style
column-rule-color
column-fill (Balances columns height)

column-span (Allows for titles or headings to span across multiple or all columns)

Browser Support

Let’s look at the current implementations (as of August, 2010)

Mozilla (Firefox 3.6)
10 standard properties are supported plus an extra one created by Mozilla
-moz-column-height

-moz-column-width
-moz-column-count
-moz-columns
-moz-column-gap
-moz-column-rule
-moz-column-rule-width
-moz-column-rule-style
-moz-column-rule-color
-moz-column-fill
-moz-column-span

Webkit (Chrome 6, Safari 5)
10 standard properties are supported
-webkit-column-width
-webkit-column-count
-webkit-columns
-webkit-column-gap
-webkit-column-rule
-webkit-column-rule-width
-webkit-column-rule-style
-webkit-column-rule-color
-webkit-column-fill
-webkit-column-span

Opera
Not Supported

IE
Not Supported

Webkit and Mozilla Render differently

To further complicate the use of CSS3 multiple columns, even simple examples are rendered differently by Webkit and Mozilla.

If you set both column-width and column-count, visitors with a Webkit browser see a very different result than visitors with a Mozilla browser.
For example, here are images of the following code in Firefox 3.6 and Chrome 6

-moz-column-count: 3;
-moz-column-width: 45px;
-webkit-column-count: 3;
-webkit-column-width: 45px;


While Chrome limits the column width to what it is set at (45px) Firefox limits the column width based on the column number. If you allow Firefox to automatically set the column number, it will then limit the column width to what it is set at (45px).

It may be quite awhile before the average webmaster uses CSS3 multiple columns.

Some sites for further reading.
W3C Specification http://www.w3.org/TR/css3-multicol/
Demo page with source code. http://www.quirksmode.org/css/multicolumn.html
Mozilla Dev Page https://developer.mozilla.org/en/CSS3_Columns

Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts

Posted on August 4th, 2010 by James Litten

In this post we will create a simple pie chart that is easy to feed data to.

This example is coded for readability and not for optimized operation. All you need is a text editor like notepad and an HTML5 friendly browser (I’m using Firefox 3.6).


<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">

var myColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];
var myData = [10,30,20,60,40];

function getTotal(){
var myTotal = 0;
for (var j = 0; j < myData.length; j++) {
myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
}
return myTotal;
}

function plotData() {
var canvas;
var ctx;
var lastend = 0;
var myTotal = getTotal();

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < myData.length; i++) {
ctx.fillStyle = myColor[i];
ctx.beginPath();
ctx.moveTo(200,150);
ctx.arc(200,150,150,lastend,lastend+
  (Math.PI*2*(myData[i]/myTotal)),false);
ctx.lineTo(200,150);
ctx.fill();
lastend += Math.PI*2*(myData[i]/myTotal);
}
}

plotData();

</script>
</section>
</body>
</html>

You can copy this code and paste it into a new file called something like simplepie.html and when you open it with an HTML5 friendly browser like Firefox 3.6 it will display the pie chart.

Read more on “Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts” »

HTML5 Web Storage, Using localStorage and sessionStorage Objects

Posted on August 3rd, 2010 by James Litten

Web storage started as part of the HTML5 spec for storing key-value pair data in web clients. It now has its own spec. There are other plans for storing databases that are structured and can be queried using SQL which are handled in a separate spec .

Seeing the need for storing more key-value pair data on the web client than can currently be stored in a cookie, all major web browsers quickly adopted support for a storage object that can hold up to 5MB of data that persists until the web client’s cache is cleared or the storage object is programatically cleared, or in the case of sessionStorage, the browser window (tab) is closed. This quick and relatively consistent adoption by web browsers is a rare treat for web developers.

IMPORTANT: Do not store sensitive data in web storage. When I do penetration testing, locally stored data is one of the first things that I look at.


IMPORTANT: All data in web storage is stored as strings. If you want to store an object, you should use JSON and call stringify() on it before storing it and parse() on it after retrieving it.


There are two flavors of the storage object that we will be looking at.

sessionStorage object

The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. it is not available when a file is run locally.

Data stored in the sessionStorage object is accessible only from the page that initially stored the data.

localStorage object

Data stored using the localStorage object is persisted until it is specifically removed via JavaScript or the user clears the browser’s cache.

Data stored in the localStorage object is accessible only from the domain that initially stored the data.

Both localStorage and sessionStorage objects have the same interface, differing only in how the data stored by them persists and who can access the data.

The setItem method

setItem( key, value)
sessionStorage.setItem("name", "Sam")
localStorage.setItem("name", "Sam")

or the property using an expando
sessionStorage.name("Sam")
localStorage.name("Sam")

The getItem method

getItem(key)
name = sessionStorage.getItem("name")
name = localStorage.getItem("name")

or the property using an expando
name = sessionStorage.name
name = localStorage.name

The removeItem method

removeItem(key)
name = sessionStorage.removeItem("name")
name = localStorage.removeItem("name")

The property using an expando required an extra ‘delete’ keyword and is no longer in the spec.


The clear method

The clear() method causes the list associated with the object to be emptied of all key/value pairs

sessionStorage.clear
localStorage.clear

The key and length properties

Key and length are useful for looping through all of the key value pairs, especially if you don’t know what they all are.

Key is an index of the key values ( key(0), key(1), key(2) …) Length is the number of keys. 
for (var i=0, len = sessionStorage.length; i  <  len; i++){
    var key = sessionStorage.key(i);
    var value = sessionStorage.getItem(key);
    alert(key + "=" + value);
}

Storage Event

The storage event is fired on the window object whenever something changes in storage. For example, if you set an item to its existing value or call clear() when there are no named keys, the storage event will not fire, because nothing actually changed in the storage area.

The storage event has the following attributes

  • key the named key that was added, removed, or modified
  • oldValue the previous value (now overwritten), or null if a new item was added
  • newValue any the new value, or null if an item was removed
  • url the page which called a method that triggered this change
  • storageArea represents the Storage object that was affected.

Some online DEMOs

HTML5 Demos: Storage
Web Storage Example

Browser Compatibility (as of August, 2010)

Internet Explorer 8
Firefox 3.5 
Safari 4
Google Chrome 5
Opera 10.50

Only Opera supports the Storage event's attributes but I've verified that the storage event can be triggered on Chrome 5 and Firefox 3.6 though, the attributes for the event are all set to undefined.

Further Reading

Professional JavaScript for Web Developers Chapter Chapter 19 section on DOM Storage

Introducing HTML5 Chapter 6

Playing With CSS Transitions On Firefox 4 Beta 2

Posted on July 29th, 2010 by James Litten

I saw the recent announcement by Paul Rouget that Firefox 4 beta 2 has support for CSS transitions and I thought it would be fun to play with it.

Here is a demo with complete source code where I chained together a bunch of CSS transitions using the transitionend event to trigger the transitions sequentially.

DEMO CSS transitions in Firefox 4 beta 2

The demo requires Firefox 4 beta 2

I found that the transitionend event was triggered more often then I expected and had to remove listeners for the event when I was done with them or they sometimes triggered again. I need to learn more about what triggers them.

Have fun with the code as that is the best way to learn.

Using Multiple HTML5 Canvases as Layers

Posted on July 26th, 2010 by James Litten

DEMO Here’s our finished canvas with full source code.

The reasons why you would want to layer multiple canvases on top of each other are many but they all have a common root. There is a requirement in the W3C definition of the 2d context…

There is only one CanvasRenderingContext2D object per canvas, so calling the getContext() method with the 2d argument a second time must return the same object.
http://dev.w3.org/html5/2dcontext/#conformance-requirements

Having just one 2d context means that you have to keep track of everything on the context even if you only want to change part of the canvas.

An example of using layers is animation. When I was a child, I loved making animated cartoons and I learned that if I painted them on clear plastic sheets I could stack the sheets and only redraw the parts that moved. I could make an elaborate background and use it over and over instead of redrawing it for every frame. The same principle applies here to our canvases.

In this example, our three canvases have transparent areas that allow you to see what is on the canvas beneath each.

Read more on “Using Multiple HTML5 Canvases as Layers” »

IE Compatible Canvas Drag and Drop With jQuery and ExCanvas

Posted on July 20th, 2010 by James Litten

This post is about making drag and drop work on a canvas in Internet Explorer versions 6, 7 and 8 . The details of how to drag and drop on the canvas can be found in this previous post. How to Drag and Drop on an HTML5 Canvas

To modify our canvas in order to make it work in IE we need to …

  • Use ExplorerCanvas to make IE’s VML act like a canvas like object
  • Use jQuery to manage our events and make them compatible with IE
  • Use jQuery to calculate our canvas’ offsets
  • Move our call to init() to the body.onload event

Sounds like a lot but it really isn’t.

Here’s the DEMO page that should work in all current browsers including IE. The full source code for the page is listed below the canvas.

Read more on “IE Compatible Canvas Drag and Drop With jQuery and ExCanvas” »

Slicing Spritemaps and Parallax Scrolling on the HTML5 Canvas

Posted on July 16th, 2010 by James Litten

In this example we will look at slicing images with the drawImage() method of a 2d canvas context. We’ll use two images that are larger than the canvas to create a parallax scrolling effect that is common in 2d games and also another image as a spritemap consisting of three sprites to show how to slice out and draw individual sprites.

I made this example as simple as possible to keep from cluttering up the key concepts of slicing and drawing pieces of images on the canvas. It only moves in one direction by pressing the right arrow key on your keyboard.

Read more on “Slicing Spritemaps and Parallax Scrolling on the HTML5 Canvas” »

Graphing Data in the HTML5 Canvas Element Part III

Posted on July 15th, 2010 by James Litten

This is post 3 of a multipart series of posts. All of the code to try this example for yourself is included here but much of it is explained in the previous posts. The first and second parts can be found here.

Graphing Data in the HTML5 Canvas Element Part I

Graphing Data in the HTML5 Canvas Element Part II

In this post we will create bars on the graph by drawing rectangles whose size and position are based on the data that we are graphing. We will also increase the size of our graph area so our bars aren’t all scrunched together.

This will allow us to go from this



To this


Read more on “Graphing Data in the HTML5 Canvas Element Part III” »

CSS 3.0 Series: The radial-gradient Object

Posted on July 14th, 2010 by James Litten

Radial gradiants are on the cutting edge of CSS . We’re going to be looking at some examples of their use and their current capabilities.

In the previous post in this series we looked at linear gradients. The WebKit implementation of the radial gradient is just an extension of their linear gradient function while Mozilla and W3C have opted to make the radial gradient have its own function.

Implementations and their Differences.

W3C syntax explanation here  
radial-gradient([<bg-position> || <angle>,]?
 [<shape> || <size>,]? <color-stop>, <color-stop>
[, <color-stop>]*)

The W3C spec for the radial-gradient object is sufficiently
 complete for almost all tasks. It has the capability to create
 elliptical gradiants, and it is easy to define an angle,
 beginning and end of the line that defines the gradient.

Mozilla syntax explanation here 
-moz-radial-gradient( [<position> || <angle>,]?
 [<shape> || <size>,]? <stop>, <stop>
 [, <stop>]* )

The Mozilla implementation is fairly new so it is identical to
 the W3C spec. Firefox 3.6 and Minefield render all of the
 examples below very well.

WebKit syntax explanation here 
-webkit-gradient(<type>, <point> [, <radius>]?,
 <point> [, <radius>]? [, <stop>]*)

Being pioneers and having early adoption of gradients,
 the WebKit implementation uses the same format for both
 linear and radial gradients. Unfortunately, this does not
 include the ability to do elliptical gradients. You specify
 a start circle and end circle in absolute pixel units, and
 then specify color stops at percentages between those
 two circles. 

Microsoft syntax explanation here
NONE
The Microsoft implementation of CSS gradients is limited to
 linear gradients that are either horizontal or vertical. No
 radial gradients. I've noticed that their linear gradient does
 not work in the IE9 platform preview (works in IE5 through IE8)
 so I wonder what they are up to.

IMPORTANT : Gradients can be used in any property that accepts images.


Examples of radial gradiants applied to <DIV> tags.

Two colors #ffffff #F56991 from the center circular gradiant.

 

Here’s the code…

<div  style=
"    width: 250px;
height: 250px;
padding: 15px;
background: #F56991;
color: #E8F3F8;
border-radius:155px;
-moz-border-radius: 155px;
-webkit-border-radius: 155px;
box-shadow: 10px 10px 25px #CCC;
-moz-box-shadow: 5px 5px 25px #CCC;
-webkit-box-shadow: 5px 5px 25px #CCC;
background-position: center center;
background-image: radial-gradient(center
 45deg, circle closest-corner, #ffffff 0%, #F56991 100%);
background-image: -moz-radial-gradient(center
 45deg, circle closest-corner, #ffffff 0%, #F56991 100%);
background-image: -webkit-gradient(radial, center center,
 125, center center, 250, from(#ffffff), to(#F56991));
">&nbsp;</div>

Two colors #ffffff #F56991 from (175,75) circular gradiant.

 

Here’s the code…

<div  style=
"    width: 250px;
height: 250px;
padding: 15px;
background: #F56991;
color: #E8F3F8;
border-radius:155px;
-moz-border-radius: 155px;
-webkit-border-radius: 155px;
box-shadow: 10px 10px 25px #CCC;
-moz-box-shadow: 5px 5px 25px #CCC;
-webkit-box-shadow: 5px 5px 25px #CCC;
background-position: center center;
background-image: radial-gradient(175px 75px
 45deg, circle , #ffffff 0%, #F56991 100%);
background-image: -moz-radial-gradient(175px 75px
 45deg, circle , #ffffff 0%, #F56991 100%);
background-image: -webkit-gradient(radial, 175 75, 15,
 center center, 250, from(#ffffff), to(#F56991));
">&nbsp;</div>

Three colors #ffffff #F56991 #8A2624 from (175,75) circular gradiant.

 

Here’s the code…

<div  style=
"   width: 250px;
height: 250px;
padding: 15px;
background: #F56991;
color: #E8F3F8;
border-radius:155px;
-moz-border-radius: 155px;
-webkit-border-radius: 155px;
box-shadow: 10px 10px 25px #CCC;
-moz-box-shadow: 5px 5px 25px #CCC;
-webkit-box-shadow: 5px 5px 25px #CCC;
background-position: center center;
background-image: radial-gradient(175px 75px
 45deg, circle , #ffffff 0%, #F56991 50%, #8A2624 100%);
background-image: -moz-radial-gradient(175px 75px
 45deg, circle , #ffffff 0%, #F56991 50%, #8A2624 100%);
background-image: -webkit-gradient(radial, 175 75, 15,
 center center, 250, color-stop(0%, #ffffff),
 color-stop(50%, #F56991), color-stop(100%, #8A2624));
">&nbsp;</div>

Three colors #ffffff #F56991 #8A2624 from (195,60) elliptical gradiant.

 

Here’s the code…

<div  style=
"   width: 250px;
height: 150px;
padding: 15px;
background: #F56991;
color: #E8F3F8;
border-radius: 155px / 100px;
-moz-border-radius: 155px / 100px;
-webkit-border-radius: 155px / 100px;
box-shadow: 10px 10px 25px #CCC;
-moz-box-shadow: 5px 5px 25px #CCC;
-webkit-box-shadow: 5px 5px 25px #CCC;
background-position: center center;
background-image: radial-gradient(175px 75px
 45deg, ellipse , #ffffff 0%, #F56991 50%, #8A2624 100%);
background-image: -moz-radial-gradient(195px 60px
 45deg, ellipse , #ffffff 0%, #F56991 50%, #8A2624 100%);
">&nbsp;</div>

This only works for the Mozilla implementation

Looking at these examples, there really isn’t much more to say than CSS radial gradients are not ready for primetime yet but they sure look nice.

Make a Maze Game on an HTML5 Canvas

Posted on July 11th, 2010 by James Litten

One of the best ways to learn how to program in any language is to make a game and then change the code to create different variations on the game. I learned C++ long ago by creating an elevator simulation game (thanks Tom Swan). It’s fun and it is the closest you can come to ‘instant gratification’ in programming.

Let’s make a maze game in an HTML5 canvas. In this post Moving Shapes on the HTML5 Canvas With the Keyboard we learned to use keyboard input to move a shape around the canvas. All we need to do to make our game is

1. Add an image of the maze to the canvas.

2. Add collision detection code so we know if our shape hits a border in the maze.


Read more on “Make a Maze Game on an HTML5 Canvas” »