Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Zoomable/Scrollable HTML "window" in mobile browsers

I am trying to create a <div> window with inner elements to be able to scroll/zoom on mobile with its contents like here:

http://jsfiddle.net/hk1jfp4z/

I would like to be able to do following:

  1. On page load: Scale #scrollable_zoomable_background to fit the #window.
  2. To be able to zoom with two finger gestures, scroll with touchstart, touchend
  3. The rest of the page must not zoom, nor scroll horizontally (with <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>)
  4. The #window must not be an iframe, it needs to be part of the document structure.
like image 962
Vojtěch Avatar asked Aug 17 '15 12:08

Vojtěch


2 Answers

Firstly, you should to setup your viewport to disable zoom the page to user. Then you need to use touch-event library like hammer.js.

This is standart viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Take a look for a documentation of hammer - you can see an example of pinch recognizer - that exactly what you need!

like image 115
AleshaOleg Avatar answered Oct 22 '22 02:10

AleshaOleg


Following up on the answer from AleshaOleg, here is a function how you can use HammerJS to implement pinch to zoom -> see pen at http://codepen.io/sheinzle/pen/mebBEd

Obviously there is still a lot to improve - event.originalEvent.gesture.scale resets to 1 the next time you redo the gestures. So you would need to keep track of the current scale.

function attachPinch(imgID)
{
    var image = $(imgID);
    $(imgID).hammer().on("pinch", function(event) {
        var el = $(this);
        scale = event.originalEvent.gesture.scale;
        el.css('-webkit-transform', "scale3d("+scale+", "+scale+", 1)");   
   });
}

attachPinch('.pinch-object')
.pinch-object {
  width: 5000px;
  height: 5000px;
  
  background-color:#269;
  background-image: linear-gradient(white 2px, transparent 2px),
  linear-gradient(90deg, white 2px, transparent 2px),
  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
  
}
 <script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/hammerjs/jquery.hammer.js/master/jquery.hammer.js"></script>

<div class="pinch-object"></div>
like image 23
Simon Heinzle Avatar answered Oct 22 '22 03:10

Simon Heinzle