Skip to content

Instantly share code, notes, and snippets.

@simondell

simondell/index.html

Created December 4, 2012 15:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save simondell/4204972 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save simondell/4204972 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Simon Dell. Android adds invisible target area - In a recent project, it seemed as though Android was adding invisible active areas around a submit button on a form. This was problematic as there was a link with a JS event handler pretty clos
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.5">
<title>submit button touch area test</title>
</head>
<body>
<form name="ig" action="index.html" method="get">
<fieldset>
<legend>I like legends</legend>
<input type="search" name="t" placeholder="Type here" /><input type="submit" name="s" value="search" /><a id="hoob" href="#link">A link</a>
</fieldset>
</form>
</body>
</html>
Raw
script.js
var link = document.getElementById('hoob');
var colours = ['red','orange','yellow','green','blue','purple'];
var indx = 0;
link.addEventListener( 'click', function () { this.style.backgroundColor = colours[indx%6]; indx += 1; }, false );
Raw
style.css
input, a#hoob {
padding:4px;
margin:0;
border: 1px solid black;
background-color: white;
border-radius: 4px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment