The nav-up property is used to move up when you have pressed on up arrow button in the keypad. You can try to run the following code to implement the CSS nav-up propertyExampleLive Demo                    button {             position: absolute;          }          button#btn1 {             top: 10%;             left: 15%;             nav-index: 1;             nav-right: #btn2;             nav-left: #btn4;             nav-down: #btn2;             nav-up: #btn4;          }          button#btn2 {             top: 30%;             left: 30%;             nav-index: 2;             nav-right: #btn3;             nav-left: #btn1;             nav-down: #btn3;             nav-up: #btn1;          }          button#btn3 {             top: 50%;             left: 15%;             nav-index: 3;             nav-right: #btn4;             nav-left: #btn2;             nav-down: #btn4;             nav-up: #btn2;          }          button#btn4 {             top: 30%;             left: 0%;             nav-index: 4;             nav-right: #btn1;             nav-left: #btn3;             nav-down: #btn1;             nav-up: #btn3;          }                     Result1       Result2       Result3       Result4    

To create a linear gradient that looks like rainbow color, you can try to run the following code - Example                    #demo {             height: 100px;             background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);          }                     Linear Gradient       Rainbow    

Whenever a mobile website is created and there is a requirement in which user is requested for current position on button click, then HTML5 geolocation is used.This is working fine in mobile chrome.However when in Mobile Safari, the user is prompted to share location and browser defaults to geolocation then browser is defaulted to Permission denied errorTo solve this, the Geolocation services in mobile services is turned on to get current location of requested user.

If the HTML5 Canvas layer disappears on mouse click in Fabric.js and Firefox stops responding when creating a canvas to the image, then there is a way to drag and drop images from your computer to canvas using Fabric.This can be done by making image draggable property to true by this way −

When an app is to be developed that displays new data whenever it is stored in a folder through XML, we use websockets apache server.Mod_websocket or php websocket can be used.we can also use self-hosted realtime web technology for realtime communication between server and client.A hosted realtime web solutions and realtime push aspect of your application can be offloaded.However, Apache server is not good in long-running persistant connections between server and client.Best solution for this is:While using Apache as application server we need to use second dedicated realtime webserver.Self hosted realtime webserver can be used to handle many concurrent connectionsA ... Read More

To fire dragstart after mousemove, try the following:If you are firing dragstart event, then implement the rest of the process flow as well:To solve the problem, create the user experience as follows:You need to instruct the user to click on the respective area for enabling drag When a user clicks on the area, a dialog should be visible to show that the dragging may now be used.

Modernizr provides an easy way to detect any new feature so that you can take the corresponding action. For example, if a browser does not support video feature then you would like to display a simple page. You can create CSS rules based on the feature availability and these rules would apply automatically on the webpage if the browser does not support a new feature. Modernizr is a small JavaScript Library that detects the availability of native implementations for next-generation web technologies. There are several new features which are being introduced through HTML5 and CSS3 but same time many browsers ... Read More

Whenever you face such issue, it would mean you have not written the CSS properly.Just add the following in CSS −* {    zoom:1;    -ms-content-zooming:none; }For some code, even the following works −@viewport {    width:320px; } @-ms-viewport {    width:320px;    zoom-user:fixed;    max-zoom:1;    min-zoom:1; }

In the following article, we are going to learn about how to create a transformation matrix with HTML5. HTML5 canvas provides methods that allow modifications directly to the transformation matrix. The transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods. Using the transform() method The transformation matrix of the current context can be changed using the transform() method.in other words, transform() method lets you scale, rotate, move, and skew the current context. Note − Only drawings that were created after the transform() method was called will be impacted by the transformation. Syntax ... Read More

While creating messageChannel, it internally creates two ports to send the data and forwarded it to another browsing context.postMessage() − Post the message throw channelstart() − It sends the dataclose() − it closes the portsIn this scenario, we are sending the data from one iframe to another iframe. Here we are invoking the data in function and passing the data to DOM.Examplevar loadHandler = function(){    var mc, portMessageHandler;    mc = new MessageChannel();    window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);        portMessageHandler = function(portMsgEvent){       alert( portMsgEvent.data );    }    mc.port1.addEventListener('message', portMessageHandler, false);    mc.port1.start(); } window.addEventListener('DOMContentLoaded', loadHandler, false);