onScrollEnd event not firing when using iscrollview

Question

onScrollEnd event not firing when using iscrollview

2.3k Views Asked by Drew At 20 October 2024 at 13:05

I am using jquery mobile and iscroll/iscrollview on a page that contains a listview so that the listview contents are scrolled. The listview is scrolling just fine. The problem is that the listview items are accidentally getting clicked when the list is scrolled.

If you have any solutions let me know.

I have been, unsuccessfully, trying to bind to the onScrollEnd event so that I can set a variable (scroll_stop_time) to the time that the scrolling stopped.

I also have a pagebeforechange event that is checking the time value of the scroll_stop_time variable and if the time is too recent (less than 200ms ago) then I stop the click.

However, I can't get the onscrollend event to fire so the scroll_stop_time is never updated and all clicks are getting through.

My Code:

<html>
<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">


    <link rel="stylesheet" href="mobile/resources/js/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="mobile/resources/css/jqm-icon-pack-2.0-original.css" />
    <link rel="stylesheet" href="mobile/resources/js/jquery.mobile.simpledialog.min.css" />
    <link rel="stylesheet" href="mobile/resources/css/jquery.mobile.iscrollview.css" />
    <link rel="stylesheet" href="mobile/resources/css/fileuploader.css" type="text/css" media="all" />



    <script src="mobile/resources/js/json2.js"></script>
    <script src="mobile/resources/js/jquery-1.9.1.min.js"></script>
    <script src="mobile/resources/js/jquery.postjson.js"></script>

    <script>
      var scroll_stop_time = (new Date).getTime(); // initialize the variable

      $(document).on("iscroll_init", function() {
        console.log('iscroll INIT');
        $.mobile.iscrollview.prototype.options.onScrollEnd = function(){
            console.log('--iscroll onScrollEnd');
            scroll_stop_time=(new Date).getTime(); // update the variable with the current time         
        };
      });
    </script>


    <script src="mobile/resources/js/iscroll4.2.js"></script>
    <script src="mobile/resources/js/jstorage.js"></script>
    <script src="mobile/resources/js/jquery.validate-1.7.min.js"></script>
    <script type="text/javascript" src="mobile/resources/js/fileuploader.js"></script>




    <script type="text/javascript">
        console.log('head javascript - before JQM is loaded');


        // ==============================================
        // ALL PAGES - EVERY TIME THEY ARE DISPLAYED
        // ==============================================
            // -- all pages - pagebeforechange event --
            $(document).on( "pagebeforechange", function( event, data ){
                if ( typeof data.toPage === "string" ) {
                    console.log('all pages - pagebeforechange event - (every time ANY page is about to be displayed)');
                    console.log(data);
                    // intercept a page change request
                    // can alter any aspect of this request, if needed

                    if(data.toPage.indexOf("manage-inventory") != -1){
                        // make sure we haven't just recently stopped an iScroll scroller (not really a clicked link)
                        elapsed_time = ((new Date).getTime()) - scroll_stop_time;
                        console.log('scroller has been stopped for '+ elapsed_time);
                        if(elapsed_time  < 200){
                            // user just stopped the scroller and really didnt mean to click on the listview item link
                            console.log('not really a click'); 
                            event.preventDefault();
                            return false;
                        }

                    }
                }
            });
    </script>


    <script src="mobile/resources/js/jquery.mobile-1.3.1.min.js"></script>
    <script src="mobile/resources/js/jquery.mobile.iscrollview.js"></script>
    <script src="mobile/resources/js/jquery.mobile.simpledialog2.min.js"></script>



</head>
<body>

<div data-role="page" id="page_manage-inventory-items_by_type" data-theme="b" data-content-theme="b">

<div data-role="header">
            <a href="#panel_nav_manage-inventory-items_by_type" data-icon="direction" data-iconpos="notext" data-inline="true" data-role="button"></a>
                <a href="#panel_settings_manage-inventory-items_by_type" data-icon="menu" data-iconpos="notext" data-inline="true" data-role="button" class="ui-btn-right"></a>
            <h1>Items by Type</h1>
</div>


<div data-role="content">


<style type="text/css" media="all">

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

</style>



<div data-role="fieldcontain" style="margin-bottom:40px;">
    <label for="iibt_search">Item Search:</label>
    <input type="search" class="item_search" name="iibt_search" id="iibt_search" value="" />
