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
Apply Scroll using iScroll.js
<script>
</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.
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="overflow: auto; height: 420px;
width: 738px; position: relative;">
<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.