Found 598 Articles for Front End Scripts

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

143 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

406 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

331 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

267 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

587 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

334 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

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

HTML5 appcache with Safari causing cross-site css to not load correctly

Anvi Jain
Updated on 25-Jun-2020 07:53:42

170 Views

Appcaches are used by the web browser to specify what files exist on your site that is relevant to the particular page the browser is visiting.Safari follows the AppCache standard more strictly and sees a request for a web address that is not in the AppCache.To avoid the requests to be blocked, use −NETWORK: * http://* https://*

HTML5

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

204 Views

PhoneGap is a software development framework by Adobe System, which is used to develop mobile applications. PhoneGap produces apps for all popular mobile OS platforms such as iOS, Android, BlackBerry, and Windows Mobile OS etc.HTML5 Audio support is not consistent across different devices due to codec licensing issues and OS implementation. Forplaying MP3 file, handle by using PhoneGap's Media class that would provide reliable audio programming on all the platforms.To repload audio and polyphony or layering, you can use the LowLatencyAudio PhoneGap native plugin.

HTML5 Canvas Text Stroke for Large Font Size

Arjun Thakur
Updated on 25-Jun-2020 07:42:11

264 Views

To draw large font properly in HTML5 Canvas, you can try to run the following code −var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.font = '180pt Georgia'; context.strokeStyle = "#FF0000"; context.fillStyle = "#FFFFFF "; context.lineWidth = 34; context.fillText("Demo!",0,200); context.strokeText("Demo!",0,200);

Advertisements