To preview an image before and after upload, you need to try the following code − HTML         The following is the jQuery −function display(input) {    if (input.files && input.files[0]) {       var reader = new FileReader();       reader.onload = function(event) {          $('#myid').attr('src', event.target.result);       }       reader.readAsDataURL(input.files[0]);    } } $("#demo").change(function() {    display(this); });

To display HTML5 client-side validation error bubbles, use the required attribute.You do not need to have JavaScript for client side validations like empty text box would never be submitted because HTML5 introduced a new attribute called required which would be used as follows and would insist to have a value:                    Enter email :          Try to submit using Submit button                    

The official HTML documentation states that you need to create a element if the closing p i.e. cannot be matched with existing tag.The HTML4 DTD states that the end tag is optional for the p element, but the start tag is required.However, the SGML declaration for HTML4 states that OMITTAG is YES that means the start tag can be implied.

The Local Storage is designed for storage that spans multiple windows and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons.For storing credentials in local storage, on successful login, generate a completely random string unrelated to user credentials. You need to store this in the database. Do not forget to add an expiry date. Pass that string to the JavaScript to be stored in local storage.As long as the local storage credential matches the database and ... Read More

Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions and allows long tasks to be executed without yielding to keep the page responsive.Web Workers are background scripts and they are relatively heavyweight and are not intended to be used in large numbers. For example, it would be inappropriate to launch one worker for each pixel of a four-megapixel image.Web Workers initialized with the URL of a JavaScript file, which contains the code the worker will execute. This code sets event listeners and communicates with the script that spawned it ... Read More

Use preload = ”auto” to avoid repeat reloading of HTML video on the same page −                                        Your browser does not support the video tag.          

To create a text inside circles in canvas, use the −context.beginPath();ExampleThe following is the canvas −$("#demo").on("click", "#canvas1", function(event) {    var canvas = document.getElementById('canvas1');       if (canvas.getContext) {          var context = canvas.getContext("2d");          var w = 25;          var x = event.pageX;          var y = Math.floor(event.pageY-$(this).offset().top);                    context.beginPath();          context.fillStyle = "blue";          context.arc(x, y, w/2, 0, 2 * Math.PI, false);          context.fill();          context = canvas.getContext("2d");          context.font = '9pt';          context.fillStyle = 'white';          context.textAlign = 'center';          context.fillText('amit', x, y+4);       } });HTML    

IE9 does not support File APIIF10 started supported File APIAn example of that would be drag and drop. Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up.                    #boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; }          #boxA { background-color: #6633FF; width:75px; height:75px; }          #boxB { background-color: #FF6699; width:150px; height:150px; }                      function dragStart(ev) {   ... Read More

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.The transform (m11, m12, m21, m22, dx, dy) method must multiply the current transformation matrix with the matrix described by −m11 m21 dx m12 m22 dy  0   0  1The setTransform(m11, m12, m21, m22, dx, dy) method must reset the current transform to the identity matrix, and then invoke the transform(m11, m12, m21, m22, dx, dy) method with the same arguments.                   ... Read More

Use the autocomplete attribute for autocomplete text input. The autocomplete attribute is used with a form elements to set the autocomplete feature on or off. If the autocomplete feature is on, the browser will automatically show values, based on what users entered before in the field.If the autocomplete feature is off, the browser won’t automatically show values, based on what users entered before in the field.The following are the attribute values −S. NoAttribute ValueDescription1onThis is the default value. The browser automatically complete values based on what users entered before.2offThe browser won’t complete values based on what users entered before. Users have to ... Read More