HTML5, more chess

Chess.html: <!DOCTYPE html> <html> <head> <style> table { border: 5px solid #333; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; text-align: center; } tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) { background: #ccc; background:-moz-linear-gradient(top, #ccc, #eee); background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee)); height: 40px; width: 40px; } </style> <script src=”http://code.jquery.com/jquery-1.8.2.min.js”></script&gt; <script… Read More HTML5, more chess

HTML5, localStorage

In this example, the page will load first without the text stored by HTML5. On refresh you will see the text: “The text you want to save”, appear in the <div> container. <!DOCTYPE html> <html> <head> <script src=”http://code.jquery.com/jquery-1.8.2.min.js”></script&gt; </head> <body> <header>Storing Items using HTML5</header> <div id=”show”>Text Stored: </div> <script> if(localStorage.getItem(“varContainer”)) { $(“#show”).append(localStorage.getItem(“varContainer”)); } localStorage.setItem(“varContainer”, “The text… Read More HTML5, localStorage

Javascript Canvas, empty chess board

Short example of how to draw a empty chess grid using canvas and javascript. Javascript Code, save as chessboard.js: var chess={ ctx: null, width: 402, height: 402, white: “#fff”, lightGrey: “#000000”, black: “#000000”, squareWidth: 0, squareHeight: 0, graphDiv: “chessCanvas”, initValues: function(){ this.squareWidth = (this.width-2) / 8; this.squareHeight = (this.height-2) / 8; }, resetBackground: function(){ this.ctx.canvas.width… Read More Javascript Canvas, empty chess board

HTML5 your thoughts?

In the following example there is a few weird combinations of html5 semantics, but is it wrong? Let’s hear your opinion if you have one:) Please respond with any suggestions of improvements, I am not thinking about design here, just the actual semantics. <!DOCTYPE html> <html lang=”en”> <head> <title>Fantasy Footbal</title> <meta charset=”UTF-8″/> <link rel=”stylesheet” href=”mystyle.css”>… Read More HTML5 your thoughts?

HTML5 forms example

<!DOCTYPE html> <!–[if lt IE 7]> <html class=”no-js lt-ie9 lt-ie8 lt-ie7″> <![endif]–> <!–[if IE 7]> <html class=”no-js lt-ie9 lt-ie8″> <![endif]–> <!–[if IE 8]> <html class=”no-js lt-ie9″> <![endif]–> <!–[if gt IE 8]><!–> <html class=”no-js”> <!–<![endif]–> <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″> <title>Booking</title> <meta name=”description” content=””> <meta name=”viewport” content=”width=device-width”> <script src=”http://code.jquery.com/jquery-1.8.2.min.js”></script&gt; <style> label em { color: red;… Read More HTML5 forms example

old browsers support HTML5 tags?

Old browsers do not support html5 however using the published .js functionality will enable replacement for the html5 tags that is not supported by older browsers. Enter the following code in the <head> section of your webpage <!DOCTYPE HTML> <html> <head> <!–[if lt IE 9]> <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script&gt; <![endif]–> </head> <body> </body> </html> If for some… Read More old browsers support HTML5 tags?