Found 10483 Articles for Web Development

Phonegap + Windows Phone 8 : HTML5 viewport meta & scaling issue

karthikeya Boyini
Updated on 04-Mar-2020 08:02:15

130 Views

Whenever you face such issue, it would mean you have not written the CSS properly.Just add the following in CSS −* {    zoom:1;    -ms-content-zooming:none; }For some code, even the following works −@viewport {    width:320px; } @-ms-viewport {    width:320px;    zoom-user:fixed;    max-zoom:1;    min-zoom:1; }

toDataURL throw Uncaught Security exception in HTML

Samual Sam
Updated on 29-Jan-2020 06:24:50

143 Views

To solve the Uncaught Security Exception, you need to add the crossorigin attribute: function getBase64() {    var myImg = document.getElementById("myid");    var c = document.createElement("canvas");    c.width = myImg.width;    c.height = myImg.width;    var context = c.getContext("2d");    context.drawImage(img, 0, 0);    var dataURL = c.toDataURL("image/png");    alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, "")); } getBase64();

Full page drag and drop files website with HTML

Lakshmi Srinivas
Updated on 28-Jan-2020 10:18:14

419 Views

For full page drag and drop files, try the following code:var myDrop = document.getElementById('dropZone'); function displayDropZone() {    myDrop.style.visibility = "visible"; } function hideDropZone() {    myDrop.style.visibility = "hidden"; } function allowDrag(ev) {    if (true) {       ev.dataTransfer.dropEffect = 'copy';       ev.preventDefault();    } } function handleDrop(ev) {    ev.preventDefault();    hideDropZone();    alert('This is Drop!'); } window.addEventListener('dragenter', function(ev) {    displayDropZone(); }); myDrop.addEventListener('dragenter', allowDrag); myDrop.addEventListener('dragover', allowDrag); myDrop.addEventListener('dragleave', function(e) {    hideDropZone(); }); myDrop.addEventListener('drop', handleDrop);

Getting Safari to recognize
HTML 5

karthikeya Boyini
Updated on 28-Jan-2020 10:19:15

135 Views

To make a element to be recognized by Safari:main {    display: block;    width: 800px;    height: 800px;    background-color: #0C0; }You need to focus on:main {    display: block; }

HTML5 meta name = “viewport” doesn't work as expected

Anvi Jain
Updated on 28-Jan-2020 10:23:26

780 Views

To solve the issue for HTML5 meta viewport, you can any of the following fix:You can also try this:Let us say you have a site width of 100px, then it won’t display the whole page, withinitial-scale = 1

How to send a file and parameters within the same XMLHttpRequest

Jennifer Nicholas
Updated on 28-Jan-2020 10:34:09

466 Views

To send a file and parameters within the same XMLHttpRequest:var myForm = new FormData(); myForm.append('param1', 'demo'); myForm.append('param2', 6767); myForm.append('myDir', 'public-data'); myForm.append('demofile', file); xhr.send(myForm);

Enhance real-time performance on HTML5 canvas effects

Samual Sam
Updated on 28-Jan-2020 10:33:37

540 Views

To enhance HTML5 canvas performance:Image smoothing should be disabledRender in half resolutionUse drawImage() to update main canvas You need to use integer coordinates and sizesUsage of requestAnimationFrame() You need to use while loops as often as you can

HTML5 drawImage() method to draw image onto the canvas

Rishi Rathor
Updated on 28-Jan-2020 10:23:53

341 Views

To draw image onto the canvas, use the HTML5 drawImage() method:                    function drawShape(){             // get the canvas element using the DOM             var canvas = document.getElementById('mycanvas');                       // Make sure we don't execute when canvas isn't supported             if (canvas.getContext){                // use getContext to use the canvas for drawing                var ctx = canvas.getContext('2d');                // Draw shapes                var img = new Image();                img.src = '/images/backdrop.jpg';                img.onload = function(){                   ctx.drawImage(img,0,0);                   ctx.beginPath();                   ctx.moveTo(30,96);                   ctx.lineTo(70,66);                   ctx.lineTo(103,76);                   ctx.lineTo(170,15);                   ctx.stroke();                }             } else {                alert('You need Safari or Firefox 1.5+ to see this demo.');             }          }                        

Unable to take a photo from webcam using HTML5 and on the first page load

Lakshmi Srinivas
Updated on 28-Jan-2020 10:32:55

255 Views

You need to try the following to take photo from webcam using HTML5:Declare variablesvar streaming = false,    video = document.querySelector('#video'), canvas = document.querySelector('#canvas'),    photo = document.querySelector('#photo'),    startbutton = document.querySelector('#startbutton'),    width = 320,    height = 0;Using getUserMedianavigator.getMedia = ( navigator.getUserMedia ||                 navigator.webkitGetUserMedia ||                   navigator.mozGetUserMedia ||                    navigator.msGetUserMedia);

PHP timestamp to HTML5 input type=datetime element

karthikeya Boyini
Updated on 20-Dec-2019 10:47:47

920 Views

For HTML5 input time, in PHP:Exampleecho date("Y-m-d\TH:i:s");OutputThe output would be:2018-28-03T19:12:49HTML with Timestamp would be:

Advertisements