CODEWITHSUNDEEP
javascriptjqueryipadviewport
user782104
user782104

Reputation: 13545

Implement Jquery viewport on ipad

Recently I have implemented a ebook like function web app runs on ipad . One function is to make a viewport to drag the book. I used this viewport plugin (with demo) : http://borbit.github.com/jquery.viewport/

The problem is the content can not drag .This work perfectly on desktop but not ipad. There are two level of the ebook , the low level is a book page. when user click on the book, a overlay (top level) is display and it is an larger div for dragging. I suspect ipad can not swift the higher level div. Is there any way to implement the viewport (refer to the example in above link) in ipad? Thanks

<div id="view" style="height: 385px; width: 1422px; position: relative; overflow: hidden; display: block;">
<div class="viewportBinder" style="position: absolute; overflow: hidden; height: 2541px; top: -1078px; width: 1247px; left: 88px;">
<div class="viewportContent ui-draggable" style="position: absolute; height: 1463px; width: 1247px; top: 329.98150634765625px; left: 0px;">
<div id="popup" style="height: 1463px; width: 1247px; display: block;"><img id="largeText" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_text.png"><img id="largeImg" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_image.jpg">
</div>
</div>
</div>
</div>

Upvotes: 10

Views: 467

Answers (1)

Mario Bellart
Mario Bellart

Reputation: 504

I think this can be easily solved using jQuery UI Touch Punch, this plugin adds touch event support for jQuery UI.

http://touchpunch.furf.com/

Try adding the script before the viewport script but after UI script, for example:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>   
<script type="text/javascript" src="jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="jquery.viewport.js"></script>
<script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script>

and that's all!

Upvotes: 3

Related Questions