SyntaxScrewer's Blog

August 5, 2013

Infinite Scrolling – iPad Web App

Filed under: Uncategorized — geekymaira @ 12:11 pm

Hey Guys,

I came across a splendid library called Infinity.js that allows you to build infinite
scrollable lists in your web apps.

Basically, what the library does is dynamically add/remove items (called ListItems) from
the list (called ListView). The documentation explains what the library does very well but
I found a lack of simple examples.

So here’s a simple implementation using iScroll.js with a lot of comments!

But before the code, checkout these references:
Checkout the library here
The annotated source code is very helpful in understanding what is happening behind the scenes. Check it out.
A helpful concise explanation : http://nerds.airbnb.com/introducing-infinityjs-a-uitableview-for-the/

Without further ado, here’s my simple example.

     /*Style needed for iScroll*/
        #scrollerWrapper {
            position: absolute;
            z-index: 1;
            top: 45px;
            bottom: 48px;
            left: 0;
            width: 100%;
            background: #ccc;
            overflow: hidden;
        }

        /* Style needed for iScroll*/
        #scroller {
            position: absolute;
            z-index: 1;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            width: 100%;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -o-text-size-adjust: none;
            text-size-adjust: none;
        }

        /*Style for the list container*/
        #myList {
            width: 300px;
            height: 400px;
            border: 5px solid red;
            position: relative;
        }

        /* I don't like page margins 🙂 */
        body {
            margin: 0;
        }
<div id="myList">
    <div id="scrollerWrapper">
        <div id="scroller">
            <div id="infinityWrapper">
            </div>
        </div>
    </div>
</div>
        $(function () {
            var counter = 0;
            var TOTAL_RECORDS = 500; // Useful for a bound check.
            //How many pages should infinity build per screen? Don't know what a page is? Checkout the references above.
            infinity.config.PAGE_TO_SCREEN_RATIO = 3;
            //Get a reference to our wrapper.
            var $el = $('#infinityWrapper');
            //Build the infinity list view on the wrapper.
            var listView = new infinity.ListView($el);
            //Add a data property "listView" to the wrapper element (ie. #infinityWrapper)
            $($el).data('listView', listView);
            //A boolean flag.
            var updateScheduled = false;
            var myScroll;

            /* ================== ISCROLL STUFF =====================*/
            //Disable touchmove on document. Let iScroll catch the events.
            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            //Instantiate iscroll and pass the wrapper div to it.
            //iScroll works with a nested div setup. Check out its documentation.
            //It is not necessary to use iScroll. But I want my example to work on iOS!
            //In case myScroll returns null/undefined for you after this statement.
            //Checkout the iscroll example source: http://lab.cubiq.org/iscroll/examples/simple/
            myScroll = new IScroll('#scrollerWrapper');
            /*=========================================================*/

            //The BOMB!: This method creates n item rows.
            //For an infinite scrolling list, you would ideally keep calling bomb on each scrollEnd.
            //In this example, I just call it once to create 100 elements.
            bomb(100);
            //Must refresh the iScroll after adding elements.
            //NOTE: In case you plan to bomb on each scrollEnd, remember to refresh the iscroll too.
            myScroll.refresh();

            function bomb(num) {
                var index;
                if (num &lt;= 0) return;
                for (index = 0; index &lt; num; index++) {
                    //The row() method is a helper method which creates a new div and appends it to our listView.
                    row();
                }
            }


            function row() {
                //Just keeping a count. 
                counter++;
                //Create a new div element and add the word &quot;item&quot; as text in it.
                var newContent = $('<div></div>');
                newContent.html("item : " + counter);
                //Append the new div to the listView.
                //NOTE: This append is different from the jquery append method.
                listView.append(newContent);

            }
        });
    
Advertisements

2 Comments »

  1. This wouldn’t work – did you test it yourself, if so, could you provide a working example? Basically your not even using the infinity.js functionality, cause your list doesn’t exceed the initial creation length?

    Comment by lasse — November 27, 2013 @ 8:36 pm | Reply

    • Hey,
      You’re correct in saying that my list doesn’t exceed the creation length but I did add a comment on line #27 about how you’d use it.

      //The BOMB!: This method creates n item rows.
      //For an infinite scrolling list, you would ideally keep calling bomb on each scrollEnd.
      //In this example, I just call it once to create 100 elements.

      Hope this gives you a better idea.

      Cheers!

      Comment by geekymaira — December 9, 2013 @ 2:56 pm | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: