I am creating a cordova phonegap app using html (ofc.), in iOS 7 the back of the carrier, signal strength, battery and clock, is a part of the app itself. this means that if you have some content that is supposed to be at the top of the screen will be behind that topbar. i'm not a fan of moving everything down to fit, because in iOS6 and android (and properly everybody else), this top bar is not a part of the app.
is there a way to make the app window a bit smaller on iOS7 only, preferable a setting somewhere, or should i do some javascript to edit the css if the device is iOS7. and in this case, how do i do that?
Your phonegap app is running on a UIWebView, you can access its frame and resize it accordingly. If I understood you well, you can do that natively. Open up your phonegap project in Xcode, in MainViewController, in viewWillAppear:
// Apply this only for iOS7 running devices and later..
if ([[[UIDevice currentDevice]systemVersion]floatValue] >= 7) {
CGRect frame = self.webView.frame;
frame.origin.y = 20;// move the webview down to 20 px
frame.size.height = frame.size.height - 20;
self.webView.frame = frame;
}
There is a jQuery solution as well, but since this is only iOS7 related, the native way seems to be the most efficient.
Related
We are developing an app using Phonegap/Javascript.
Scrolling used to work fine, until we tried the new Android 5.
The page does not scroll down, unless you swipe many times. Then it is stuck in the other position..
Can't find anyone with this problem!
We are using just simple divs with content that is taller than the screen. Works fine on Android <5 or iOS.
Any ideas?
This is what finally solved the problem, along with simplifying properties, etc.:
Hammer.defaults.stop_browser_behavior.touchAction = 'pan-y';
It was an issue with the hammer.js plugin with touchAction property.
This affects some browsers - and apparently also Android 5 (but doesn't affect Android 4.* when using PhoneGap).
Not as simple as it seems, more details here:
https://github.com/hammerjs/hammer.js/wiki/How-to-fix-Chrome-35--and-IE10--scrolling-(touch-action)
I develop apps with Phonegap for Android.
In some of those apps I use javascript to make some dynamic calculations and place elements on screen.
The app uses Fullscreen preference in config.xml
So far that has been working well, but today I noticed that one app content went behind the black android system bar at bottom (the one with the back button, etc). And if I turn landscape, it also goes behind the bar.
Inspecting, I found that in landscape mode, for example, screen.width is returning 640 for my device, when before it used to return 620. So it looks like now it is including the system bar space?
How can I detect if the value includes the system bar space or not? And how can I know how much space the system bar takes?
The app behavior changed without recompiling it. So something external affected its behavior. Some days ago, the phone had an Android update. Maybe it is related to this.
The phone is using Android 5.0.2. After it upgraded to Android 5.0.2, it was working well. Then there was another, smaller update but it did not change the Android version number. The device is Moto G.
Thanks for any help on this. I really need to be able to get the screen width and height without the space used by that system bar, as it had always been until now.
Do you still have this issue ?
If you have screen problems with an additional bar at the bottom, you can detect it with
$("body").height() != window.screen.height/window.devicePixelRatio
From here I am trying to trigger something that will remove the additional bar. Reload / redraw / etc ...
I'm currently learning multi-platform web-app development through HTML5
and starting with Android (Eclipse kepler 1), using the webviews. It's very simple so far, I'm trying
to get the "myimage1" element to gradually move to 500 px below it's original position using setInterval().
On the PC browsers all is working fine, but on the .apk the "myimage1"-element will not move visually when I'm scrolling over the screen - it freezes instead.
The app does not pause but operates invisible so when I let go, the "myimage1" continues from where it should be at that time.
My question is not so much about the setInterval() method on its own: What forces are causing the web-app to freeze during scrolling in Android and can it be fixed without using native android-code? (I've read this also happens on iOS, so additional suggestions concerning iOS are welcome),
The js code:
<script>
var Tick=setInterval(function(){onTick()},20);
var dist=0;
function onTick()
{
dist+=1;
document.getElementById("myimage1").style.position="fixed";
document.getElementById("myimage1").style.top=dist + "px";
if (dist>500) stopTick();
}
function stopTick()
{
window.clearInterval(Tick)
}
</script>
Thanks in advance
I need to display a huge image (at least 2000x2000) on Android with Titanium and let the user scroll around, just like they were using a scroll view on iOS. However, I know Android doesn't support the same kind of scroll view, so I opted to use an ImageView.
I'm unable to display this image properly or at least the way I'd like (without it being blurry when you zoom in) because of memory issues. Has anyone found a way to make large scrollable images work in Titanium on Android without potential memory crashes?
I tried WebView also, but it seemed to resize my image and when you zoomed it was blurry as well. I was hoping Android webview supported SVG, but it looks like they don't on a majority of devices.
This is by far the best answer I've found:
http://www.tenxperts.com/2011/07/13/working-with-large-images-in-android/
I tried it and it works well with Titanium web views.
Very strange problem:
I've created a small HTML5 canvas game with box2dweb.js.
So far, all my work has been on desktop and today I've decided to move it to the iPhone (which usually consists of wrapping the app in a PhoneGap/Cordova application, change a few settings, and that's it.
The problem is, when I run the app on my desktop browsers (Chrome, Safari) as well as the iPhone and iPad simulators - everything works correctly - but when I actually deploy to my device (iPhone 4S) only some of the pictures show up. In fact, only the player sprite animation plays, and everything else (while still there physically) does not get drawn unless it doesn't have a specific animation (whether it's a sequence of images or just one image).
What seems even more strange, is that only the player entity is being drawn (with animation, too!) but all other entities that have animations are simply not drawn.
I've attached images to show the differences:
My question is - where do I even start debugging this? I tried running the index.html page without the cordova app on the iOS simulator so I could access the debug console, but there were no issues. How is this even possible? I was under the impression that if it worked as a web page, it should work as a PhoneGap app.
Alright, I've solved the problem. It was incredibly simple but hard to find. It's not even a PhoneGap problem:
The game has a level editor, and so it also has a saving/loading mechanism. While I specify all the images as './graphics/image.png', when a level gets deserialized it saves the loaded image's source, and not the original './graphics...' path. So the problem was that I was trying to load local files from my computer to my iPhone. I guess it was a path problem after all...