I’m looking for a library that provides mobile panning and zooming gestures on content within a div. The div itself should have a fixed width and height, but its content can exceed its size which means it must support overflow scrolling. Overflow scrolling using a pan gesture should work for all zoom levels.
I only need to support browsers on modern touch devices, e.g. iOS 9+.
The webpage itself has its zoom/pan disabled via a meta tag attribute so zooming/panning will be done only within divs.
I looked at svg-pan-zoom, jquery.panzoom, and a few others like them, but I only found libraries that support images. I need a library that supports arbitrary HTML content.
This links to a library that can help: http://www.jqueryscript.net/zoom/jQuery-Plugin-For-Panning-Zooming-Any-Elements-panzoom.html
I assume you want the zooming to be done with buttons, though if you wanted to do something like zooming with the scrollwheel this might be able to handle that too. Also works with any element (including divs)
Related
I am building an admin panel for a client using the Metronic theme. Accessibility is not important to the client and responsiveness is not too important either since this application will only be used on desktops/laptops. Zooming into the application breaks the appearance of some components.
Would it be possible to replace zooming with magnification (the behaviour achieved by pinching and zooming on a laptop trackpad).
To help you visualise what I mean I used StackOverflow as an example;
StackOverflow without zooming/magnification;
StackOverflow when zooming in (Ctrl+Shift+Plus);
StackOverflow when magnifying (Pinch and zoom on a trackpad);
I want the third behaviour to happen when zooming regularly also. I have tried adjusting the meta viewport tag but according to this post and many others, viewport is only for mobile devices. There is also no zoom event in JavaScript to do try to see if e.preventDefault would make it work.
Even if I end up having to make everything responsive anyways it would be interesting to see if this is possible.
How can I add mouse scroll option in my angular app similar to what's present for touch screen devices in which you scroll via holding screen alongside some left or right swipe movement. How can I implement similar scroll technique using mouse so that user can click at some empty area than while holding down the click move mouse in a specific direction to scroll respectively.
Similar to what's available for trello.com:
I would prefer to implement this behavior using pure CSS as chrome's inspector tools also provides this feature while testing site's responsiveness for different screen sizes. So if its possible via CSS it would be great.
If it won't be possible via CSS then I would like to implement using JavaScript or TypeScript.
You could use this library: http://hammerjs.github.io/. It covers a large range of gestures you might be interested in.
When you use html5 drag&drop and drag element into a scrollable area, some browsers (and Chrome among those) scroll the area automatically for you, as long as you hold the mouse cursor near scrollable area's edges.
However, this auto-scroll is not configurable in any way - and as such, I have customer complaints about auto-scrolling through large area being very slow.
I implemented nice custom scrolling in pure JS, but problem is - I can't disable built-in drag&drop scrolling! And when I run my custom JS code together with built-in scrolling, it behaves quite unnaturally (custom scroll overlaps with built-in scroll).
Is there a way to disable this "feature" (in pure JS)?
My understanding is that CTRL-mousewheel zooms are an accessibility feature, built into the browser in question (I am currently testing in Chrome and Opera, both if which use the CTRL- zoom).
This won't ever really be needed for accessibility, however, as the app will not be for the general public. And CTRL-wheel zoom has a nice benefit out-of-box as compared with standard mousewheel zoom over elements: It seems that Angular ui-sortables work perfectly at any zoom/scale.
Unfortunately, from other answers I've found on SO, there is no way, when using CTRL-wheel, to zoom selectively : the browser can only zoom everything. For me, this includes position:fixed overlays scaling at the same time as the main viewport, which is no good.
So I set up some code for scrolling as per whichever element the mouse cursor is over, eg. scale the main viewport using the mousewheel, only if the mouse if over that viewport element.
The problem is that ui-sortable does not behave correctly, when using it for only a single element. I've used scale with transform-origin set at 50% 50% but still, when I drag the ui-sortables at any scale other than 1:1, they appear way off to the left. Any ideas on how to begin to tackle this?
This isn't a problem in Angular's sortable adaptation, rather it's an issue in the underlying jQuery-ui 1.9.2 positioning functions around line 4000 (_generatePosition or maybe one of the others). I believe that as the browser does not modify the actual dimension values during scale or zoom, and the formulae provided in that library do not account for scaling (that I can see), there is no easy fix, since jQuery ui.sortable needs scale-accurate values to calculate correct displacements. (I tried modifying the formula to account for this, but without success.)
The simplest workaround for the present is to manually change the width() / height() of your individual list elements, as seen here. This may require being selective about just what you scale using width() / height(), and what you change using scale (which is generally easier).
I've got a div that I want to position at the bottom of the mobile browser (Safari + Android) viewport. Currently my div is fixed at the bottom on all the top 5 browsers on Windows (IE, FF, Saf, Chrome, Opera), but that's "the browser window", not "the viewport".
On mobile devices (I've only tried on Samsung Galaxy Tab with Android 2.2 so far) the div appears at the bottom of the page, but if you pinch/punch to zoom in, the fixed div doesn't follow. It stays behind, outside of the viewport.
I'm specifically using the position:fixed and bottom:0 CSS properties to maintain the position, and as I said, it works fine on a non-touch browser.
Am I going to have to resort to keeping the div in the position I'd like it to be (at the bottom of the viewport) by hooking into the touchmove event and looking at (a) the zoom level, (b) the viewport position, and (c) the scroll position?
I'm using JavaScript to inject the div into the page rather than using inline CSS. The good thing is that I don't have to worry about quirks mode (as I'm only targeting Webkit browsers), so that's one positive thing.
I can't set doctype, use inline CSS or inline DIVs. Everything has to be added dynamically via JavaScript. Here's what I've done in my test so far:
var mydiv=document.createElement("div");
mydiv.style.position="fixed";
mydiv.style.bottom="0px";
mydiv.id="floater";
mydiv.style.width="400px";
mydiv.style.height="50px";
mydiv.style.backgroundColor="yellow";
if(document.body)document.body.appendChild(mydiv);
document.getElementById("floater").innerHTML="HELLO";
Your position:fixed won't work on mobile webkit browsers. Take a look at the mobile webkit fixed position problem on http://www.position-absolute.com/. They have a few ways of keeping something at the bottom.
Check out iScroll:
http://cubiq.org/iscroll-4
It seems to be one of the better options out there - definitely worth looking into.
I have used the previous version of iScroll but unfortunately there were a few things that didn't work to standard so we had to scrap the idea. However, the guys at Cubiq have just released v4 of iScroll which promises to fix a lot of the things that were issues in the previous version.
Best of luck!Dan