I have mxgraph application with default panning behavior (no settings from code). Chart can be moved in desktop browsers using right mouse.
On mobile browsers there is no right mouse button, so I cannot find a way to move (pan) mxgraph and only small part of chart is visible.
What do I need to set for mxgraph to allow scrolling/panning to see other parts of chart?
I find a way to pan chart using setting for left mouse button. In this case on mobile screens it works fine.
graph.setPanning(true);
graph.panningHandler.useLeftButtonForPanning = true;
Related
I am using a network graph in my SAPUI5 application. In the Graph tag I set the 'enableWheelZoom'-property to true, which allows the user to zoom in/out using the mouse wheel.
Is there a way to adjust or customize the zoom-in velocity? Without further adjustments the zoom happens quite quickly, though I'm scrolling slowly. I would want the zoom to be smoother/slower.
Many thanks in advance! :)
I'm using the highcharts library, it's related plugins and using the perfect scrollbar for scrolling. The chart is extended with plugin for "zooming out" and "zooming in" (on mouse wheel event) and it is placed under the parent DIV element (on which the perfect scrollbar is implemented).
Note that this is how it should work:
when user mouse is hovering the chart and user is scrolling the mouse wheel, the chart is "zoomed out" / "zoomed in" (the events from the highchart plugin is applied);
if user is not hovering the chart with the mouse and if is scrolling the mouse wheel, then the parent DIV is scrolled down;
The mentioned scenario is already implemented in the following jsfiddle and this works on Chrome browser: https://jsfiddle.net/delux123/4kh5zbxv/68/
But the problem is that this is not working on Mozilla Firefox browser. There, the chart is not "zooming out" / "zooming in" for the cases when user mouse is above the chart;
I'm was not able to detect which one of these two libraries is causing the issue, but the mouse wheel event is somehow included in the issue. I tried many combinations here, but was not able to make it working as expected in the both browsers.
EDIT:
Here is the solution based on the #User863 answer below:
https://jsfiddle.net/delux123/4kh5zbxv/73/
The problem is delta calculated is always -1 in Firefox
Instead, you can use deltaY directly from the event
let delta = e.deltaY;
https://jsfiddle.net/aswinkumar863/085nvLad/
Without using perfectScrollbar
From version 64, firefox having scrollbar-width, scrollbar-color property. So you can style scrollbar also
https://jsfiddle.net/aswinkumar863/nf4y3qeh/
I've built an interactive web app where I'm using snap.svg to create a perspective grid and accompanying UI elements.
See this codepen of a stripped down version of the web app:
codepen URL
https://codepen.io/reubenlara/pen/dxoJWK?editors=0010
I'm using snap.svg for dragging the UI circle elements and d3 for zooming/panning the grid (couldn't find a stable snap.svg zoom/pan solution). Works perfectly on desktop, but on mobile (iPad), my snap.svg circle elements won't respond to touch events. They do drag around fine without the d3 zoom implementation, but as soon as d3 zoom is applied to the grid, they stop responding to touch. Any reason why?
I'm hoping to get the circle UI elements to drag around using touch events just like they do with the mouse on the desktop. Keep in mind that they do respond to touch when d3 zoom is removed from the equation. Thanks!
Problem: If a mobile browser zooms in on something, say a login input, then the input fades away to a html canvas, the user can't use their taps or drags to have any effect on the html canvas too zoom out or move around. This means if the screen is zoomed in, there's no way for the user to zoom out unless there is a different html object sitting over the canvas for the user to tap.
Desired solution: javascript code that allows the canvas to function like other divs when tapped on or dragged (for zooming in/out and navigating while zoomed)
Acceptable solution: A javascript function to have the browser zoom out to the documents original size. - OR - A way to use CSS to make sure the browser doesn't zoom in on the canvas.
Not acceptable: disable zooming in or out on the entire page.
Using chrome and iphone safari.
Update
if ( viewport ) {
viewport.content = "initial-scale=0.1";
viewport.content = "width="+screenW;
}
After selecting the viewport, this code manages to zoom out google chrome's rendition of an mobile phone, but this does not work on my iphone 7.
I'm developing a Win8 JavaScript app for a tablet and implementing my own touch animation trail - i.e. wherever the user drags their finger(s), my custom animation is left as a trail. However the default windows trail is also being displayed - is there any way to disable this? I've looked in the system-wide settings but there doesn't appear to be anything there, and I've also tried
var gestureRecognizer = new Windows.UI.Input.GestureRecognizer();
gestureRecognizer.showGestureFeedback = false;
But this didn't help either.
Found the answer - it's a two-parter. First the "Show visual feedback when touching the screen" checkbox needs unchecking in Pen & Touch settings in control panel. Second, I used cursor: none in my CSS on the canvas I didn't want the crosshair or tail to be displayed on.