Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Use the tabindex attribute on the canvas element for addEventListener on Canvas −var myTarget, myCanvas; window.onload = function() { myCanvas = document.getElementById('canvas'); document.addEventListener('mousedown', function(event) { myTarget = event.target; alert('This is mousedown event.'); }, false); document.addEventListener('keydown', function(event) { if(myTarget == myCanvas) { alert('This is keydown event.'); } }, false); }
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.
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.
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); // ... }
To convert HTML5 canvas to PNG, follow the below-given steps −You need to add the generated data URL to the href attribute of an tag.Dialog for base64 image −Add a filename −Now define http headers −headers=Content-Disposition: attachment; filename=newimg.pngTo deal with the RAM of the web browser and make its utilization less −// generated the data URL dynamically function myCanvas() { var d = canvas.toDataURL('image/png'); this.href = d; }; d.addEventListener('click', myCanvas, false);
To repopulate, use the drag and drop. This was not possible before, but now it is valid.Let us see how −function drop(ev) { ev.stopPropagation(); ev.preventDefault(); // retrieving dataTransfer field from the event var d = ev.dataTransfer; var files = d.files; handleFiles(files); }For drag and drop −// dragging target.addEventListener('dragover', (ev) => { ev.preventDefault(); body.classList.add('dragging'); }); // drag leave target.addEventListener('dragleave', () => { body.classList.remove('dragging'); }); // drop target target.addEventListener('drop', (ev) => { ev.preventDefault(); body.classList.remove('dragging'); });
The official specification states cross-origin attribute as −The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas.When it is combined with CORS header, it would allow images defined by the element, loaded from foreign origins to be used in canvas. The procedure would be like being loaded from the current origin.You can use it to solve JavaScript errors like to log js errors −if (securityOrigin()->canRequest(targetUrl)) { msg = myError; line = myLineNumber; source = sourceURL; } else { msg = "Error!"; source = String(); line = 0; }
To get the video duration, query the readyState attribute. It has a series from 0 to 4. When the metadata has loaded, the value you will get is 1.Therefore, you need to do something like −window.setInterval(function(tm) { // Using readyState attriute if (video.readyState > 0) { var duration = $('#duration').get(0); // for video duration var video_duration = Math.round(video.duration); duration.firstChild.nodeValue = video_duration; clearInterval(tm); } },1000);
The following is the correct way −ExampleHere is an example − Checkbox Control Maths Physics
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*/ }