For data-attribute typecasting of Numbers and String, use −[...document.querySelectorAll("a")].forEach(a =>    console.log("type: %s, value: %o", typeof a.dataset.value, a.dataset.value) );The above is for the following data-attributes −6.0 6.5

Use the JavaScript FileReader to allow users to choose an image.Let us see an example −         Here is the JS −function readURL(input) {    if (input.files && input.files[0]) {       var r = new FileReader();       r.onload = function (ev) {          $('#myid).attr('src', ev.target.result);       }       reader.readAsDataURL(input.files[0]);    } }   

To render thin fonts more smoothly, use −text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important;For Google Chrome, use −-webkit-font-smoothing:antialiased !important;You can enhance the performance like this −text-rendering: auto text-rendering: optimizeSpeed text-rendering: optimizeLegibility text-rendering: geometricPrecision text-rendering: inherit

For viewport usage, use the drawImage() method.ctx.clearRect(0,0,game.width,game.height); // a full background image ctx.drawImage(background,cropLeft,cropTop,cropWidth,cropHeight, 0,0,viewWidth,viewHeight);For the game −var myGame = document.getElementById("game"); var myCtx= myGame.getContext("2d"); myCtx.clearRect(0,0,game.width,game.height); // using drawImage() method myCtx.drawImage(background,left,top,350,250,0,0,250,150); myCtx.beginPath(); myCtx.arc(130,80,12,0,Math.PI*2,false); myCtx.closePath(); myCtx.fill(); myCtx.stroke();

You need to track which elements dragenter and dragleave had been triggered on. Listening dragenter and dragleave on an individual element will capture not only events on that element but also events on children.$.fn.draghover = function(options) {    return this.each(function() {       var collection = $(),       self = $(this);       self.on('dragenter', function(ev) {          if (collection.length === 0) {             self.trigger('draghoverstart');          }          collection = collection.add(ev.target);       });       self.on('dragleave drop', function(ev) {          collection = collection.not(ev.target);          if (collection.length === 0) {             self.trigger('draghoverend');          }       });    }); };Listen for events −$(window).draghover().on({    'draghoverstart': function() {       alert(‘dragged into the window');    },    'draghoverend': function() {       alert('dragged out of window');    } });

The easiest way to reload the current page without losing form data, use WebStorage where you have -persistent storage (localStorage) or session-based (sessionStorage) which remains in memory until your web browser is closed.Try this when the page is about to reload,window.onbeforeunload = function() {    localStorage.setItem(name, $('#inputName').val());    localStorage.setItem(phone, $('#inputPhone').val());    localStorage.setItem(subject, $('#inputAddress').val()); }Now check it like −window.onload = function() {    var name = localStorage.getItem(name);    var phone = localStorage.getItem(phone);    if (name !== null) $('#inputName').val(name); if (phone !== null) $('#inputPhone').val(phone);    // ... }

Use input type=”datetype”. The datetime input type is used in HTML using the . Using this, allow the users to select date and time. A date time picker popup is visible whenever input field is clicked.           HTML input datetime                        Details:          Student Name          Exam Date and Time                    

IBM Worklight is a full platform for development. Many key features can be accomplished within Worklight that you will not be able to do with a PhoneGap library.PhoneGap is a software development framework by the Adobe System, which is used to develop mobile applications. To develop apps using PhoneGap, the developer does not require to have knowledge of mobile programming language but only web-development languages like HTML, CSS, and JScript. PhoneGap produces apps for all popular mobile OS platforms such as iOS, Android, BlackBerry, and Windows Mobile OS etc.PhoneGap library and IBM Worklight both provide HTM5 and CSS support. IBM Worklight ... Read More

For HTML5 validation, you need to install IntelliSense and validation support to Visual Studio. HTML5 is supported by Visual Studio 2012.VS 2010 had IntelliSense support, but VS 2012 added corresponding snippets making it fast and easy to write markup.Follow the steps −  Launch Visual Studio 2012  Go to Tools > Options menu  When Options configuration screen is displayed, go to Text Editor > HTML > Validation.

For optimization, change the zindex of the frame. This layer the images on top of each other to solve the flickering because while redrawing the last frame is still visible.Keep incrementing the zindex value of the latest frame.Note − You need to reset the zindex again, and it may have an amazing force on cutting down the flickering.