jQM - iScrollView Added fa spinner

by Varun Nath

HTML

<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.css">
<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview-pull.css">
<script src="http://example.gajotres.net/iscrollview/iscroll.js"></script>
<script src="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.js"></script>
<div data-role="page" id="index">
    <div data-theme="b" data-role="header">
        <h1>Index page</h1>
    </div>
    
    <div data-role="content">
        <div class="example-wrapper" data-iscroll>
         <div class="iscroll-pulldown">
                <!-- <span class="iscroll-pull-icon"></span> -->
                <span class="iscroll-pull-label"></span>
              </div>
            <ul data-role="listview">
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
            <!--     <li><a href="#">Some link</a></li>                
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
                <li><a href="#">Some link</a></li>
    ...

CSS

.ui-content {
    padding: 0 !important;
}

.ui-listview {
    margin: 0 !important;
}

.example-wrapper, .example-wrapper div.iscroll-scroller {
    width: 100% !important;
}

JavaScript

$(document).on('click','.scrollPos',function(){
    console.log('Scroller Position Y ='+$('.example-wrapper').iscrollview('y'));
    console.log('Scroller Height = '+$('.example-wrapper').iscrollview('scrollerH'));
    console.log('Wrapper Height = '+$('.example-wrapper').iscrollview('wrapperH'));
    /*console.log($('.example-wrapper').iscrollview('minScrollY',-20));*/
    });

$(document).on('pageinit','#index',function(){
    console.log('index');
    $('.iscroll-wrapper').on('iscroll_onpulldownpulled',function(){
        console.log('pull down');
        setTimeout(function(){$('.example-wrapper').iscrollview('refresh')},2000);
 
        
    });
    
        $('.iscroll-wrapper').on('iscroll_onpulluppulled',function(){
        console.log('pulled up');

      });

    $('.iscroll-wrapper').on('iscroll_onscrollstart',function(){    
       console.log('started scroll');
    }); 
});