Javascript Articles - Page 545 of 671

Yes, follow this approach −Move to the HTML5 doctype − Use or even the new elements like Or the newer HTML5 tags or , you can still use the outdated tag.The controls have backward compatibility too. The works the same as in browsers that do not support it.However, if you are working t for legacy Internet Explorer, then use html5shiv. It enables the use of HTML5 sectioning elements in legacy Internet Explorer.

For cross-origin data in canvas, add the following attribute to the

When you will click on an element with a title attribute, a child element with title text is appended. Let us see an example −For HTML −    The underlined character. jQuery −$("span[title]").click(function () {    var $title = $(this).find(".title");    if (!$title.length) {       $(this).append('' + $(this).attr("title") + '');    } else {       $title.remove();    } });The following is the CSS −.demo {    border-bottom: 2px dotted;    position: relative; } .demo .title {    position: absolute;    top: 15px;    background: gray;    padding: 5px;    left: 0;    white-space: nowrap; }

To enable rear camera, firstly use −MediaStreamTrack.getSources(gotSources);Now, select the source and pass it in as optional into getUserMedia method.This method is useful for users to set permission to use up to one video input device −var a = {    audio: {       optional: [{sourceId: audioSource}]    },    video: {       optional: [{sourceId: videoSource}]    } }; navigator.getUserMedia(a, successCallback, errorCallback);

Many ways are available to make the web page height to fit the screen height −Give relative heights −html, body {    height: 100%; }You can also give fixed positioning −#main {    position:fixed;    top:0px;    bottom:0px;    left:0px;    right:0px; }You can also use Viewport height to fulfill your purpose −height: 100vh;

Use the postMessage method for transferring data across different domains.ExampleYou can try the following code snippet to solve the cross-domain HTML5 iframe issue −// Using postMessage() window.onmessage = function(e) {    e.source.postMessage(document.body.innerHTML, e.origin); }; window.onmessage = function(event) {    alert(e.data); }; // fire document.getElementById('frame1').contentWindow.postMessage('','*');

Yes, it is possible to validate the size and type of input type = “file”. Use jQuery to get the desired result −                                                        $(function(){             $('form').submit(function(){                var val = true;                   $('input[type=file][data-max-size]').each(function(){                      if(typeof this.files[0] !== 'undefined'){                         var max = parseInt($(this).attr('max-size'),10),                         mySize = this.files[0].size;                         val = max > mySize;                         return val;                      }                   });                   return val;                });             });          

To escape single quotes, use json_encode() to echo arrays in HTML5 data attributes.printf('', htmlspecialchars(json_encode(array('html5', ...)), ENT_QUOTES, 'UTF-8'));Or you can also using built-injson_encode(array('html5', ...), JSON_HEX_APOS)

You can try the following code snippet to display video inside HTML5 canvas.var canvas1 = document.getElementById('canvas'); var context = canvas1.getContext('2d'); var video = document.getElementById('video'); video.addEventListener('play', function () { var $this = this; (function loop() { if (!$this.paused && !$this.ended) { context.drawImage($this, 0, 0); setTimeout(loop, 1000 / 30); } })(); }, 0);

A Single Page Application (SPA) loads the resources required to navigate throughout the site. This is for the first page load and SPA is a web application or website.The content loads dynamically when your site’s link is clicked and the user interacts with the page. On load, the data stored in the tracker updates as well.Update the trackerga('set', 'page', '/new-page.html');Record pageviewSend a pageview immediately after the tracker updates −ga('send', 'pageview');