3

I'm writing a web document reader with JQM. I don't want my users to continuously scroll right-left when reading, so my viewport is:

<META NAME='viewport' CONTENT='width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=1;' />

Though, I'm aware users preferences with font size may change, due to different visual skills... So, I thought it would be nice to shrink font size on multi-touch shrink action ("pinch-in"), and enlarge font size on multi-touch zoom action ("pinch-out")...

Is it possible? Do I need some external library, beside JQM?

Gajotres
  • 57,309
  • 16
  • 102
  • 130
MarcoS
  • 17,323
  • 24
  • 96
  • 174
  • it looks like you're looking for a way to detect gestures aren't you? if yes, then just have a look at this topic: [http://stackoverflow.com/questions/11183174/simplest-way-to-detect-a-pinch](http://stackoverflow.com/questions/11183174/simplest-way-to-detect-a-pinch) and for the rest, you just need to change em's actual size. check out there: [modify CSS with JavaScript](http://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript#Style_Sheet_Properties) Best regards, Sullivan – Sullivan Apr 09 '13 at 08:56

1 Answers1

7

It is possible on jQuery Mobile, but you will need to use a 3rd party implementation called hammer.js.

It supports a large number of gestures like:

  • hold
  • tap
  • doubletap
  • drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
  • swipe, swipeup, swipedown, swipeleft, swiperight
  • transform, transformstart, transformend
  • rotate
  • pinch, pinchin, pinchout
  • touch (gesture detection starts)
  • release (gesture detection ends)

Example:

$('#test_el').hammer().on("pinchin", ".nested_el", function(event) {
    console.log(this, event);
});

$('#test_el').hammer().on("pinchout", ".nested_el", function(event) {
    console.log(this, event);
});

It works with jQuery Mobile, and that is important. But you should think of some other idea, or at least another idea for Android 2.X devices because that platform doesn't support multitouch events.

There are also some other 3rd party implementations like Touchy. Unfortunately, Touchy only supports pinch.

elixenide
  • 44,308
  • 16
  • 74
  • 100
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Thanks... However in the meantime I did find "quojs" library (http://quojs.tapquo.com/), which works fine for me... – MarcoS Apr 09 '13 at 09:41