Wanted to add pinch zoom feature in a ionic mobile app. So tried using the pinch-zoom-canvas javascript in npm. So my task was to show the canvas in a modal on clicking a image which can then be pinch zoomed. The problem is that it only works for the first time after that the modal is not showing the image in canvas. When inspected through chrome, the canvas's clientWidth and clientHeight is automatically setting to 0 after the first time. Tried to fix this by setting width and height through inline css and style.css, but not working.
This is the link to the pinch-zoom-canvas js in npm: https://www.npmjs.com/package/pinch-zoom-canvas
The sample function code used in the project
Related
I'm developing a very small image manipulation webapp and it currently is working well.
There is one issue where if the image loaded into the canvas is very large (larger than the desktop screen resolution), it is desired to zoom out of the page such that manipulating the image in the canvas is more tractable.
That works fine for the image, but the issue is that the rest of the application is zoomed as well (such as the palette, toolbar, etc.)
Is it possible to have page zoom only affect the canvas element and none of the other elements?
Otherwise, is it possible to modify built-in browser page zoom to accomplish this sort of functionality?
I'm building a full screen slider. The last slide is supposed to have a horizontal scrolling area. I'm using css translations (for a smoother animation) to bring the div inside of the viewport.
For some reason, the scrollbar won't work unless you resize the window.
My guess is that when the scrollable div is created outside of the viewport, it is not rendered by Chrome (for performance reasons?).
Then I guess when you resize, the whole thing gets calculated and redrawn and then it is taken into account.
Here is a JSFiddle that illustrates my problem.
http://fiddle.jshell.net/f3thbjqc/6/show/
Here's a video that illustrates my problem (when I wiggle the mouse is when I try to scroll right, unsuccessfully. Then I resize, and it starts working).
My setup: Mac os High Sierra. Both Chrome 69.0.3497.100, and Safari 11.0.1 (13604.3.5) behave the same, firefox doesn't have the bug somehow
Had a similar problem with the materiallize framework when i was usings tabs and a slider inside. The problem was the slider was not working and after I resized the window it was working perfectly.
Try to fire this event manually when the slider is in view
window.dispatchEvent(new Event('resize'));
I have installed Fancybox3 with NPM and imported the CSS. It is all working fine apart from when I try to open a multi-page PDF, it will default the height of the fancybox-content frame as so:
<div class="fancybox-content" style="width: 1051px; height: 9999px;">
I assume that Fancybox is trying to set the content height based on the 6 pages of PDF and it maxes out at 9999. However, with 9999px set the fancybox content is just white and no PDF is displayed (just the toolbar and PDF zoom in/out buttons). If I adjust it back to something like 100% the PDF displays correctly again.
I have tried using the fancybox options to resolve this but it does not seem to make any difference, and adding any custom CSS can fix it for PDF's but then breaks functionality for images.
Has anyone run into this before?
Try disabling preloading of iframes by setting iframe: {preload: false}
I have an android app that uses webview to render large images in a div. The div has fixed width height to match the screen leaving some area on top for controls. The image has an image-map on it and areas created with links.
Now the issue is that when I drag the image from non-mapped areas, it works fine, but when I drag from mapped area, it does not work and I think stucks in the touch event (because I also see the orange focus border on the image map area that opens links).
This happens only when the page is run from within app+webview, but if I load the page in browser on same mobile, it works fine.
Also this does not happen in my Android 5.1 Vega IRON, but it happens in older phones like Android 4.4 Droid, and same version Huawei.
Is this some known issue?
This might have something to do with touch events in application, as it works in browser but not in application.
I found out that in some conditions, the image-map does not let the mouse button events go past, therefore it does not perform even the default dragging and click behavior.
I had to remove image-map and build my own absolute positioned and display:block <a> tags for each area, and then it worked.
Hope this helps someone.
We're developing an app using Trigger.io in conjunction with Jquery Mobile 1.1.1. We're aware of the modifications to the viewport meta tag in JM to enable or disable zoom, but in another Stack question about Trigger.io, one of their devs mentioned they disable zoom at the webview level: Preventing zoom with trigger.io forge
We would like to enable zoom when displaying a large image on the page - is this possible using the Trigger framework?
yes we do disable zooming in the WebView: if you include a large, unscaled image in your HTML, the user will be able to scroll around to see the full image, but pinches won't work.
Of course, you could have the image down-scaled to start with, then blow it up to full size when the user clicks on an icon? Libraries such as iScroll4 might help here too.
Also, we would be able to make the WebView's zooming behaviour somewhat configurable (although we would always default to making it non-zoomable). Get in touch with support#trigger.io if you absolutely need different behaviour.