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.
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.
I am working on an app that will have web content, living in a web view, and some other content and views built using react-native. I have a meta tag viewport with config user scalable is yes.
But my problem is I want when I zoom my web view, some span have content HTML not zoom out with another content and that text keeps current size. I found an example in the mail app detail view in Gmail.
Thanks!
In zone 1, this text does not change the font when zoom,
In zone 2, content zoom out
I know exactly what you are asking for.
If you use GMail on a mobile device, zooming in will cause the email to zoom in, but not the header of the email. However, if you zoom in on the header itself, it will zoom in at that point.
What you are looking for is how to handle multi-touch interactions.
GMail does this by preventing the default behavior of the zoom in when zooming on a target element. In this case, the email body.
When zooming in on the header, it is no longer preventing the default behavior.
It's not a trivial thing to implement. You'll need to take some time to read up on multi-touch interactions. You can find great info over at MDN.
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Multi-touch_interaction
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.
I've a problem in my application. Native browser zoom in mobile devices don't fit my needs...
I've 3 main parts in my mobile web page.
Header
Main content area (there will be scroll inside this if content will increase)
Footer
If i use native zoom of mobile browsers then my whole page gets zoomed..
but i don't wants zoom effect in header and footer..
What i wants is to implement native browser zoom effect only in content area..
So please give me some guideline how it is possible to achieve this without any errors or cross browser issues?
I'm trying to sell my boss on using three.js to create a CSS3D interface integrated with video providers (like YouTube). One of the requirements is showing it on a mobile device - I've chosen an iPad since the Android tablet is quirky.
Since my demo is scheduled for this Thursday I thought the quickest thing to do was to show him the wonderful css3d_youtube demo.
The problem is it is not configured to use gestures (touch pinch zoom) and I'm having a hard time doing this.
I also needed to add a few things like a background image and the ability to have the YouTube player go full screen so I had to take the original code and modify it. I saw the periodic table is so I decided to use the TrackBall controller in my code. You can see my modified code here
The trackball controller seems to shift the camera's y position. You can see the actual page I created here if you view in a tablet. I used the Modernizr library to recognize if the device is touch screen so you wont see it just by using a desktop browser.
If it would be more helpful I can remove that condition so it can be seen in a desktop browser.
If I remove the code that is messing up the camera position (you can see where I do this my searching for Modernizr.touch in the code) the camera is no longer centered to the video poster image when clicking on the button.
I also tried just regular JavaScript gesture events by adding this function:
function onPinch(e) {
move(e.scale)
}
and calling it in an event handler:
`document.body.addEventListener('gestureend', onPinch, false)`
but that was a disaster. The CSS3D objects rendered very slowly.
Can someone help me add pinch zoom functionality to the css3d youtube demo? Or at least offer some advice on how to proceed? I wasn't able to find anything to help via Google -ing
Looks like TrackballControls.js has been updated to support touch zoom gestures.
If any one else is having this problem, just get the latest version.
The CSS3D periodic table and youtube examples seem to have been updated too.