how to use iscroll javascript in phone gap?

Question

I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixed that does not work in android 2 and 3 versions using cordova 2.1.0

I have copied the javascript of iscroll-lite from here

html code

<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
    <div id="header" class="header">
    <div id="header_title" class="header_title"> </div>
    <div id="abc" class="abc"><img src="img/abc.png""/>                     </div>
</div>
<div id="images" class="images"><img  name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description"  class="description">
<div id="title" class="title">
    <h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>  

<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>

The content of desc tag is going to overflow

CSS

.wrapper
{
    position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
     width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
    width:100%;  margin:0 auto; font-family:Arial, Helvetica, sans-serif; 
}
.header
{
    float:left; height:100%;  min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
     float:left; padding:0%; margin:0%;  height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%; 
}

.images
{
    position:relative; width:100%;
}
.description
{
     float:left; width:100%; overflow:auto;  height:100%; 

}
.title
{
    width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF; 
}
.desc
{
      width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px; 
}
.desc p
{
      margin-top:0; 
}
.footer
{
     width:100%;  position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
    text-indent:1%; float:left; text-align:center;  width:75%;  margin-top:2%;
}
.info
{
    width:25%; float:right; padding-top:1%;
}

USING iscroll

<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script> 


var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll() 
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady() 
{   
    scroll();
    ----
    ----

On scrolling,I just get the following

W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.

PROBLEM:

It is is not scrolling.If at all it does after great effort on it but,it scrolls only once.I go back to the main page and return it does not scroll at all.

Please,Guide me!!

EDIT: this I have tried in various combinations..replacing all the divs as li tag...the css wasn't effective. then used li tag within each div. No use... IT did not scroll.:

<div id="wrapper">
<div id="scroller">
<ul>
  <div id="header " class="header ">
     <div id="header_title" class="header_title"> </div>
    <div id="xyz" class="xyz"><img src="img/xyz.png" onClick="xyz()"/></div>    </div>  </ul>

<ul>
      <div id="images" class="images"><img  name="slide" src="img/banner1.png" width=100%; />
   </div>
</ul>

<ul>
  <div id="param" class="param">
    <div id="abc" class="abc noSelect"> </div>
        <div id="def" class="def noSelect" > </div>
        <div id="ghi" class="ghi noSelect" > </div>
        <div id="ijk" class="ijk noSelect" > </div>
    </div>
</ul>

<ul>
  <div id="description"  class="description">
       <div id="title"  class="title">
    <h1><strong><li></li></strong></h1>
       </div>

    <div id="desc" class="desc">
    <p><li></li> </p>
    </div>
</div>

</ul>

Rote

Common someone help us!!! please...please – Carrick

Answer 1

You don't seem to be following the structure that iScroll asks for. The iScroll page specifically mentions (note the bold text):

The optimal iScroll structure is:

<div id="wrapper">
  <ul>
      <li></li>
      ...
      ...
  </ul>
</div>

In this example the UL element will be scrolled. The iScroll must be applied to the wrapper of the scrolling area.

Important: only the first child of the wrapper element will be scrolled. If you need more elements inside the scroller you may use the following structure:

<div id="wrapper">
  <div id="scroller">
      <ul>
          <li></li>
          ...
          ...
      </ul>

      <ul>
          <li></li>
          ...
          ...
      </ul>
  </div>
</div>

In this example the scroller element will be scrolled (together with the two ULs).

You have:

<div id="wrapper" class="wrapper">
  <div id="wrapper-container" class="wrapper-container">
  ... head ...
  </div>

  ... (your main div here) ...
</div>

So your main div won't be scrolled by iScroller, you're only making the header div scrollable. Have a look at the iScroll demo and test it out first... does it work OK for your device? If yes, try to follow its structure.

Bobby

Ohh...So Sir,should I put my header, header_title, ... etc tags in the <ul><li></li></ul> format? – Rote

Yes, that's what the iScroll author suggests as an HTML structure so that iScroll can be used. Please refer to the iScroll page and the examples there for more info – Bobby

Sir the demo is working on the device need to check it out with my codet.No Sir, I tried giving li to each and every div...i got this error in dreamweaver The tag:"div" is not allowed within: "html" It is only allowed within: applet, blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins, li, map, noframes, noscript, object, td, th. – Rote

please Sir, help me out.. your suggestion did not work out...please find the last edit version of the question.. – Rote

Does the iScroll 4 demo work? Check here lab.cubiq.org/iscroll/examples/simple – Bobby

Filippos Karapetis,Sir, Can I get your help here...please no one is replying and helping me out...please sir...help me out – Rote

Sir, It is not scrolling.i have added a dummy data of <li>row 0</li> 30 times...only then its scrolling...My data is retrieved from the database and then displayed.the length of the data various as per the element...I want the scroll only till the length of the text....what should I do? – Rote

If you're loading the data from a database and dynamically inserting it into the scrolled element, you need to refresh the iScroll object after you've inserted the new content i.e. myScroll.refresh(); – Festinate

@FilipposKarapetis, thank you Sir..foe helping me figure it out that the CSS position:fixed is not being supported by the lower versions of android and for helping to go about the iscroll. – Rote

@Dpa99c, thank you sir for helping me out with both onclick functionality and the length of the scroll view using myScroll.refresh(); it worked..thank you. – Rote

Answer 2

In script code which you have posted, I have found a mistake. I do not know whether this mistake available in your actual file also or not. But thought to share that one first.

This is your script code.

myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});

Mistake I have found

• .wrapper is the CSS rule name. You better to pass ID here. Will assume your ID is iScrollWrapper then enable the scroller in following format.

myScroll = new IScroll('iScrollWrapper', { scrollX:false , scrollY:true});

Now will see the best DOM structure (HTML format) for iScroll which will not trouble you and still W3C valid

Option 1

<div id="iScrollWrapper" class="****** IMPORTANT_POINT_1 ******">
   <ul>
      <li>
          <YOUR_REMAINING_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
   </ul>
</div>

Option 2

<div id="iScrollWrapper" class="****** IMPORTANT_POINT_1 ******">
   <ul>
      <li>
          <YOUR_ONE_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
      <li>
          <YOUR_ANOTHER_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
      <li>
          <YOUR_ANOTHER_DOM_STRUCTURE_IN_THE_WAY_YOU_NEED>
      </li>
   </ul>
</div>

Very first think you have to do is

****** IMPORTANT_POINT_1 ******

The element to which you attach iScroll should have non-static, non-fixed position type (Can use 'relative' or 'absolute'). That element should have height in pixel (If you have min-height or max-height but no **height** iScroll will say sorry. It will not work)

Now will see how you can attach iScroll.

Good way of attaching iScroll is as follows (This what I have learnt when I apply iScroll for elements)

If you are using Single Page Application (SPA) then

if('undefined' != typeof iScrollerObject){
  iScrollerObject.destroy(); 
}
iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

If you make iScrollerObject as your member variable in SPA application then use

var _this = this;
if(null != _this.iScrollerObject){
  _this.iScrollerObject.destroy(); 
}
_this.iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

For normal browser pages.

var iScrollerObject = new iScroll('iScrollWrapper',{/* OPTIONS_GOES_HERE */});

If you dynamically update the content then use checkDOMChanges : true in your options. If still it failed to update the scroller for dynamic DOM change then after you completing that dynamic DOM change call iScrollerObject.refresh();

I have shared what I learnt about iScroll in my experience. If you need any please let me know. Please remember you are using iScroll lite version which actually has less features than standard iScroll4. If you want to use iScroll version then go with iScroll4.

Wickman