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);

            }
        });
    

May 2, 2012

PhoneGap – iPad – Disable app container scrolling

Filed under: iOS,Mobile,Uncategorized — geekymaira @ 12:42 am
Tags: , , , , , ,

Hey,

A common issue that one might face while building html/js phonegap applications for the iPad is that
when the application launches on the device, one can actually scroll it up/down and left/right. The scrolling
reveals the fact that phonegap loads all of it up in a webview container, which is not the best thing to
reveal to the end user.

The good thing is , that there is a pretty easy and straightforward fix for it.

The first thing to do is to add a few meta tags to your page.
Note: The 3rd one might affect the scrolling and the size. Other one’s can be ignored.
Are more useful if you’re running the app in device browser. Still no harm throwing em
in there!

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name = "viewport" content = "user-scalable=no,width=device-width" />

Next in the tag add the following script block

<script type="text/javascript">
 document.ontouchmove = function(e){
	e.preventDefault();
 }
 </script>

That should do it 🙂

Cheers!
SyntaxScrewer

Create a free website or blog at WordPress.com.