Monday, December 26, 2011

phonegap iScroll issue: input types not working

Android Application development using Phonegap , Html5 and javascript is really nice.
To give Scroll effect to any html element  use iScroll.js .

iScroll.js is really great .But when we apply iScroll to any Html element like div or ul Then Input type element like Checkbox ,Textarea didn't work.

Finally this solution works for me on android using jQuery Mobile and phonegap.

example

Html sample code

   <div id="Allassignwrapper" style="overflowautoheight420px
                                     width738pxpositionrelative;">
                <ul id="Allassignmentlist">
                    <li>
                        <div id="detailsDiv">
                            <span>Classname</span><span>Sent on :26-12-2011</span>
                            <p class="description">
                                this is an assignment</p>
                            <span class="action">
                                <input type="checkbox" />
                            </span>
                        </div>
                    </li>
                </ul>
            </div>


Apply Scroll using iScroll.js 


onBeforeScrollStart event check for input type elements and prevents
 Defualt iScroll event


<script>

    var main = new iScroll('Allassignwrapper', {
         snap: 'ul',
         momentum: true,
         hScrollbar: false,
         vScrollbar: false,
         onBeforeScrollStart: function (e) {
             var target = e.target;
             while (target.nodeType != 1) target = target.parentNode;
             if (target.tagName != 'SELECT' && target.tagName != 'INPUT' 
                    && target.tagName != 'TEXTAREA')               
e.preventDefault();
         }
     });

</script>
here e.preventDefault() will allow checkbox to get focus and all its events.

When dynamic "li" element is added  to "ul" element.  then scroll will be applied automatically.