Category Archives: Html5

Website flickering/flashing/blinking in Chrome on iPads after using JavaScript to update page with images and text

Questions: Our web page flickers on iPads after we add images or text to the page using JavaScript. We have tried various combinations of -webkit-backface-visibility:hidden; -webkit-transform-style:preserve-3d; -webkit-transform:translate3d(0,0,0) against different elements. Since we tile a background image, we can’t apply these styles to the body but can apply them to all DIVs, which helps but doesn’t… Read More »

Three.js insert image

Questions: I am trying to attach a simple image on a PlaneGeometry Mesh but it doesn’t seem to work. window.onload = function(){ var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // camera var camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 1, 1000); camera.position.y = -250; camera.position.z = 400; camera.rotation.x = 45 * (Math.PI / 180);… Read More »

Embedding HTML in embedded SVG in HTML?

Questions: It’s allowed to embed SVG in HTML… <!DOCTYPE html> <html lang=”en”> <head> <title>Hmmm….</title> </head> <body> <svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ x=”0″ y=”0″ width=”500px” height=”100%”> <text>Hello cruel world!</text> </svg> </body> </html> …and vice versa: <svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ x=”0″ y=”0″ width=”500px” height=”100%”> <foreignObject x=”0″ y=”0″ width=”100%” height=”100%”> <body xmlns=”http://www.w3.org/1999/xhtml”> <h1>Goodbye cruel world…</h1> </body> </foreignObject> </svg> The specs say… Read More »

What is the difference between DOMContentLoaded and DOMContentReady?

Questions: According to the MDN wiki, DOMContentLoaded will fire when “page’s DOM is ready, [although] the referenced stylesheets, images, and subframes may not be done loading.” What about DOMContentReady? Is it just an alias? Answers: I’m making the claim that the event type “DOMContentReady” does not exist in current implementations (meaning, that no current implementation… Read More »

Attaching functions on an instance of an element

Questions: We can modify a DOM element and add to its prototype. For example, if we want to add something to only to the canvas, we’d do something like this: HTMLCanvasElement.prototype.doSomething = function(arg) { … }; We can then perform this action on a canvas element: var canvas = document.getElementById(‘canvasId’); canvas.doSomething(…); Is it possible to… Read More »

Is it possible to store integer value in localStorage like in Javascript objects and extract it without typecasting?

Questions: When I assign integer value to localStorage item localStorage.setItem(‘a’,1) and check its type typeof(localStorage.a) “string” it returns string, I can typecast it to int for my use parseInt(localStorage.a) My question is it possible to store integer value inside localStorage as I can do for Javascript objects without typecasting? a={}; a.number=1; typeof(a.number) “number” Answers: My… Read More »

HTML5 Canvas Mouse Wheel Event

Questions: I can’t seem to get onMouseWheel events in an HTML5 canvas in Firefox. The following snippet works as expected in Chrome and IE9, but in Firefox I only receive the click event: <!DOCTYPE html> <html> <body> <canvas id=”TestCanvas” tabindex=”2″ onmousewheel=”window.alert(‘wheel!’)” onclick=”window.alert(‘click!’)” style=”width:90%;height:90%;margin-left:auto;margin-right:auto border:1px solid green;”></canvas> </body> </html> According to the specifications I’ve seen, onMouseWheel… Read More »

w3c compliance – html 5 – “Error: The document content type is not HTML : undefined”

Questions: Consider the following html5 file. <!DOCTYPE html> <html> <head> <title>test</title> </head> <body> test </body> </html> I am validating it using Html Validator (0.9.7.4) which is installed in Firefox(version 51) as an add on. It shows the following error I have pasted the code https://validator.w3.org/nu/#textarea and there is no issue shown here. Is this an… Read More »