Using iScroll together with phonegap

Question

I would like to my app to be vertically scrollable and wanted to use iscroll to perform it.I am not really sure how to use. It seems that the app still can't vertically scroll. code:

      <head>
        <script type="text/javascript" src="iscroll.js"></script>
        <script type="text/javascript">
                var myScroll;
                function loaded() {
                    setTimeout(function () {
                               myScroll = new iScroll('container');
                               }, 100);
                }
                window.addEventListener('load', loaded, false);
        </script>
       </head>
       <body>
              <div class="container">
                <div class = "topcontainer">
                    <div class = "buttons img1"> </div>
                    <div class = "buttonstext">
                        Gallery
                    </div>
                </div>
                <div class = "middlecontainer">
                    <div class = "buttons img2">
                        <a href="gallery.html">Biography</a>      
                    </div>
                </div>
                <div class = "middlecontainer">
                    <div class = "buttons img3">
                        Pictures
                    </div>
              </div>
        </body>

Need some guidance where i am going wrong. Do i need to do something else?

score 1 · Accepted Answer · answered Jul 23 '12 at 18:28

iScroll takes an element's id as a parameter when being initialized-- not class. So, for example, change the div.container to div#container:

  <head>
    <script type="text/javascript" src="iscroll.js"></script>
    <script type="text/javascript">
            var myScroll;
            function loaded() {
                setTimeout(function () {
                           myScroll = new iScroll('container');
                           }, 100);
            }
            window.addEventListener('load', loaded, false);
    </script>
   </head>
   <body>
          <div id="container">
            <div class = "topcontainer">
                <div class = "buttons img1"> </div>
                <div class = "buttonstext">
                    Gallery
                </div>
            </div>
            <div class = "middlecontainer">
                <div class = "buttons img2">
                    <a href="gallery.html">Biography</a>      
                </div>
            </div>
            <div class = "middlecontainer">
                <div class = "buttons img3">
                    Pictures
                </div>
            </div>
          </div>
    </body>

For more info, see the documentation for iScroll 4, or iScroll 3. I can't find where it explicitly states an ID needs to be passed on the iScroll 4 documentation, but all example code supports this. Additionally, this is explicitly stated in the iScroll 3 documentation.

Also: you are missing a closing </div> in your example code. This has been fixed in my response.

Using iScroll together with phonegap

1 Answers1