Javascript Articles - Page 543 of 671

HTML5 video not working with jquery bxSlider plugin on iPad

Arjun Thakur
Updated on 25-Jun-2020 07:10:16

217 Views

To make it work, download the bxslider plugin from the official website. Get an images folder from the downloaded bxslider zip and you need to paste it into js folder of your project.All the folders will now look like − The above should solve your problem.

How to draw a 3D sphere in HTML5?

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

777 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

What HTML5 File.slice method actually doing?

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

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

How to best display HTML5 geolocation accuracy on a Google Map?

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

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

CSS content: attr() on HTML5 progress doesn't work

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

258 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

223 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 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.

How to disable zooming capabilities in responsive design with HTML5?

Ankith Reddy
Updated on 25-Jun-2020 07:02:19

813 Views

To disable zooming capabilities in responsive design, you need to create a META viewport tag.With that, set the user-scalable property to 'no' like −user-scalable=noAdd the following in your HTML code to disable zooming capabilities in responsive design −

How to preview an 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); });

How to display HTML5 client-side validation error bubbles?

Arjun Thakur
Updated on 27-Jan-2020 09:25:50

355 Views

To display HTML5 client-side validation error bubbles, use the required attribute.You do not need to have JavaScript for client side validations like empty text box would never be submitted because HTML5 introduced a new attribute called required which would be used as follows and would insist to have a value:                    Enter email :          Try to submit using Submit button                    

Advertisements