I have a requirement to implement a feature for showing some address detail(address view) when user tap a maker from google map(map view). I want to use css3 rotate for user experience.
I use below css so that it is working fine in iOS device but part of android devices are very slow.
{translateZ(0); perspective:1000px; backface-visibility:hidden;}
Another idea is that to set map view visibility to hidden when it rotates.
Do you have any better idea for much DOM rotate performance issue?
Related
this is bit of a tricky one for me to explain, so will try my best..
If you go to the below link, you will see I am loading up a 'geo Map' type view using javascript. (all code should be available via the sourecode, I was unable to share via JSFiddle)
Map Demo
What I'm trying to accomplish, is for this view to be full height on a mobile device, and able to pan left and right across the map.
Currently, viewing the map on a mobile device (ie, an iPhone), you see a portion of the map, which is fine, but you're unable to pan. It has like a rubber band effect. I noticed that you can pan once zooming, but otherwise im struggling.
What is the best way to get the view to appear in full height, and be able to pan across the width on a mobile device?
Not sure what I'm doing wrong here.
Thanks in advance for any advice and suggestions!
Lately i've seen a lot of iOS apps animating elements on 'drag'. The most universal example that I can think of which a lot of users would have access to would be Facebook on iOS (haven't tested Android).
On your news feed, do the usual drag down to refresh your feed. You'll see that if you drag your news feed down slowly, the loading gif is created as you drag, based on the position of the drag.
Does anybody know of any libraries that achieve such effects smoothly in JS?
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.
What is the best way to show a full-screen google map on both iPad and iPhone and even when the orientation changed as well.
Edit: I'm implementing mobile application in jQuery mobile. not iOS application.
Thanks.
Basically Google Mps API renders the map into an div(some cases in an iframe). Anyway you should specify an div to be your Map Canvas. if you change size of the div, then size of the map will change.
So if you define width and height of the canvas to 100%, it will always show the map covering whole screen.
#mapCanvas{
width:100%;
height:100%;
}
You need to create what is called as universal app if your intention is to develop a single app for ipad and iphone.
Check this link out on some tricks on creating such an app
http://developer.apple.com/library/ios/#documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/AdvancedAppTricks/AdvancedAppTricks.html#//apple_ref/doc/uid/TP40007072-CH7-SW6