Javascript Articles - Page 537 of 671

To scale fonts, let us see an example.Canvas: 800px Font Size: 60pxYou need to use the following code for our example to scale font size based on canvas −var fontBase = 800; var fontSize = 60; function getFont() {    var ratio = fontSize / fontBase;    var cSize = canvas.width * ratio;    return (cSize |0) + 'px sans-serif'; }

Use the ember-localstorage adapter.App.store = DS.Store.create({    revision: 11,    adapter: DS.LSAdapter.create() });ExampleYou need to define the adapter you want to use for client-side storage −App.Store = DS.SyncStore.extend({    revision: 10,    adapter: DS.IndexedDB.adapter({       mappings: {          person: App.Person,          persons: App.Person,          contact: App.Contact,          contacts: App.Contact       }    }) });

While logging in i.e. online, you need to first authenticate against the server and if it works, store the username and a hashed password in the database.If you can find the account in the database, then you need to generate a new hash, only if the user has changed the password since the last time he logged.You need to also authenticate against the local database. Log in using the online version of the app at least once.

Use the oncanplaythrough event to completely preload video. You can try to run the following code.Example                                        Your browser does not support the video element.                      function display() {             alert("Can be played without pausing for buffering.");         }

This may happen if you are reading your file as a binary string and forming the multipart/ form-data request manually.You need to try and use xhr.send(File) and work around xhr progress event, which is fired when all list items had been already created.ExampleThe following is our upload function −function display(url, files) {    var myForm = new FormData();    for (var j = 0, file; file = files[j]; ++j) {       myForm.append(file.name, file);    }    var xhr = new XMLHttpRequest();    xhr.open('POST', url, true);    xhr.onload = function(e) { ... };    xhr.send(formData); }

To make it work correctly, you need to work around xhr progress event, which is fired when all list items had been already created.The xhr should know what you want to do −var a = new XMLHttpRequest(); a.upload.li = li; a.upload.addEventListener('progress', function(e) {    var pc = parseInt(event.loaded / event.total * 100);    this.li.find(".progressbar").width(pc); }, false);

For cross-browser HTML File Uploader, use FileDrop. It works on almost all modern web browsers.As per the official specification −FileDrop is a self-contained cross-browser for HTML5, legacy, AJAX, drag & drop, JavaScript file upload

It is not possible to reset the checkbox back to the default native style with some web browsers.You can try this and list every type of input to style −input[type="text"], input[type="password"] {    border: 2px solid green; }You can also use the CSS3 pseudo-class, but it may or may not work in IE 11 −input:not([type="checkbox"]) {    border: 2px solid green; }

To be able to playback video from a specific time using the HTML5 video tag, try these fixes.Your web server should be capable of serving the document using byte ranges. The Google Chrome web browser want this to work. If this is not worked out, then the seeking will be disabled and even if you set the currentTime, it will not work.Test your web server, if it allows this −curl --dump-header - -r0-0 http://theurl

To avoid the double click text issue −var canvas1 = document.getElementById('c'); canvas1.onselectstart = function () {    return false; }Note − The Canvas should not fill the width of the page and it is only 100 pixels wide.