Found 601 Articles for Front End Scripts

How to make an Ember.js app offline with server sync when available?

Arjun Thakur
Updated on 25-Jun-2020 07:55:53

92 Views

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

How to make the user login for an offline web app?

George John
Updated on 30-Jul-2019 22:30:22

381 Views

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.

HTML5 video full preload in JavaScript

Chandu yadav
Updated on 25-Jun-2020 07:58:43

616 Views

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

HTML5 File API readAsBinaryString reads files as much larger and different than files on disk

Ankith Reddy
Updated on 25-Jun-2020 07:49:37

93 Views

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

HTML5 file uploading with multiple progress bars

George John
Updated on 25-Jun-2020 07:51:15

315 Views

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);

Cross-browser drag-and-drop HTML file upload?

Nishtha Thakur
Updated on 25-Jun-2020 07:50:35

215 Views

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

Reset HTML input style for checkboxes to default in IE

Arjun Thakur
Updated on 25-Jun-2020 07:52:00

170 Views

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; }

HTML5 Video Tag in Chrome - Why is currentTime ignored when video downloaded from my webserver?

Chandu yadav
Updated on 25-Jun-2020 07:52:33

447 Views

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

How to prevent text select outside HTML5 canvas on double-click?

Smita Kapse
Updated on 25-Jun-2020 07:53:07

242 Views

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.

Detection on clicking bezier path shape with HTML5

Ankith Reddy
Updated on 25-Jun-2020 07:54:28

157 Views

To detect Bezier path shape on click, try the following code −Examplevar l = boxes.length; for (var i = l-1; i >= 0; i--) {    drawshape(gctx, boxes[i], 'black', 'black');    var imgData = gctx.getImageData(mx, my, 1, 1);    var index = (mx + my * imgData.width) * 4;    if (imgData.data[3] > 0) {       mySel = boxes[i];       offsetx = mx - mySel.x;       offsety = my - mySel.y;       mySel.x = mx - offsetx;       mySel.y = my - offsety;       isDrag = true;       canvas.onmousemove = myMove;       invalidate();       clear(gctx);       return;    } }

Advertisements