Div Movement:
We will use two div for movement, here parent_div is only for drag purposes and child_div is only for zoom purposes.
For this we will in need of hammer.js. This is plugin used for mobile apps.
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<style>
body {
padding: 0;
overflow: hidden;
}
#pinchzoom {
-webkit-transform: translate3d(0, 0, 0);
overflow: hidden;
}
</style>
</head>
<body>
<div id="pinchzoom">
<div id="parent_div" style="background-color:red;height: 400px;width: 400px;">
<div id="child_div" style="background-color:blue;height: 200px;width: 200px;"></div>
</div>
</div>
<!-- jQuery is just for the demo! Hammer.js works without jQuery :-) -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/hammer.js"></script>
<script src="js/hammer.fakemultitouch.js"></script>
<script src="js/hammer.showtouches.js"></script>
<!--[if !IE]> -->
<script>
// show touches doesnt work well in older IE versions due lack of support of
// the pointer-event css property
if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
Hammer.plugins.showTouches();
}
</script>
<!-- <![endif]-->
<script>
if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
Hammer.plugins.fakeMultitouch();
}
var hammertime = Hammer(document.getElementById('parent_div'), {
transform_always_block: true,
transform_min_scale : 1,
drag_block_horizontal : true,
drag_block_vertical : true,
drag_min_distance : 0
});
var hammertimes = Hammer(document.getElementById('child_div'), {
transform_always_block: true,
transform_min_scale : 1,
drag_block_horizontal : true,
drag_block_vertical : true,
drag_min_distance : 0
});
var posX = 0, posY = 0, position_x=0,position_y=0,off_top_child_end=0,
scale = 1, last_scale = 1, off_left=0,off_top=0,off_left_child_end =0,child_div_width = 0,child_div_height=0,center_parent_div_x=0,center_parent_div_y=0,
off_left_child = 0,off_top_child=0;
var parent_div = document.getElementById('parent_div');
hammertime.on('dragend drag ', function(ev) {
switch(ev.type) {
case 'dragend':
position_x = posX;
position_y = posY;
off_left = $('#parent_div').offset().left;
off_top = $('#parent_div').offset().top;
break;
case 'drag':
posX = position_x + ev.gesture.deltaX;
posY = position_y + ev.gesture.deltaY;
var transform =
"translate(" + posX + "px," + posY + "px)";
parent_div.style.transform = transform;
parent_div.style.oTransform = transform;
parent_div.style.msTransform = transform;
parent_div.style.mozTransform = transform;
parent_div.style.webkitTransform = transform;
break;
}
});
var child_div = document.getElementById('child_div');
var child_div_transfered_width = $("#child_div").width();
var child_div_transfered_height = $("#child_div").height();
var child_div_initial_width=$("#child_div").width();
var child_div_initial_height=$("#child_div").height();
hammertimes.on('transform transformend', function(ev) {
switch(ev.type) {
case 'transformend' :
off_left_child_end = off_left_child;
off_top_child_end = off_top_child;
child_div_transfered_width = child_div_width;
child_div_transfered_height = child_div_height;
break;
case 'transform':
scale = Math.max(0, Math.min(last_scale * ev.gesture.scale, 10));
off_left_child = $('#child_div').offset().left - off_left;
off_top_child = $('#child_div').offset().top - off_top;
center_parent_div_x = ev.gesture.center.pageX - off_left - off_left_child_end;
center_parent_div_y = ev.gesture.center.pageY - off_top - off_top_child_end;
var transform =
"translate(" + off_left_child_end + "px," + off_top_child_end + "px) " +
"scale(" + scale + "," + scale + ") ";
if( scale>0.5){
child_div.style.transform = transform;
child_div.style.oTransform = transform;
child_div.style.msTransform = transform;
child_div.style.mozTransform = transform;
child_div.style.webkitTransform = transform;
if(child_div_transfered_height > 200){
$('#child_div').height( child_div_transfered_height );
$('#child_div').width( child_div_transfered_width );
}
child_div.style.webkitTransformOrigin = center_parent_div_x+'px '+ center_parent_div_y +'px';
child_div.style.transformOrigin = center_parent_div_x+'px '+ center_parent_div_y +'px';
child_div_width = $("#child_div").width()* scale;
child_div_height = $("#child_div").height()* scale;
}
break;
}
});
</script>
</body>
</html>
We will use two div for movement, here parent_div is only for drag purposes and child_div is only for zoom purposes.
For this we will in need of hammer.js. This is plugin used for mobile apps.
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<style>
body {
padding: 0;
overflow: hidden;
}
#pinchzoom {
-webkit-transform: translate3d(0, 0, 0);
overflow: hidden;
}
</style>
</head>
<body>
<div id="pinchzoom">
<div id="parent_div" style="background-color:red;height: 400px;width: 400px;">
<div id="child_div" style="background-color:blue;height: 200px;width: 200px;"></div>
</div>
</div>
<!-- jQuery is just for the demo! Hammer.js works without jQuery :-) -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/hammer.js"></script>
<script src="js/hammer.fakemultitouch.js"></script>
<script src="js/hammer.showtouches.js"></script>
<!--[if !IE]> -->
<script>
// show touches doesnt work well in older IE versions due lack of support of
// the pointer-event css property
if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
Hammer.plugins.showTouches();
}
</script>
<!-- <![endif]-->
<script>
if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
Hammer.plugins.fakeMultitouch();
}
var hammertime = Hammer(document.getElementById('parent_div'), {
transform_always_block: true,
transform_min_scale : 1,
drag_block_horizontal : true,
drag_block_vertical : true,
drag_min_distance : 0
});
var hammertimes = Hammer(document.getElementById('child_div'), {
transform_always_block: true,
transform_min_scale : 1,
drag_block_horizontal : true,
drag_block_vertical : true,
drag_min_distance : 0
});
var posX = 0, posY = 0, position_x=0,position_y=0,off_top_child_end=0,
scale = 1, last_scale = 1, off_left=0,off_top=0,off_left_child_end =0,child_div_width = 0,child_div_height=0,center_parent_div_x=0,center_parent_div_y=0,
off_left_child = 0,off_top_child=0;
var parent_div = document.getElementById('parent_div');
hammertime.on('dragend drag ', function(ev) {
switch(ev.type) {
case 'dragend':
position_x = posX;
position_y = posY;
off_left = $('#parent_div').offset().left;
off_top = $('#parent_div').offset().top;
break;
case 'drag':
posX = position_x + ev.gesture.deltaX;
posY = position_y + ev.gesture.deltaY;
var transform =
"translate(" + posX + "px," + posY + "px)";
parent_div.style.transform = transform;
parent_div.style.oTransform = transform;
parent_div.style.msTransform = transform;
parent_div.style.mozTransform = transform;
parent_div.style.webkitTransform = transform;
break;
}
});
var child_div = document.getElementById('child_div');
var child_div_transfered_width = $("#child_div").width();
var child_div_transfered_height = $("#child_div").height();
var child_div_initial_width=$("#child_div").width();
var child_div_initial_height=$("#child_div").height();
hammertimes.on('transform transformend', function(ev) {
switch(ev.type) {
case 'transformend' :
off_left_child_end = off_left_child;
off_top_child_end = off_top_child;
child_div_transfered_width = child_div_width;
child_div_transfered_height = child_div_height;
break;
case 'transform':
scale = Math.max(0, Math.min(last_scale * ev.gesture.scale, 10));
off_left_child = $('#child_div').offset().left - off_left;
off_top_child = $('#child_div').offset().top - off_top;
center_parent_div_x = ev.gesture.center.pageX - off_left - off_left_child_end;
center_parent_div_y = ev.gesture.center.pageY - off_top - off_top_child_end;
var transform =
"translate(" + off_left_child_end + "px," + off_top_child_end + "px) " +
"scale(" + scale + "," + scale + ") ";
if( scale>0.5){
child_div.style.transform = transform;
child_div.style.oTransform = transform;
child_div.style.msTransform = transform;
child_div.style.mozTransform = transform;
child_div.style.webkitTransform = transform;
if(child_div_transfered_height > 200){
$('#child_div').height( child_div_transfered_height );
$('#child_div').width( child_div_transfered_width );
}
child_div.style.webkitTransformOrigin = center_parent_div_x+'px '+ center_parent_div_y +'px';
child_div.style.transformOrigin = center_parent_div_x+'px '+ center_parent_div_y +'px';
child_div_width = $("#child_div").width()* scale;
child_div_height = $("#child_div").height()* scale;
}
break;
}
});
</script>
</body>
</html>
