3

How do you know that you are at the bottom of a list in jQuery Mobile, I need to lazy load in more results when the end of the list is reached?

Manatok
  • 5,506
  • 3
  • 23
  • 32
  • What do you mean by "When the end of the list is reached"? Do you mean when the user scrolls to the bottom of the current list? – shanabus Mar 20 '12 at 12:51

3 Answers3

8

There is a working example of using scrollstart and scrollstop events here, that should get you going in the right direction: http://jsfiddle.net/shanabus/LJTJt/

Documentation page here: http://jquerymobile.com/test/docs/api/events.html

Hope this helps!

UPDATE

With help from this post, I was able to wire up a better example that does detection against the bottom of the page. If your list view is not in the bottom of the page, this will not work as well. Check the console for some position debug information.

http://jsfiddle.net/shanabus/LJTJt/1/

Here it only adds a new item when you reach the bottom of the list.

Community
  • 1
  • 1
shanabus
  • 12,989
  • 6
  • 52
  • 78
  • Great thanks for this, im just not sure how I would know if I'm at the end - Maybe there is a way of binding to an event when the last record is in the viewport? – Manatok Mar 20 '12 at 13:14
  • Hold on, I have a better example coming that uses the height of elements to do some detection... – shanabus Mar 20 '12 at 13:19
3

Simple code to load more items on reaching page bottom.

 if ($(window).scrollTop() > $('#page1').height() - 500) {
        eventsElement.append('<li><a href="">Stop</a></li>');
        eventsElement.listview('refresh');
 }

For full example,

see Code here.

Using jquery-mobile-iscrollview will be better. It provides pull down and pull up events

Git hub link

Robin C Samuel
  • 1,215
  • 15
  • 33
  • This didn't work good for me (if you have a big screen). My solution was: if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) loadMore(); – bruno.braga Oct 21 '13 at 06:25
  • 1
    Sure, you can always customize the window height by adjusting values :) – Robin C Samuel Oct 21 '13 at 10:53
0

there is a jq mobile plugin names lazyloader that would help .

link :http://dcarrith.github.com/jquery.mobile.lazyloader

Samih A
  • 403
  • 1
  • 10
  • 15