EtienneR/gist:88ca1158d62ea6e0886d

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, maximum-scale=1" />
  <title>Vibrate Me</title>
  <style>
    body{
      background: #eee;
      margin: 0 auto;
      width: 320px;
    }
    button, input{
      display: inline-block;
      height: 32px;
      margin: 1% 0;
      width: 100%;
    }
    button{
      background: #fff;
      border: none;
      border-radius: 2px;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
      color: #646464;
      cursor: pointer;
      font-size: 0.9em;
      line-height: 32px;
      transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      transition-delay: 0.2s;
    }
    button:focus{
      background-color: #0f9d58;
      color: #fff;
    }
    .none{
      display: none;
    }
  </style>
</head>
<body>

  <input type="number" id="miliseconds" placeholder="Number of seconds" />
  <button onclick="vibrateMe()">Vibrate me !</button>

  <div id="cancel"></div>

  <script>
    function vibrateMe(cancel) {
      if ('vibrate' in navigator) {
        cancelElement = document.getElementById('cancel');

        if (cancel == 0) {
          navigator.vibrate(0);
          cancelElement.setAttribute('class', 'none');
        } else {
          cancelElement.setAttribute('class', '');
          cancelElement.innerHTML = '<button onclick="vibrateMe(0)">Cancel</button>';
          var miliseconds = document.getElementById('miliseconds');
          navigator.vibrate(parseInt(miliseconds.value) * 1000);
        }

      } else {
        alert('Vibrate is not available :(');
      }
    }
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, maximum-scale=1" />
	<title>Vibrate Me</title>
	<style>
	body{
	background: #eee;
	margin: 0 auto;
	width: 320px;
	}
	button, input{
	display: inline-block;
	height: 32px;
	margin: 1% 0;
	width: 100%;
	}
	button{
	background: #fff;
	border: none;
	border-radius: 2px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	color: #646464;
	cursor: pointer;
	font-size: 0.9em;
	line-height: 32px;
	transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	transition-delay: 0.2s;
	}
	button:focus{
	background-color: #0f9d58;
	color: #fff;
	}
	.none{
	display: none;
	}
	</style>
	</head>
	<body>

	<input type="number" id="miliseconds" placeholder="Number of seconds" />
	<button onclick="vibrateMe()">Vibrate me !</button>

	<div id="cancel"></div>

	<script>
	function vibrateMe(cancel) {
	if ('vibrate' in navigator) {
	cancelElement = document.getElementById('cancel');

	if (cancel == 0) {
	navigator.vibrate(0);
	cancelElement.setAttribute('class', 'none');
	} else {
	cancelElement.setAttribute('class', '');
	cancelElement.innerHTML = '<button onclick="vibrateMe(0)">Cancel</button>';
	var miliseconds = document.getElementById('miliseconds');
	navigator.vibrate(parseInt(miliseconds.value) * 1000);
	}

	} else {
	alert('Vibrate is not available :(');
	}
	}
	</script>

	</body>
	</html>