Skip to content

Instantly share code, notes, and snippets.

@tilomitra
Created March 22, 2013 23:15
Show Gist options
  • Save tilomitra/5225472 to your computer and use it in GitHub Desktop.
Save tilomitra/5225472 to your computer and use it in GitHub Desktop.
very basic pinch-to-zoom using YUI3 and touch events.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta name="viewport" content = "width = device-width, initial-scale = 2.3, user-scalable = no" />
<title></title>
<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>
<style>
#box {
width: 150px;
height: 150px;
background: #ccc;
position: relative;
top: 10%;
left: 10%;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
YUI().use('event-move', 'node', function (Y) {
var box = Y.one('#box');
box.on('touchstart', function (e) {
console.log('touchstart ' + ' with ' + e.touches.length + ' touches');
});
box.on('touchmove', function (e) {
var s = 150;
console.log('touchmove ' + ' with ' + e.touches.length + ' touches');
Y.one('#box').setStyles({
width: s * e.scale + 'px',
height: s * e.scale + 'px'
});
console.log(e.scale);
});
box.on('touchend', function (e) {
console.log('touchend ' + ' with ' + e.touches.length + ' touches');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment