Found 10483 Articles for Web Development

Several distinct caches for a single URL in HTML Cache?

Riya Kumari
Updated on 13-Oct-2022 08:11:22

349 Views

Content caching is an effective way for fast and smooth user experience. Every URL in a web page can be linked to a single cache manifest section. However, there are certain large and rarely used files which decreases the overall speed of the Cache. Since they do not need to be changed but still gets re-downloaded every time the Cache gets updated, it is better to have such files in different cache with same URL. This will increase its speed and performance. So, how to spilt HTML cache? Before that, let’s understand what an HTML cache is. What is an ... Read More

Is there a way to resize image with “nearest neighbour” resampling in HTML5?

Riya Kumari
Updated on 13-Oct-2022 08:08:26

2K+ Views

Resizing an image is one of the cumbersome tasks since it affects the performance of your website. In case of online photos, size is of great importance. Generally, users prefer small size images since it takes less time to load even with moderate internet connections. If the image is too big, your page may become unresponsive for some time. Web pages with uniformly sized images are attractive and appealing. Hence, it is essential to upload images of appropriate size to your website. Resizing VS Resampling Changing the size that is, height and width, of an image to be printed ... Read More

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

144 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

407 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

332 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

278 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

590 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

337 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

231 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

173 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://*

Advertisements