Skip to content

Instantly share code, notes, and snippets.

@anton-rudeshko

anton-rudeshko/long-tap.html

Created June 22, 2013 10:42
Show Gist options
  • Save anton-rudeshko/5840400 to your computer and use it in GitHub Desktop.
Save anton-rudeshko/5840400 to your computer and use it in GitHub Desktop.
Download ZIP
Some mobile
Raw
long-tap.html
<html>
<head>
<script type="text/javascript">
(function (d) {
var longTapTimer,
ael = 'addEventListener',
TAP_DELAY = 500, // ms
element = null,
onLongTap = function () {
alert('long tap regisered on ' + element);
},
startTimer = function (e) {
console.log('start timer, e.type = %s', e.type);
element = e.target;
longTapTimer = setTimeout(onLongTap, TAP_DELAY);
},
stopTimer = function (e) {
console.log('stop timer, e.type = %s', e.type);
element = null;
clearTimeout(longTapTimer);
};
d[ael]('touchstart', startTimer);
d[ael]('touchend', stopTimer);
d[ael]('touchmove', stopTimer);
})(document);
</script>
</head>
<body>
<div>
<a href="#ololo">Ololo</a>
<br>
<a href="#meooow">Meooow</a>
<br>
<img height="200" src="http://octodex.github.com/images/octobiwan.jpg" alt="octobiwan">
<br>
<img height="200" src="http://octodex.github.com/images/stormtroopocat.jpg" alt="trooper">
</div>
</body>
</html>
Raw
page-loading.html
<html>
<head>
<script type="text/javascript">
console.log('start loading');
window.onload = function () {
console.log('everything is loaded');
}
</script>
<style type="text/css">
img {
visibility: hidden;
}
</style>
<link href="https://a248.e.akamai.net/assets.github.com/assets/github-c948d46acf22c5703f5ff131483ea42369eb7890.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<p id="counter">
0
</p>
<script>
console.log('before some content loaded');
</script>
<p>some content</p>
<script>
console.log('after some content loaded');
</script>
<p>some postload (ajax etc)</p>
<img src="http://gems.github.com/octocat.png" alt="github octocat">
<img src="http://octodex.github.com/images/Mardigrastocat.png" alt="github octocat">
<img src="http://octodex.github.com/images/kimonotocat.png" alt="github octocat">
<img src="http://octodex.github.com/images/Professortocat_v2.png" alt="github octocat">
<script>
(function (d) {
var counter = d.getElementById('counter'),
imgs = d.getElementsByTagName('img'),
styles = d.getElementsByTagName('link'),
forEach = imgs.forEach = styles.forEach = Array.prototype.forEach,
totalCount = imgs.length + styles.length,
loadedCount = 0,
reportProgress = function() {
var loaded = counter.innerHTML = (++loadedCount) + '/' + totalCount;
console.log('loaded: ' + loaded);
console.log(this);
};
imgs.forEach(function (img) {
// if (img.complete) {
// reportProgress();
// } else {
img.addEventListener('load', reportProgress);
// }
});
styles.forEach(function (style) {
var img = new Image();
img.onerror = reportProgress;
img.src = style.href;
})
})(document);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment