Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Javascript Articles
Page 431 of 534
How to reload the current page without losing any form data with HTML?
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); // ... }
Read MoreHTML5 Canvas to PNG File
To convert HTML5 canvas to PNG, follow the below-given steps −You need to add the generated data URL to the href attribute of an tag.Dialog for base64 image −Add a filename −Now define http headers −headers=Content-Disposition: attachment; filename=newimg.pngTo deal with the RAM of the web browser and make its utilization less −// generated the data URL dynamically function myCanvas() { var d = canvas.toDataURL('image/png'); this.href = d; }; d.addEventListener('click', myCanvas, false);
Read MoreRemember and Repopulate File Input in HTML5
To repopulate, use the drag and drop. This was not possible before, but now it is valid.Let us see how −function drop(ev) { ev.stopPropagation(); ev.preventDefault(); // retrieving dataTransfer field from the event var d = ev.dataTransfer; var files = d.files; handleFiles(files); }For drag and drop −// dragging target.addEventListener('dragover', (ev) => { ev.preventDefault(); body.classList.add('dragging'); }); // drag leave target.addEventListener('dragleave', () => { body.classList.remove('dragging'); }); // drop target target.addEventListener('drop', (ev) => { ev.preventDefault(); body.classList.remove('dragging'); });
Read MoreWhat is the usage of the cross-origin attribute in HTML5?
The official specification states cross-origin attribute as −The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas.When it is combined with CORS header, it would allow images defined by the element, loaded from foreign origins to be used in canvas. The procedure would be like being loaded from the current origin.You can use it to solve JavaScript errors like to log js errors −if (securityOrigin()->canRequest(targetUrl)) { msg = myError; line = myLineNumber; source = sourceURL; } else { msg = "Error!"; source = String(); line = 0; }
Read MoreFacing Problem in retrieving HTML5 video duration
To get the video duration, query the readyState attribute. It has a series from 0 to 4. When the metadata has loaded, the value you will get is 1.Therefore, you need to do something like −window.setInterval(function(tm) { // Using readyState attriute if (video.readyState > 0) { var duration = $('#duration').get(0); // for video duration var video_duration = Math.round(video.duration); duration.firstChild.nodeValue = video_duration; clearInterval(tm); } },1000);
Read MoreThe correct way to work with HTML5 checkbox
The following is the correct way −ExampleHere is an example − Checkbox Control Maths Physics
Read MoreFlexbox and vertical scroll in a full-height app using newer Flexbox API with HTML
The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties. The flex property sets the flexible length on flexible items.For example −#container article { -webkit-flex: 1 1 auto; overflow-y: auto; height: 0px; /*here the height is set to 0px*/ }If you want a min-height, the use height: 100px; that it is exactly the same as − min-height: 100px;#container article { -webkit-flex: 1 1 auto; overflow-y: auto; height: 100px; /*here the height is set to 100px*/ }
Read MoreIs there a way to add/remove several classes in one single instruction with classList in HTML and JavaScript?
The classList property returns the class name(s) of an element, as a DOMTokenList object. The classList property is read-only, however, you can modify it by using the add() and remove() methods.The classListproperty ensures that duplicate classes are not unnecessarily added to the element. In order to keep this functionality, if you dislike the longhand versions or jQuery version, I’d suggest adding addMany function and removeMany to DOMTokenListThese would then be useable like so −DOMTokenList.prototype.addMany = function(classes) { var arr = classes.split(' '); for (var j = 0, length = arr.length; j < length; j++) { this.add(array[j]); ...
Read MoreMouse event not being triggered on HTML5 canvas? How to solve it?
To trigger mouse event we can add −-webkit-transform: translate3d(0, 0, 0)In addition to this canvas can also be styled.Another way is to add a listener in the event mousemove,canvas.addEventListener("mousemove", this.checkMouseLocation.bind(this, this.inputs), false);By adding this listener, we can easily trigger a mouse move event in HTML5.
Read MoreUpload from local drive to local filesystem in HTML with Filesystem API
To upload from local drive to the local file system, we can use −Webkitdirectory attribute on − This allows the user to select a directory by the appropriate dialog box.Filesystem API is a sandboxed filesystem, which allows us to store files on client’s machine.File API allows us to read files. Files are accessible by elementAll of the above is working fine in Google Chrome.WebKit directory is a much better option among these. Use the following for directory −webkitRequestFileSystem( window.TEMPORARY, 5 * 1024 * 1024, function(_fs) { fs = _fs; }, ErrAbove, err and fs are −var fs, err = function(err) { throw err; };
Read More