Develop Reference

Phonegap scrolling issues on android 5

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)

how to add a permanent line on top of ios7 in phonegap

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.

PhoneGap: different behavior Simulator vs. Device

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...

How can I monitor scroll position while scrolling in Safari on iOS?

I currently use $(window).bind('scroll', foo); to monitor $(window).scrollTop() and do stuff to create a parallax effect.
In all desktop browsers foo() is called for each pixel the user scrolls, and everything is nice and dandy. In Safari on iOS, the scroll event is only fired AFTER the scrolling is finished.
I added $(window).bind('touchmove', foo); to make sure the function is called during the swipe in iOS, and it got me a little bit further. When user releases finger, the page continues to scroll, but the event stops firing.
Any ideas?

When I saw your question, I was planning to do a polyfill for this (if such does not exist?). Unfortunately I've had very little time.
The idea is to have a setInterval, which is initiated ontouchstart, and it checks whether document.body.scrollTop has changed since last time, eg. for every 20 milliseconds. And if it is, then we manually dispatch the scroll event. Otherwise we clearInterval since apparently there's no more scrolling happening.
This it would be in brief. If you got more time (than I do), then feel free to try with those guidelines.
Edit: Now, reading further, the same idea is seems to be suggested on the other answer. Are you certain that intervals are stopped whilst scrolling on iPad?

I highly recommend using the "Skrollr" javascript library. It is by far the best mobile scrolling animation option that I've found to date and is very easy to get up and running quickly. Create animations and manipulate CSS based on a start and end scroll position. Create as many data scroll positions and animations as you need for most standard CSS properties.
In the following example the background color would animate over the course of a 500 pixel scroll:
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
Checkout the repository on Git: https://github.com/Prinzhorn/skrollr
Skrollr Demo Example: http://prinzhorn.github.io/skrollr/
Awesome real world example: http://www.fontwalk.de/03/

Apple's webpage for iPhone 5c uses some parallax scrolling effects that seem to continue with your finger still touching the screen and scrolling. So I guess javascript can't be entirely disabled during scroll. Tumult Hype provides this functionality too.

While this isn't possible out of the box, so to speak, you can do it using iscroll
So, you'd use iScroll for iOS and Android mobile devices / tablets, and use the way you're currently doing it for desktop devices.
iScroll has a bunch of options for callback functions to be called on certain events - such as 'onScrollMove', 'onBeforeScrollEnd', 'onTouchEnd', etc. Unfortunately, there's not an option to execute a callback on "EVERY position change, including changes cause by the momentum of scrolling after the user has stoped touching the screen". But, it's easy enough to add one.
In the iScroll source, around line 127, near the "//Events" comment, add a new variable:
onPosChange: null
Then, around line 308, at the end of the "_pos" function, add this line:
if (this.options.onPosChange) this.options.onPosChange.call();
(that will just call the function passed in the "onPosChange" option, if it exists).
Having done that, the following example code will set up iScroll for the div with id="iscroll_container", and will print the Y-offset to the console each time it changes:
var myScroll;
function loaded() {
myScroll = new iScroll('iscroll_container', { onPosChange: actOnScroll });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
//Use this for high compatibility (iDevice + Android)
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
function actOnScroll(){
console.log('got a scroll move! Vert offset is: ' + myScroll.y);
}
Note, Ben the Bodyguard Parallax Site works on iPad by using iScroll (they use a much older version of iscroll and don't do it exactly the way I described here)
Also, Life of Pi Parallax Site works on iPad really nicely - I can't figure out how they do it, but at least it proves it's possible!

This could be a bug with jQuery itself: http://bugs.jquery.com/ticket/6446
That ticket has been open for a while and pertains to iOS 4, but perhaps you should investigate calculating the scroll position with pure javascript.

As I know there is no javascript execution while scrolling on the most mobile devices.
There are some workarounds (f.e. iscroll) out there.
Iscroll is using css-technique "transform".
But there is no way to execute javascript while scrolling.
I suppose the smoothe scrolling-algorithm is too expensive.

Fixed Position Toolbar iOS Web Application

I'm developing an HTML5 Web App and am in dire need of a javascript replacement for the css 'position:fixed' for < 5 iOS devices.
I stumbled upon an article from Google explaining their approach for their GMail mobile web app here: http://code.google.com/mobile/articles/webapp_fixed_ui.html
Like many similar javascript libraries, this supposedly, utilizes touch events and webkit transforms to move a div within a container giving the illusion of native scrolling and leaving room for fixed (actually absolute) toolbars.
I have attempted to implement this javascript class with little to no success...
Current, I am stuck with this error:
"TypeError: 'undefined' is not an object (evaluating 'this.element.style.webkitTransform = 'translate3d(0, ' + offsetY + 'px, 0)'')"
I through in a console.log to make sure that at this point, 'this.element' is in fact, an element and it is. I am passing the scroller div through correctly.
I have been testing on the iOS Simulator as well as the Mac OS X Safari and have also checked GMail's mobile site on both to make sure they work properly as well - they do (even though I can't guarantee this is indeed, the same methods they use).
Am I missing something obvious? Something subtle? Any clues would be appreciated.

jQuery Mobile doesn't support true fixed headers/footers; they disappear when you scroll and reappear when you are finished scrolling.

jQuery Mobile not only provides a set of beautiful and cross-browser widgets, but it also provides a mechanism for fixed positioned toolbars.

JQmobi does a great job: http://jqmobi.com/testdrive/

JUery Mobile goes a long way to "solving" this problem.
But forces your users/visitors to load 414kb of CSS+JS!
For many people on slow 3G/Edge Connections your page/app will take 10sec+ to load. :-(
Try this in your CSS:
body { -webkit-overflow-scrolling: auto; }
Read more at: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/