</div>




    <h2>Items by Type:</h2>

<style type="text/css">


</style>


<div class="listview-wrapper" data-iscroll>

<ul id="iibt_listview" data-role="listview" data-inset="true" data-filter="true">
            <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=1&specific_name=Blu-Ray Players&specific_class=t">Blu-Ray Players<span class="ui-li-count">187</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=2&specific_name=CD-ROM Players&specific_class=t">CD-ROM Players<span class="ui-li-count">416</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=3&specific_name=Computers&specific_class=t">Computers<span class="ui-li-count">104</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=4&specific_name=Data Panels&specific_class=t">Data Panels<span class="ui-li-count">253</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=5&specific_name=Data Projectors&specific_class=t">Data Projectors<span class="ui-li-count">160</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=6&specific_name=Digital Cameras&specific_class=t">Digital Cameras<span class="ui-li-count">424</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=7&specific_name=DVD Players&specific_class=t">DVD Players<span class="ui-li-count">347</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=8&specific_name=Easels&specific_class=t">Easels<span class="ui-li-count">372</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=9&specific_name=Flipcharts&specific_class=t">Flipcharts<span class="ui-li-count">441</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=10&specific_name=Laptops&specific_class=t">Laptops<span class="ui-li-count">125</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=11&specific_name=MAC Monitor Cables&specific_class=t">MAC Monitor Cables<span class="ui-li-count">166</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=18&specific_name=Monitors&specific_class=t">Monitors<span class="ui-li-count">315</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=12&specific_name=Overheads&specific_class=t">Overheads<span class="ui-li-count">255</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=13&specific_name=Podiums&specific_class=t">Podiums<span class="ui-li-count">500</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=14&specific_name=Power Supplies&specific_class=t">Power Supplies<span class="ui-li-count">174</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=15&specific_name=Screens&specific_class=t">Screens<span class="ui-li-count">398</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=16&specific_name=Stereos&specific_class=t">Stereos<span class="ui-li-count">469</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=17&specific_name=TVs&specific_class=t">TVs<span class="ui-li-count">101</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=19&specific_name=VGV/MCGA Cables&specific_class=t">VGV/MCGA Cables<span class="ui-li-count">111</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=20&specific_name=Video Cameras&specific_class=t">Video Cameras<span class="ui-li-count">470</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=21&specific_name=Video Projectors&specific_class=t">Video Projectors<span class="ui-li-count">495</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=22&specific_name=Visualizers&specific_class=t">Visualizers<span class="ui-li-count">470</span></a>
            </li>
            </ul>

</div>


</div>


        <div id="fixed_footer" data-theme="a" data-role="footer" data-position="fixed" style="text-align: center;">
        <div style="display:inline-block; margin-top:10px; margin-bottom:10px;">manage-inventory-items_by_type</div>
        </div>

</div>



</body>
</html>

I get the following output in the browser console:

    head javascript - before JQM is loaded  
    mobileinit  
    iscroll INIT    
    {Note:  I scroll around now until I accidentally click a listview link}
    {this is where the onScrollEnd console log info would show up if I were capturing it}
    all pages - pageshow event - (every time ANY page is displayed)
    scroller has been stopped for 28995
    {ajax post info,  other page is loaded, etc..}

Original Q&A

There are 2 best solutions below

**Charles** · Answer 1

there is a good demmo for you. take care about link . http://davidwalsh.name/iphone-scrollbars

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>example up and load</title>
    <link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css"/>
    <link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
        $("#list").bind('pageinit', function () {   
            $.ajax({
                 type: "get",
                 async: false,
                 url: "http://www.57lehuo.com/index.php?a=index&m=api&method=itemsSearchGet&keyword=连衣裙&sign=5cb85c3eed22c1908e05c584813c8dd2",
                 dataType: "jsonp",
                 jsonp: "callback",
                 jsonpCallback:"itemsSearchGet",
                 success: function(json){   
                     var content='';
                      $.each( json['result'], function(i, n){                       
                        var url=n.url!='undefined'?n.url:'';
                        var bimg=n.bimg!='undefined'?n.bimg:'';
                        var title=n.title!='undefined'?n.title:'';
                        content = content + "<li>";
                        content = content + "<a target=\"_blank\" href=\"http://s.click.taobao.com/t?e=zGU34CA7K%2BPkqB05%2Bm7rfGGjlY60oHcc7bkKOQiRddrNEyGLx31dnc6%2Fz%2BaQS2UNDUWpebTcEEjBuk1W5odmLS8%3D&pid=mm_30949159_0_0\">";
                        content = content + "<img src=\""+bimg+"_100x100.jpg\" />";
                        content = content + "<h2>";
                        content = content + "clothes";
                        content = content + "</h2>";
                        content = content + "<p>";
                        content = content + title;
                        content = content + "</p>";             
                        content = content + "</a>";
                        content = content + "</li>";
                    });             
                    $("#thelist").append(content).listview('refresh');      

                 },
                 error: function(){
                     //alert('fail');
                 }
             });        

        });
        $("#list").bind("pagebeforeshow", function(){       
            setTimeout(loaded, 10); 
        });

    })

    </script>
    <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/iscroll.js"></script>


    <script type="text/javascript">

    var myScroll,
        pullDownEl, pullDownOffset,
        pullUpEl, pullUpOffset,
        generatedCount = 0;

    /**
     * down update 
     * myScroll.refresh();      
     */
    var p=2;
    function pullDownAction () {

            $.ajax({
                 type: "get",
                 async: false,
                 url: "http://www.57lehuo.com/index.php?a=index&m=api&method=itemsSearchGet&keyword=连衣裙&p="+p+"",
                 dataType: "jsonp",
                 jsonp: "callback",
                 jsonpCallback:"itemsSearchGet",
                 success: function(json){   
                     var content='';
                      $.each( json['result'], function(i, n){                       
                        var url=n.url!='undefined'?n.url:'';
                        var bimg=n.bimg!='undefined'?n.bimg:'';
                        var title=n.title!='undefined'?n.title:'';
                        content = content + "<li>";
                        content = content + "<a target=\"_blank\" href=\"http://s.click.taobao.com/t?e=zGU34CA7K%2BPkqB05%2Bm7rfGGjlY60oHcc7bkKOQiRddrNEyGLx31dnc6%2Fz%2BaQS2UNDUWpebTcEEjBuk1W5odmLS8%3D&pid=mm_30949159_0_0\">";
                        content = content + "<img src=\""+bimg+"_100x100.jpg\" />";
                        content = content + "<h2>";
                        content = content + "clothes";
                        content = content + "</h2>";
                        content = content + "<p>";
                        content = content + title;
                        content = content + "</p>";             
                        content = content + "</a>";
                        content = content + "</li>";
                    });             
                    $("#thelist").prepend(content).listview('refresh');

                 },
                 error: function(){
                    // alert('fail');
                 }
             });        
            p++;    

            myScroll.refresh();     //update new page       Remember to 
    }

    /**
     *  do itself
     * myScroll.refresh();      // update new page
     */
    function pullUpAction () {
        setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
            /*      
            var el, li, i;
            el = document.getElementById('thelist');

            for (i=0; i<3; i++) {
                li = document.createElement('li');
                li.innerText = 'Generated row ' + (++generatedCount);
                el.appendChild(li, el.childNodes[0]);
            }
            */

            var content = "";
            for (var i=1;i<3;i++){
                content = content + "<li>";
                content = content + "<a href=\"#\">";
                content = content + "<img src=\"images/album-bb.jpg\" />";
                content = content + "<h2>";
                content = content + "add new content<br/>"+new Date();
                content = content + "</h2>";
                content = content + "<p>";
                content = content + "Broken Bells";
                content = content + "</p>";             
                content = content + "</a>";
                content = content + "</li>";
            }
            $("#thelist").append(content).listview('refresh');

            myScroll.refresh();     // update new page       Remember to  Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000);   // <-- Simulate network congestion, remove setTimeout from production!
    }

    /**
     * began iScroll
     */
    function loaded() {

        if(myScroll!=null){
            myScroll.destroy();
        }

        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;
        pullUpEl = document.getElementById('pullUp');   
        pullUpOffset = pullUpEl.offsetHeight;

        myScroll = new iScroll('wrapper', {
            useTransition: true,    //default true
            //useTransition: false, 
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'down update...';
                } else if (pullUpEl.className.match('loading')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'up update...';
                }
            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'down update...';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'down update...';
                    this.minScrollY = -pullDownOffset;
                } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'flip';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'update...';
                    this.maxScrollY = this.maxScrollY;
                } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'up date...';
                    this.maxScrollY = pullUpOffset;
                }
            },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'loading...';                
                    pullDownAction();   // Execute custom function (ajax call?)
                } else if (pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'loading';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = 'loading...';                
                    pullUpAction(); // Execute custom function (ajax call?)
                }
            }
        });

        setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
    }


    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    //document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false); 
    </script>
    <link rel="stylesheet" type="text/css" href="css/iscroll.css">
    </head>
    <body>

    <div data-role="page" id="list"> 
    <div id="header"><a href="#">product list</a></div>
    <div id="wrapper">
        <div id="scroller">
            <div id="pullDown">
                <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...</span>
            </div>
            <ul data-role="listview" data-icon="false" id="thelist">            
                <li><a href="#">
                    <img src="images/album-p.jpg">
                    <h3> Amadeus Phoenix</h3>
                    <p>Phoenix</p></a>
                </li>
            </ul>       
            <div id="pullUp">
                <span class="pullUpIcon"></span><span class="pullUpLabel">Pull up to refresh...</span>
            </div>
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" data-grid="a">
                <ul>
                    <li><a href="index.html" class="ui-btn-active" data-ajax="false">index</a></li>

                </ul>
            </div>
    </div>
    </div>
    </body>
    </html>

**Drew** · Answer 2

I found that some of the examples included in the iscrollview download package are binding to some of the iscroll events. Using those examples as a guide, I came up with the following working solution:

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">


    <link rel="stylesheet" href="mobile/resources/js/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="mobile/resources/css/jqm-icon-pack-2.0-original.css" />
    <link rel="stylesheet" href="mobile/resources/js/jquery.mobile.simpledialog.min.css" />
    <link rel="stylesheet" href="mobile/resources/css/jquery.mobile.iscrollview.css" />
    <link rel="stylesheet" href="mobile/resources/css/fileuploader.css" type="text/css" media="all" />



    <script src="mobile/resources/js/json2.js"></script>
    <script src="mobile/resources/js/jquery-1.9.1.min.js"></script>
    <script src="mobile/resources/js/jquery.postjson.js"></script>      
    <script src="mobile/resources/js/jstorage.js"></script>
    <script src="mobile/resources/js/jquery.validate-1.7.min.js"></script>
    <script type="text/javascript" src="mobile/resources/js/fileuploader.js"></script>




    <script type="text/javascript">
        console.log('head javascript - before JQM is loaded');

        var scroll_stop_time = (new Date).getTime(); // initialize the variable
        var is_scrolling = false;           


        // ==============================================
        // ALL PAGES - EVERY TIME THEY ARE DISPLAYED
        // ==============================================
            // -- all pages - pagebeforechange event --
            $(document).on( "pagebeforechange", function( event, data ){
                if ( typeof data.toPage === "string" ) {
                    console.log('all pages - pagebeforechange event - (every time ANY page is about to be displayed)');
                    console.log(data);
                    // intercept a page change request
                    // can alter any aspect of this request, if needed

                    if(data.toPage.indexOf("manage-inventory") != -1){
                        // make sure we haven't just recently stopped an iScroll scroller (not really a clicked link)
                        elapsed_time = ((new Date).getTime()) - scroll_stop_time;                           
                        if(elapsed_time  < 200 || is_scrolling){
                            //console.log('not really a click');
                            event.preventDefault();
                            return false;
                        }
                    }
                }
            });


        // ==============================================
        // SPECIFIC PAGES - ON INITIAL LOAD ONLY
        // ==============================================               

        $(document).on("pageinit", "#page_manage-inventory-items_by_type2", function() {
            console.log('#page_manage-inventory-items_by_type2 - pageinit event -- (only once for THIS page)');

            $(".iscroll-wrapper", this).bind( {
                //iscroll_onscrollstart : function(){
                //  console.log('ON SCROLL START');
                //  is_scrolling=true;
                    // didn't work here because even a static click would
                    // fire this event but the onscrollend would never fire
                    // because it really wasn't scrolling
                //},
                iscroll_onscrollmove : function(){
                    //console.log('ON SCROLL MOVE');
                    is_scrolling=true;
                },
                iscroll_onscrollend : function(){
                    //console.log('ON SCROLL END');
                    is_scrolling=false;
                    scroll_stop_time=(new Date).getTime();
                }

            });

        });

    </script>


    <script src="mobile/resources/js/jquery.mobile-1.3.1.min.js"></script>
    <script src="mobile/resources/js/iscroll4.2.js"></script>
    <script src="mobile/resources/js/jquery.mobile.iscrollview.js"></script>
    <script src="mobile/resources/js/jquery.mobile.simpledialog2.min.js"></script>



</head>
<body>

<div data-role="page" id="page_manage-inventory-items_by_type" data-theme="b" data-content-theme="b">

<div data-role="header">
            <a href="#panel_nav_manage-inventory-items_by_type" data-icon="direction" data-iconpos="notext" data-inline="true" data-role="button"></a>
                <a href="#panel_settings_manage-inventory-items_by_type" data-icon="menu" data-iconpos="notext" data-inline="true" data-role="button" class="ui-btn-right"></a>
            <h1>Items by Type</h1>
</div>


<div data-role="content">


<style type="text/css" media="all">

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

</style>



<div data-role="fieldcontain" style="margin-bottom:40px;">
    <label for="iibt_search">Item Search:</label>
    <input type="search" class="item_search" name="iibt_search" id="iibt_search" value="" />
</div>




    <h2>Items by Type:</h2>

<style type="text/css">


</style>


<div class="listview-wrapper" data-iscroll>

<ul id="iibt_listview" data-role="listview" data-inset="true" data-filter="true">
            <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=1&specific_name=Blu-Ray Players&specific_class=t">Blu-Ray Players<span class="ui-li-count">187</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=2&specific_name=CD-ROM Players&specific_class=t">CD-ROM Players<span class="ui-li-count">416</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=3&specific_name=Computers&specific_class=t">Computers<span class="ui-li-count">104</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=4&specific_name=Data Panels&specific_class=t">Data Panels<span class="ui-li-count">253</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=5&specific_name=Data Projectors&specific_class=t">Data Projectors<span class="ui-li-count">160</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=6&specific_name=Digital Cameras&specific_class=t">Digital Cameras<span class="ui-li-count">424</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=7&specific_name=DVD Players&specific_class=t">DVD Players<span class="ui-li-count">347</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=8&specific_name=Easels&specific_class=t">Easels<span class="ui-li-count">372</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=9&specific_name=Flipcharts&specific_class=t">Flipcharts<span class="ui-li-count">441</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=10&specific_name=Laptops&specific_class=t">Laptops<span class="ui-li-count">125</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=11&specific_name=MAC Monitor Cables&specific_class=t">MAC Monitor Cables<span class="ui-li-count">166</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=18&specific_name=Monitors&specific_class=t">Monitors<span class="ui-li-count">315</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=12&specific_name=Overheads&specific_class=t">Overheads<span class="ui-li-count">255</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=13&specific_name=Podiums&specific_class=t">Podiums<span class="ui-li-count">500</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=14&specific_name=Power Supplies&specific_class=t">Power Supplies<span class="ui-li-count">174</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=15&specific_name=Screens&specific_class=t">Screens<span class="ui-li-count">398</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=16&specific_name=Stereos&specific_class=t">Stereos<span class="ui-li-count">469</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=17&specific_name=TVs&specific_class=t">TVs<span class="ui-li-count">101</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=19&specific_name=VGV/MCGA Cables&specific_class=t">VGV/MCGA Cables<span class="ui-li-count">111</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=20&specific_name=Video Cameras&specific_class=t">Video Cameras<span class="ui-li-count">470</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=21&specific_name=Video Projectors&specific_class=t">Video Projectors<span class="ui-li-count">495</span></a>
            </li>
                        <li>
                <a href="manage-inventory-items_by_specific.php?specific_id=22&specific_name=Visualizers&specific_class=t">Visualizers<span class="ui-li-count">470</span></a>
            </li>
            </ul>

</div>


</div>


        <div id="fixed_footer" data-theme="a" data-role="footer" data-position="fixed" style="text-align: center;">
        <div style="display:inline-block; margin-top:10px; margin-bottom:10px;">manage-inventory-items_by_type</div>
        </div>

</div>



</body>
</html>

onScrollEnd event not firing when using iscrollview

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in JQUERY-MOBILE

Related Questions in ISCROLL4

Related Questions in ISCROLLVIEW

Trending Questions

Popular # Hahtags

Popular Questions