document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <script>
  2.        //grab the list
  3.        var list = document.getElementById("touchlist");
  4.        //grab the loading div
  5.        var loader = document.getElementById("touchloader");
  6.        //keep the state whether the fingers are touched
  7.        var isTouched = false;
  8.        //keep the state whether a PULL actually went out
  9.        var isMoved = false;
  10.        //This has the original Top offset (relative to screen) position of the list
  11.        var prevY = parseInt(list.offsetTop);      
  12.        //This has the original Top CSS position of the list
  13.        var cssY = list.style.top;
  14.        cssY = parseInt(cssY.substring(0,cssY.length - 2));
  15.        
  16.        //Add the start of the touching
  17.        list.addEventListener("touchstart",function(e){
  18.            //touch started ? YES
  19.            isTouched = true;
  20.            //initialize the touched point
  21.            prevY = e.changedTouches[0].clientY;
  22.            //we use css3 transitions when available for smooth sliding
  23.            list.style.transition = "";
  24.  
  25.            e.preventDefault();
  26.        },false);
  27.        list.addEventListener("touchend",function(e){
  28.            //on touchup we cancel the touch event
  29.            isTouched = false;
  30.            //now if the list has moved downwards, it should come up but in a transition
  31.            list.style.transition = "top 1s";
  32.            if(isMoved){
  33.                //show the loader div
  34.                loader.style.display = "block";
  35.                loadNewData();
  36.            }
  37.            list.style.top = cssY + \'px\';                            
  38.            isMoved = false;
  39.            
  40.            e.preventDefault();
  41.        },false);
  42.        list.addEventListener("touchmove",function(e){
  43.            if(isTouched){
  44.                if(e.changedTouches[0].clientY > prevY){
  45.                 //on touchmove, we add the exact amount fingers moved to the top of the list
  46.                 var change = e.changedTouches[0].clientY - prevY;                  
  47.                 //and add it to the style
  48.                 list.style.top = cssY + change + \'px\';
  49.                 isMoved = true;
  50.                }
  51.            }
  52.            e.preventDefault();
  53.        },false);
  54.            
  55.        function loadNewData(){
  56.           //added dummy event the show the loading process
  57.           setTimeout(function(){
  58.                 list.innerHTML = \'<li>new user</li><li>new user 2</li>\' + list.innerHTML;
  59.                 //once everything is loaded we remove the loader div
  60.                 loader.style.display = "none";
  61.            },1000);
  62.            /**
  63.             * do what ever to get data here
  64.             */
  65.          
  66.        }
  67. </script>
');