To make canvas fill the whole page, you need to be 100% in width and height of the page.* {    margin: 0;    padding: 0; } body, html {    height:100%; } #canvas {    position:absolute;    height:100%; width:100%; }

To render ASP.NET TextBox as HTML5 input type “Number”, set type="number" directly on the textbox.Let us see an example of ASP.NET TextBox −You can also use the following dynamically created the control −TextBox tb = new TextBox(); tb.Attributes.Add("Type", "number");

The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties. The flex property sets the flexible length on flexible items.For example −#container article {    -webkit-flex: 1 1 auto;    overflow-y: auto;    height: 0px; /*here the height is set to 0px*/ }If you want a min-height, the use height: 100px; that it is exactly the same as − min-height: 100px;#container article {    -webkit-flex: 1 1 auto;    overflow-y: auto;    height: 100px; /*here the height is set to 100px*/ }

The following is the correct way −ExampleHere is an example −           Checkbox Control                         Maths           Physics            

The parent object provides a reference to the main window from the child.The following is the parent code. The directive below triggers the iFrame to send a message to the parent window every 3 seconds. No initial message from the main window needed!var a= window.addEventListener ? "addEventListener" : "attachEvent";// here a is the event method var b= window[a];// here b is the eventer var c= a== "attachEvent" ? "onmessage" : "message";// here c is the message event // Listen to message from child window b (c, function(e) {    var d= e.message ? "message" : "data";// here d is ... Read More

To upload from local drive to the local file system, we can use −Webkitdirectory attribute on − This allows the user to select a directory by the appropriate dialog box.Filesystem API is a sandboxed filesystem, which allows us to store files on client’s machine.File API allows us to read files. Files are accessible by elementAll of the above is working fine in Google Chrome.WebKit directory is a much better option among these. Use the following for directory −webkitRequestFileSystem(    window.TEMPORARY, 5 * 1024 * 1024, function(_fs) {       fs = _fs;    }, ErrAbove, err and fs are −var fs, err = function(err) {    throw err; };

To trigger mouse event we can add −-webkit-transform: translate3d(0, 0, 0)In addition to this canvas can also be styled.Another way is to add a listener in the event mousemove,canvas.addEventListener("mousemove", this.checkMouseLocation.bind(this, this.inputs), false);By adding this listener, we can easily trigger a mouse move event in HTML5.

JSRadial gradient with matrix is created in the following way. You can try to run the following way to create JS Radial gradient with matrix −var canvas1 = document.getElementById("canvas"); //canvas1 variable to identify given canvas var ctx1 = canvas.getContext("2d"); //This is used to tell context is 2D   var gradient1 = ctx1.createRadialGradient(100/horizontalScale, 100/verticalScale, 100, 100/horizontalScale, 100/verticalScale, 0); //This will create gradient with given canvas context   gradient1.addColorStop(1, "green"); //New color green is added to gradient gradient1.addColorStop(0, "red"); //New color red is added to gradient ctx1.scale(horizontalScale, verticalScale); //Context matrix ctx1 is shrinked according to horizaontal and vertical scale ... Read More

The date-time format can be changed by using custom HTML5 elements. If we wish to change or override existing Html tags then we can do so with the help of shadow DOM.We can make customizable tags like −Here is an example −However, E10 and older versions do not support customizable tags; however, all newer versions support customizable tags.

Align list-item with the help of flex. Flex will make columns flexible according to content. The wrapper will layout columns in a row..wrap{    display : flex }// This will help wrapper to become flexible .wrap.col{    flex: 1 0 33%; }Flex is basically a property which helps in making element flexible.Use the following to keep the lists vertically aligned to the bottom −.col .content {    margin-top: auto; }