Preview Image Before and After Upload in HTML and JavaScript

Vrundesha Joshi
Updated on 25-Jun-2020 07:01:37

2K+ Views

To preview an image before and after upload, you need to try the following code − HTML         The following is the jQuery −function display(input) {    if (input.files && input.files[0]) {       var reader = new FileReader();       reader.onload = function(event) {          $('#myid').attr('src', event.target.result);       }       reader.readAsDataURL(input.files[0]);    } } $("#demo").change(function() {    display(this); });

HTML5 Video Not Playing in Firefox

Samual Sam
Updated on 25-Jun-2020 07:00:27

2K+ Views

HTML5 video should work in Firefox web browser. If it is still not working, try the following −Start Firefox in Safe Mode to check if any extension is creating issues.To reach Extensions, go to, Firefox/Tools > Add-ons > ExtensionsTry to turn off hardware acceleration.You need to check the media prefs that do not have the default value.If the media.windows-media-foundation.enabled is set to false, you need to set it to true and restart.Any of the above fixes should work.

CSS Grid Columns

Chandu yadav
Updated on 25-Jun-2020 06:57:52

202 Views

The vertical line in the following is called Grid Columns.

CSS Grid Elements

Arjun Thakur
Updated on 25-Jun-2020 06:56:38

366 Views

Grid Elements in CSS has parent and child elements. Here’s an example wherein a grid is created with 6 elements.ExampleLive Demo                    .container {             display: grid;             grid-template-columns: auto auto;             padding: 20px;          }          .ele {             background-color: orange;             border: 2px solid gray;             padding: 25px;             font-size: 20px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

CSS content Attribute on HTML5 Progress Element

George John
Updated on 25-Jun-2020 06:48:39

259 Views

You need to add static content in CSS to make it work.Let us see an example −HTMLYou need to add the following CSS. This is to add CSS generated content before and after the HTML5 progress element −progress::-webkit-progress-bar:before, progress::-webkit-progress-bar:after {    content: '989'; }

How Not to Validate HTML5 Input with Required Attribute

Jennifer Nicholas
Updated on 25-Jun-2020 06:47:22

224 Views

To avoid validation, use the formnovalidate attribute in HTML5. In the example, validation is disabled for the 2nd button −Example           HTML formnovalidate attribute                        Rank                              

HTML5 File Slice Method Explained

Ankith Reddy
Updated on 25-Jun-2020 06:46:49

240 Views

The HTML5 file Blob.slice() method is useful for creating a Blob object containing the data. This data is in the specified range of bytes of the source Blob.Let us see an example to send and receive binary data using slice(). This example sends a text and uses the POST method to send the "file" to the server −var val = new XMLHttpRequest(); val.open("POST", url, true); val.onload = function (event) { }; var blob = new Blob(['demo'], {type: 'text/plain'}); val.send(blob);

Best Display HTML5 Geolocation Accuracy on Google Map

Rishi Rathor
Updated on 25-Jun-2020 06:46:14

423 Views

To display HTML5 geolocation accuracy on a Google Map, use the following code −var lat = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; var center = new google.maps.LatLng(lat, longitude); var a = new google.maps.Marker({    position: center    map:    icon: }); var mySphere = new google.maps.Circle({    center: centerPosition,    radius: accuracy,    map:    fillColor:    fillOpacity:    strokeColor:    strokeOpacity: }); map.fitBounds(mySphere.getBounds());

Draw a 3D Sphere in HTML5

karthikeya Boyini
Updated on 25-Jun-2020 06:45:24

778 Views

To create a 3D sphere, use the HTML5 canvas. You can use the following function in your code:function display(r) {    this.point = new Array();    this.color = "blue)"    this.r = (typeof(r) == "undefined") ? 20.0 : r;    this.r = (typeof(r) != "number") ? 20.0 : r;    this.vertexes = 0;    for(alpha = 0; alpha

Cross-Origin Data in HTML5 Canvas

karthikeya Boyini
Updated on 25-Jun-2020 06:39:27

425 Views

For cross-origin data in canvas, add the following attribute to the

Advertisements