PhoneGap / JQM event triggered at bottom (web view)

Question

I want to reload items if the user hits the bottom by scrolling in a PhoneGap / JQM.

Currently I am using this solution:

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()) {    
     .. some action ..
  }
});

But it seams not to be stable, are there any events triggered that can be used? That work on Android and iOs? On my Galaxy I see some kind of blue border poping up if coming to the bottom, but did not see any event name in ADB...

Any tipps?

Answer 1

I can help you with my older example. But you will need to fix it so it can work with jQM 1.2.

Here's an example: http://jsfiddle.net/Gajotres/v4NxB/. It is far from perfect demo but it can give you enough info to use it correctly.

It uses this jQuery plugin to detect bottom scroll touch: http://imakewebthings.com/jquery-waypoints/#get-started

I have built it with jQM 1.0

This will detect bottom end:

$('#example-offset-pixels').waypoint(function() {
    //notify('100 pixels from the top');
}, { offset: 100 });

EDIT :

This version works with every jQM version, including 1.3 : http://jsfiddle.net/Gajotres/Bn2Du/. It uses pure jQuery, no need for additional frameworks.