Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
The last-child selector is used to select the last child element of a parent. It cannot be used to select the last child element with a specific class under a given parent element.Style the last child li element with background-color −li:last-child{ background-color: blue; }It creates issues if the element is not the very last element.Let us see an example of −If your selector is a:last-child, this works − This will be selected
Ember.js is an open-source, free JavaScript client-side framework used for developing web applications.It allows building client-side JavaScript applications by providing a complete solution which contains datamanagement and application flow.It uses the MVC(Model-View-Controller) architecture pattern. In Ember.js, the route is used as a model,handlebar template as view and controller manipulates the data in the model.The following browsers are supported for Ember −Internet ExplorerMicrosoft EdgeSafari
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);