Tag: html5

Are there any javascript libs to pixel compare images using HTML5 canvas (or any other means)?

Would like to test if 2 images pixel match and/or whether a smaller sized image pixel matches some same sized section of a larger image.

Change colour of table row onclick

I have created a table having rows with alternating colours(say yellow and red). Now, I want to change the colour of the clicked row to one common colour(say blue).And revert back to its original colour when clicked again. I’m able to change the colour using this code $(“#mainTable”).find(‘#’+IDClicked).css(“background-color”, “#bbbbff”); I’m not able to figure out […]

How can I fill canvas shape with animation?

I’m new to canvas. I have a drop canvas shape and want to fill it as animation. HTML <canvas id=”canvas” width=”500″ height=”500″></canvas> JS var canvas = document.getElementById(“canvas”), context = canvas.getContext(“2d”); context.beginPath(); context.moveTo(109,15); context.bezierCurveTo(121,36,133,57,144,78); context.bezierCurveTo(160,109,176,141,188,175); context.bezierCurveTo(206,226,174,272,133,284); context.bezierCurveTo(79,300,24,259,25,202); context.bezierCurveTo(25,188,30,174,35,161); context.bezierCurveTo(53,115,76,73,100,31); context.bezierCurveTo(103,26,106,21,109,15); context.lineWidth = 10; context.strokeStyle=”#0092f9″; context.stroke(); context.fillStyle=”rgb(43,146,255)”; context.beginPath(); context.moveTo(181,229); context.bezierCurveTo(179,232,178,235,176,238); context.bezierCurveTo(171,247,165,254,158,260); context.bezierCurveTo(150,266,141,269,132,272); context.bezierCurveTo(126,274,119,275,112,275); context.bezierCurveTo(108,276,104,275,100,275); context.bezierCurveTo(92,274,84,272,76,269); context.bezierCurveTo(67,265,60,259,53,251); context.bezierCurveTo(48,245,43,238,39,231); […]

HTML5 form validation without Javascript validation

I recently approached the new (for me) topic of HTML5 form validation. I tested it with success, but I’m still quite confused on how and why to use it. Let me try to explain with a simple example. My form have 10 fields (text, numbers, dates…); each one has it own required and pattern. The […]

On page load need to set cursor on particular field and auto keyboard open without touch on textfield

How can I open a keyboard prompt without touch on textfield when page loads? I also need to set the cursor on to that field so that keyboard will auto open to type easily. My Code is: $(“#email”).focus(); $(‘#email’).trigger(‘click’); This will works only in firefox browser not in chrome and others. Also in iphone cursor […]

Mobile App “unable to load previous operation due to low memory” after loading image?

I have a simple mobile app. It starts by prompting the user to select an image which is then loaded locally via the following code and displayed on a canvas: function handleFileSelect(evt) { var files = evt.target.files; var f = files[0]; console.log(evt); var ctx = document.getElementById(“myCanvas”).getContext(‘2d’), img = new Image(), f = document.getElementById(“uploadbutton”).files[0], url = […]

HTML5 audio tag in React

I want to use a simple HTML5 audio tag in my react application. My component looks like this: import React from ‘react’ class AudioPlayer extends React.Component { render() { return ( <div> <audio ref=”audio_tag” src=”./static/music/foo.mp3″ controls autoPlay/> </div> ); } } export default AudioPlayer; but it just won’t play. I also don’t get any errors. […]

Callback in Polymer(); when element is shown

Is there a callback available in the Polymer({}) object which fires everytime the element is shown ? ready is not suitable because it’s called when the element is created on initial page load. I need an event or callback every time the route changes and my element is displayed. Why do I need this ? […]

How to read local file from webextension in Firefox?

As said in the subject, I need to fill a web form using data locally available as excel tables. I am already making that with a combination of python and autohotkey, but I want to have some level of JavaScript control in order to correctly handle loading times and conditionals. As a web development newbie, […]

How can I customize the caret?

I would like to customize the caret in my forms, or a contenteditable (html5) element. How can I do so?