Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
-4
rated 0 times [  1] [ 5]  / answers: 1 / hits: 10172  / 11 Years ago, thu, february 27, 2014, 12:00:00

I am using Phonegap and i want to use zoom in / out option on pinch using jquery mobile.
I have tried jgesture and hammer plugins for zooming it. Where i am wrong in this code?



<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=yes, 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 />
<link rel=stylesheet type=text/css href=css/jquery.mobile-1.4.1.min.css />
<title>Hello World</title>
<script type=text/javascript src=js/jquery-1.9.1.min.js></script>
<script>
$(document).bind(mobileinit, function(){
$.mobile.metaViewportContent = width=device-width, minimum-scale=1, maximum-scale=2;
});
</script>
<script type=text/javascript src=js/jquery.mobile-1.4.1.min.js></script>
</head>
<body>
<div class=app>
<h1>PhoneGap</h1>
<div id=deviceready class=blink>
<p class=event listening>Connecting to Device</p>
<p class=event received>Device is Ready</p>
</div>
</div>
<script type=text/javascript src=phonegap.js></script>
<script type=text/javascript src=js/index.js></script>
<script type=text/javascript>
app.initialize();

</script>
</body>
</html>

More From » jquery

 Answers
14

Use hammer.js pinch, pinchin, pinchout



Here's the event documentation for their API on github:



https://github.com/EightMedia/hammer.js/wiki/Getting-Started



ALSO you've essentially made it not user scalable...:



initial-scale=1, maximum-scale=1, minimum-scale=1,


This line:



<meta name=viewport content=user-scalable=yes, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi/>


And then you use jquery to set it again:



$.mobile.metaViewportContent = width=device-width, minimum-scale=1, maximum-scale=2;


No good, read up on it here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta


[#47341] Wednesday, February 26, 2014, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
brynn

Total Points: 448
Total Questions: 83
Total Answers: 118

Location: Albania
Member since Sun, Nov 22, 2020
4 Years ago
brynn questions
Wed, Sep 22, 21, 00:00, 3 Years ago
Wed, Dec 23, 20, 00:00, 4 Years ago
Wed, Aug 12, 20, 00:00, 4 Years ago
;