#javascript

Make a zooming + panning user interface work on mobile devices (in progress)

What's cool with Zooming User Interfaces is that you have always free space available anywhere (either by zooming or panning) to write new ideas.

That was the key idea in 2014 when creating BigPicture (ready-to-use infinite notepad in-the-cloud) and the open-source JavaScript library bigpicture.js powering it:

It works as expected on desktop browsers. Now, the next big challenge is: how to make it work on mobile devices?

It's funny to even have to ask this question, since touch devices are natively made to do panning (slide finger on screen) and zooming (pinch with 2 fingers). So it should be straightforward to adapt BigPicture to mobile devices.

However here are the difficulties:

1. The transform/scale from CSS has limitations (probably max 10x or 100x factor when I started this project a few years ago), so we can't only use this to do a (nearly) infinite zooming user interface

2. It requires to be able to zoom on a particular part of the viewport and not zoom the other parts of the HTML document (e.g. a top navigation header). Here are many potential solutions:

   • Prevent that a fixed element resizes when zooming on touchscreen: 5 answers, 3 of them are non-working, 1 suggests to use the jQuery TouchSwipe plugin (looks promising), 1 of them is "half-working": the supposedly "fixed" element doesn't stay fixed while pinch-zooming (it is zoomed/enlarged), but its position/zooming factor will be reset, after a few hundreds of milliseconds when the pinch-zooming is finished, thus the UI is not really good.

   • Disable zoom on a div, but allow zoom on the page (an alternate div): 4 answers, none of them gave a useful solution; accepted solution not working

   • How to prevent (bootstrap) fixed top navigation from zooming on mobile: 2 answers, none of them really working on modern touch devices. The main one is using the following code, but it's not really usable (during zoom-pinching on mobile devices, the supposedly fixed top navbar does resize, then when you stop pinching it restores the normal size. But the navbar doesn't stay sticky at the top of the viewport like it should):

     $(window).on('load scroll', function() {
         var ds = window.innerWidth / screen.width;
         $('.device-fixed-height').css('transform','scale(1,' + ds + ')').css('transform-origin', '0 0');
         $('.device-fixed-width').css('transform', 'scale(' + ds + ',1)').css('transform-origin', '0 0');
     });

   • Zoom specific element on webcontent (HTML,CSS,JavaScript): 1 answer about Hammer.js, 1 answer about Zoomooz

   • Pinch/zoom within a div but not whole page: closed, 1 answer (use Zoomooz library)

   • Pinch-to-zoom, but only in a specific div (not full page): closed, duplicate

3. Possible useful tools for this:

   • Zoomooz (however, I read in comments: Zoomooz does not support multi-touch pinching events. Its only a library for zooming into elements on a page, but has no support for pinching behavior, so far as I can see in the documentation.)

   • Hammer.js

   • ZUI53

   • TouchSwipe, a jQuery plugin for touch devices

Work in progress!

By the way, here is how to simulate touch events on Chrome for desktop computer: open the Developer console (F12), then there's a top-left button "Toggle device toolbar" (CTRL+SHIFT+M), here you go! For pinch-zoom events, use SHIFT + click + mouse up.

Your tests / pull requests / help to build a mobile version are welcome on this branch!

If you really like that open-source project, you can donate here: 1NkhiexP8NgKadN7yPrKg26Y4DN4hTsXbz.