CODEWITHSUNDEEP
javascriptcssdommobiletouch
Coder
Coder

Reputation: 3103

How to implement selective pinch-zooming on mobile web UI?

I would like to modify a browser-based ebook-reader interface such that the user can touch-zoom (pinch-zoom) on the content (the page of the ebook, an SVG inside a div) but without causing UI elements to also zoom (a fixed bar across the bottom and a variety of slide-in elements).

Currently the UI elements are in a position:fixed div at the bottom of the page, which responsively resizes so that it is always a convenient scale. The "page" we want to selectively allow zooming for is in a full-height div occupying most of the page, containing SVG. The slide-in elements are also divs with position:absolute

So in essence we want to allow the user to pinch-zoom (using a multi-touch screen), only on the "page" div but without causing the other divs to zoom.

Any suggestions on how this can be done?

(We have implemented a slider zoom interface for desktop browsers which works fine, but is less intuitive as a mobile interface)

Upvotes: 2

Views: 2255

Answers (1)

okcoker
okcoker

Reputation: 1349

Since I don't think there's not really specific code one could give you, hammer.js is probably something you'll want to look into.

I'd imagine the code would look something like this by looking at their get started page:

 var element = document.getElementById('test_el');
 var hammertime = Hammer(element).on('pinchin', function(event) {
     alert('hello!');
 });

Upvotes: 1

Related Questions