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.
Related
I have a desktop web app (skyviewcafe.com) that I’m trying to make more mobile-friendly. As one step in that process, I’ve taken a star chart and made it touch-draggable, and also made a view of the orbits of the planets both draggable and zoomable with touch gestures.
But here’s an interesting problem that I imagine must have happened to others before: It’s possible to use the default panning and zooming behavior of a mobile web browser to move my web page around until the only thing in view is a component that itself takes over touch gestures using preventDefault.
Once this happens, it’s impossible to zoom back out and bring the whole web page back into view. All pinch/spread zooming is sucked in by my component. For lack of a better term, I’m calling this a “zoom trap”. I’ve tried to search online for any discussion of this problem, but can’t find the right words to match anything.
I came up with an ad hoc solution that’s currently deployed at http://test.skyviewcafe.com. If I’m in a “zoom trap” I can touch the screen with three fingers and a translucent gray panel comes up to block touch gestures from reaching my touch-responsive canvas. Normal default web browser pan and zoom then becomes possible again, and the user can zoom back out. After that, touching with three fingers again clears the gray panel out of the way.
While this solves the problem in a way, it’s not a standard well-known gesture, and it would be hard to provide enough on-screen prompting to make necessary gesture clear.
Ideally I’d like to be able to respond to a standard gesture like a double-tap by zooming out the web page, but as far as I can tell, other than the initial zoom factor when a web page loads, web browser zooming isn’t something a web app can control dynamically.
Has anyone else run into this problem? Are there standard touch gestures for dealing with this? Are there ways in JavaScript that I haven’t discovered yet to dynamically control mobile web browser zooming?
I'm building a CMS based on Zurb Foundation, and one thing I'd really like to do is allow the user to switch between large/medium/small layouts via a button so that they can both preview how the page looks at this size, but also so they can set up columns etc. for different breakpoints.
Media queries are predicated on the window width, and I've been so far able to build something that my users find quite intuitive, and I feel that asking them to resize their browser window to change the mode seems a bit iffy.
An immediate way that I can think of would be to use an iframe for the main edit view, but the problem is that the page interactions I have are quite complex, drag & drop, drag to resize etc. - I have all of these working at present with both mouse and touch, and in order to drag & drop between the parent and an iframe I'd have to rewrite a significant amount of code. So I'd rather avoid this if at all possible.
I'm looking for suggestions/advice on how I could make this work - workarounds and hacks are fine.
This is how it looks at the moment, to give you an idea of the kind of interface I currently have - no live link that I can share atm, sorry:
OK - this is the solution I've come up with so far - the whole page, not just the editor area goes in an iframe.
https://gist.github.com/nrkn/00e1fb7cc4c7b43329a3
https://cdn.rawgit.com/nrkn/00e1fb7cc4c7b43329a3/raw/69a85b12dda7cece2b7ed602503c45d16f898d15/iframe-rawgit.html
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.
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.
I'm working on making an application with adobe air and I have a div that uses overflow-y. In order for the UI to look nice and sexy, what's the best way to replace the ugly default scrollbar [link broken] with a creation of my own?
Thanks
EDIT: Everyone remember that this is on adobe air, not on a browser (I know better than to to mess with a scrollbar, that's way web -4.2)
Don't.
Users know how to to use the default platform UI widgets: they know what they look like, how they behave, etc. And the platform ones work really well.
They won't know how to use your widget. And even if you try and copy the platform one except for appearance, your widget will behave as a cheap knockoff; it will be missing features the user expects:
Does your scroll thumb grow/shrink to show the length of the document, with a minimum size such that its always grab-able — but only on platforms where that is expected?
Does middle-click scroll to the position clicked, left-click scroll down only, and right-click scroll up only, and each in proportion to where clicked on the scrollbar — on the platform where this is expected?
Does clicking in the blank space between the thumb and up or down arrow work? Does it scroll by the amount the user is expecting, which varies by platform?
Does scrolling go at the speed the user expects when the scroll buttons are held down?
How is the user dragging the thumb handled when the mouse goes outside the scrollbar? Or middle-click, on the before-mentioned platform.
Does your custom scroll bar follow the visual theme the user selected e.g., because he needs extra-high-contrast and/or extra-large widgets due to disability?
The answer to most of those is probably "no". At least, that's been my experience with web sites where the designer decided the platform scroll bars aren't cute enough.
Skin them, like you would any other flex component. To keep your code nice any clean you can specify the embed the skin files through a style in a css file.
Edit: A link on how to skin a scrollbar