infinite scroll with group marker (jquery/jquery mobile)

Question

I've seen in different apps an implementation of infinite scrolling with a marker. I think the apps have been written in objective-c but I'm wondering if there's a jquery equivalent (or a js library).

What I'm looking for is an infinite scroll with a group marker for some data. For example, showing all the events for a day. The group marker shows "today" and a list of events for the day. After scrolling, "Tomorrow"'s marker is shown and replaces "Today"'s and so on.

Example of an app doing just this here

Is there a jquery library doing that ? I couldn't find the correct terminology for the marker (today, tomorrow) so that's maybe why I couldn't find a discussion on stackoverflow. Is group marker a good way of describing it ?

Answer 1

If I understood you correctly it can be done. I don't know if this is exactly 100% similar but it is close.

jQuery Mobile has something called listview dividers and they can be implemented dynamically.

Let's say you have dynamically puled data from a server and listview has been populated but not refreshed. Your listview content would look like this:

<ul data-role="listview" id="MessagesList" data-autodividers="true">
    <li date="2013-03-03"><a href="#">Event 1</a></li>
    <li date="2013-03-02"><a href="#">Event 2</a></li>
    <li date="2013-03-01"><a href="#">Event 3</a></li>
</ul>

Now, before you refresh and enhance listview markup you will initialize generation of autodividers, like this:

$("#MessagesList").listview({
    autodividers: true,
    autodividersSelector: function (li) {
        var out = li.attr('date');
        return out;
    }
}).listview('refresh');

And you would get something like this: jsFiddle

Now, at this point we have solved your first problem. Now, about your second problem. You can implement listview infinite-scroll with a help of a jQuery plugin called Waypoints. It can be used to detect listview has reached bottom, it will then trigger an event which can be used to pull another set of dynamic data and enhancement process will start again.

Or you can take a look at my older example and see how it can be done manually (I prefer this solution over waypoints, it has a better detection): jsFiddle