This article will teach you how safari on ipad IOS6 does not scale HTML5 video To fill 100% of page widthOn a responsive HTML5 page, a video can be shown at full width (100%) by applying the following CSS. The video's native resolution is 480x270. On all desktop browsers, the video is resized to span the entire width of the page while preserving the aspect ratio. On the iPad (iOS 6.0.1), Mobile Safari and Chrome, however, display a black rectangle same width as the page. The black rectangle's centre contains a little video that is shown at its original resolution ... Read More

To change navbar color,Set navbar background −navbarBackground: #c79810 ;Set navbar background highlight −navbarBackgroundHighlight: #eab92d ;Set navbar text color −navbarText: #f9ed9d ;Set navbar link color −navbarLinkColor: #f9ed9d ;

To truncate long texts inside rows of a table, use the following CSS −.table td.demo {    max-width: 177px; } .table td.demo span {    overflow: hidden;    text-overflow: ellipsis;    display: inline-block;    white-space: nowrap;    max-width: 100%; }The following is the HTML −    This is demo text and we have made it a long text for a demo.

To detect HTML5 audio MP3 support, use the Modernizr library.As stated in the official specification − Source − Screenshot from the official Modernizr documentation For detecting HTML5 audio MP3 support, you can also check the User-Agent to detect which browser is used.You can also use JavaScript to test −var x = document.createElement('audio'); return !!(x.canPlayType && x.canPlayType('audio/mpeg;').replace(/no/, ''));

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);    // ... }