lbj96347/pull-to-refresh.html

## pull-to-refresh.html

<!doctype html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <style>
    html, body, ul { height: 100%; font-family: Helvetica; margin: 0; padding: 0 }
    li { border-bottom:1px solid #E0E0E0; font-size:20px; font-weight:bold; list-style:none outside none; margin:0; padding:8px 0 8px 10px; position:relative; -webkit-transition: opacity .75s ease-in }
    #window { height: 100%; overflow: hidden }
    #content { position: absolute; background: #fff; width: 100% }
    #pull_to_refresh, #refreshing { line-height: 50px; text-align: center }

    </style>
  <!-- code of pull js -->
  <script>
var PULL = function() {
  var content,
      pullToRefresh,
      refreshing,
      contentStartY,
      success,
      start,
      cancel,
      startY,
      track = false,
      refresh = false;

  var removeTransition = function() {
    content.style['-webkit-transition-duration'] = 0;
  };

  return {
    init: function(o) {
      content = document.getElementById('content');
      pullToRefresh = document.getElementById('pull_to_refresh');
      refreshing = document.getElementById('refreshing');
      success = o.success;
       start = o.start;
      cancel = o.cancel;

      document.body.addEventListener('touchstart', function(e) {
        e.preventDefault();
        contentStartY = parseInt(content.style.top);
        startY = e.touches[0].screenY;
      });

      document.body.addEventListener('touchend', function(e) {
        if(refresh) {
          content.style['-webkit-transition-duration'] = '.5s';
          content.style.top = '50px';

          pullToRefresh.style.display = 'none';
          refreshing.style.display = '';

          success(function() { // pass down done callback
            pullToRefresh.style.display = '';
            refreshing.style.display = 'none';
            content.style.top = '0';
            content.addEventListener('transitionEnd', removeTransition);
          });

          refresh = false;
        } else if(track) {
          content.style['-webkit-transition-duration'] = '.25s';
          content.style.top = '0';
          content.addEventListener('transitionEnd', removeTransition);

          cancel();
        }

        track = false;
      });

      document.body.addEventListener('touchmove', function(e) {
        var move_to = contentStartY - (startY - e.changedTouches[0].screenY);
        if(move_to > 0) track = true; // start tracking if near the top
        content.style.top = move_to + 'px';

        if(move_to > 50) {
          refresh = true;
        } else {
          content.style['-webkit-transition'] = '';
          refresh = false;
        }
      });
    }
  };
}();


  </script>
  <script>
    window.addEventListener('load', function() {
      PULL.init({
        success: function(callback) {
          // simulate a network request that takes 2 seconds
          window.setTimeout(function() {
            var l = document.getElementById('list');
            for(var i = 0; i < 5; i++) { // insert 5 new items
              var li = document.createElement('li');
              li.innerHTML = 'List Item ' + Math.floor(Math.random() * 100);
              li.style.opacity = 0;
              l.insertBefore(li, l.firstChild);
            }
            window.setTimeout(function() {
              for(var i = 0; i < 5; i++) {
                l.children[i].style.opacity = 1;
              }
            }, 0);
            callback();  // pull callback when finished
          }, 2000);
        },
        start: function() {
          console.log('start');
        },
        cancel: function() {
          //alert('cancel');
        }
      });
     }, false);
  </script>
</head>
<body>
  <div id='window'>
          <div id='pull_to_refresh'>Pull and release to refresh</div>
          <div style='display: none' id='refreshing'><img src='data:image/gif;base64,R0lGODlhEAAQAMQAAP%2F%2F%2F%2B7u7t3d3bu7u6qqqpmZmYiIiHd3d2ZmZlVVVURERDMzMyIiIhEREQARAAAAAP%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2BQQFBwAQACwAAAAAEAAQAAAFdyAkQgGJJOWoQgIjBM8jkKsoPEzgyMGsCjPDw7ADpkQBxRDmSCRetpRA6Rj4kFBkgLC4IlUGhbNQIwXOYYWCXDufzYPDMaoKGBoKb886OjAKdgZAAgQkfCwzAgsDBAUCgl8jAQkHEAVkAoA1AgczlyIDczUDA2UhACH5BAUHABAALAAAAAAPABAAAAVjICSO0IGIATkqIiMKDaGKC8Q49jPMYsE0hQdrlABCGgvT45FKiRKQhWA0mPKGPAgBcTjsspBCAoH4gl%2BFmXNEUEBVAYHToJAVZK%2FXWoQQDAgBZioHaX8igigFKYYQVlkCjiMhACH5BAUHABAALAAAAAAQAA8AAAVgICSOUGGQqIiIChMESyo6CdQGdRqUENESI8FAdFgAFwqDISYwPB4CVSMnEhSej%2BFogNhtHyfRQFmIol5owmEta%2FfcKITB6y4choMBmk7yGgSAEAJ8JAVDgQFmKUCCZnwhACH5BAUHABAALAAAAAAQABAAAAViICSOYkGe4hFAiSImAwotB%2Bsi6Co2QxvjAYHIgBAqDoWCK2Bq6A40iA4yYMggNZKwGFgVCAQZotFwwJIF4QnxaC9IsZNgLtAJDKbraJCGzPVSIgEDXVNXA0JdgH6ChoCKKCEAIfkEBQcAEAAsAAAAABAADgAABUkgJI7QcZComIjPw6bs2kINLB5uW9Bo0gyQx8LkKgVHiccKVdyRlqjFSAApOKOtR810StVeU9RAmLqOxi0qRG3LptikAVQEh4UAACH5BAUHABAALAAAAAAQABAAAAVxICSO0DCQKBQQonGIh5AGB2sYkMHIqYAIN0EDRxoQZIaC6bAoMRSiwMAwCIwCggRkwRMJWKSAomBVCc5lUiGRUBjO6FSBwWggwijBooDCdiFfIlBRAlYBZQ0PWRANaSkED1oQYHgjDA8nM3kPfCmejiEAIfkEBQcAEAAsAAAAABAAEAAABWAgJI6QIJCoOIhFwabsSbiFAotGMEMKgZoB3cBUQIgURpFgmEI0EqjACYXwiYJBGAGBgGIDWsVicbiNEgSsGbKCIMCwA4IBCRgXt8bDACkvYQF6U1OADg8mDlaACQtwJCEAIfkEBQcAEAAsAAABABAADwAABV4gJEKCOAwiMa4Q2qIDwq4wiriBmItCCREHUsIwCgh2q8MiyEKODK7ZbHCoqqSjWGKI1d2kRp%2BRAWGyHg%2BDQUEmKliGx4HBKECIMwG61AgssAQPKA19EAxRKz4QCVIhACH5BAUHABAALAAAAAAQABAAAAVjICSOUBCQqHhCgiAOKyqcLVvEZOC2geGiK5NpQBAZCilgAYFMogo%2FJ0lgqEpHgoO2%2BGIMUL6p4vFojhQNg8rxWLgYBQJCASkwEKLC17hYFJtRIwwBfRAJDk4ObwsidEkrWkkhACH5BAUHABAALAAAAQAQAA8AAAVcICSOUGAGAqmKpjis6vmuqSrUxQyPhDEEtpUOgmgYETCCcrB4OBWwQsGHEhQatVFhB%2FmNAojFVsQgBhgKpSHRTRxEhGwhoRg0CCXYAkKHHPZCZRAKUERZMAYGMCEAIfkEBQcAEAAsAAABABAADwAABV0gJI4kFJToGAilwKLCST6PUcrB8A70844CXenwILRkIoYyBRk4BQlHo3FIOQmvAEGBMpYSop%2FIgPBCFpCqIuEsIESHgkgoJxwQAjSzwb1DClwwgQhgAVVMIgVyKCEAIfkECQcAEAAsAAAAABAAEAAABWQgJI5kSQ6NYK7Dw6xr8hCw%2BELC85hCIAq3Am0U6JUKjkHJNzIsFAqDqShQHRhY6bKqgvgGCZOSFDhAUiWCYQwJSxGHKqGAE%2F5EqIHBjOgyRQELCBB7EAQHfySDhGYQdDWGQyUhADs%3D'> Refreshing</div>
          <div id='content' style='top: 0; -webkit-transition: top .5s ease-out'>
                  <ul id='list'>
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                    <li>List Item 4</li>
                    <li>List Item 5</li>
                    <li>List Item 6</li>
                    <li>List Item 7</li>
                    <li>List Item 8</li>
                    <li>List Item 9</li>
                    <li>List Item 10</li>
                    <li>List Item 11</li>
                    <li>List Item 12</li>
                    <li>List Item 13</li>
                    <li>List Item 14</li>
                    <li>List Item 15</li>
                    <li>List Item 16</li>
                    <li>List Item 17</li>
                    <li>List Item 18</li>
                    <li>List Item 19</li>
                    <li>List Item 20</li>
                  <ul>
          </div>
  </div>
</body>
</html>

	<!doctype html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<style>
	html, body, ul { height: 100%; font-family: Helvetica; margin: 0; padding: 0 }
	li { border-bottom:1px solid #E0E0E0; font-size:20px; font-weight:bold; list-style:none outside none; margin:0; padding:8px 0 8px 10px; position:relative; -webkit-transition: opacity .75s ease-in }
	#window { height: 100%; overflow: hidden }
	#content { position: absolute; background: #fff; width: 100% }
	#pull_to_refresh, #refreshing { line-height: 50px; text-align: center }

	</style>
	<!-- code of pull js -->
	<script>
	var PULL = function() {
	var content,
	pullToRefresh,
	refreshing,
	contentStartY,
	success,
	start,
	cancel,
	startY,
	track = false,
	refresh = false;

	var removeTransition = function() {
	content.style['-webkit-transition-duration'] = 0;
	};

	return {
	init: function(o) {
	content = document.getElementById('content');
	pullToRefresh = document.getElementById('pull_to_refresh');
	refreshing = document.getElementById('refreshing');
	success = o.success;
	start = o.start;
	cancel = o.cancel;

	document.body.addEventListener('touchstart', function(e) {
	e.preventDefault();
	contentStartY = parseInt(content.style.top);
	startY = e.touches[0].screenY;
	});

	document.body.addEventListener('touchend', function(e) {
	if(refresh) {
	content.style['-webkit-transition-duration'] = '.5s';
	content.style.top = '50px';

	pullToRefresh.style.display = 'none';
	refreshing.style.display = '';

	success(function() { // pass down done callback
	pullToRefresh.style.display = '';
	refreshing.style.display = 'none';
	content.style.top = '0';
	content.addEventListener('transitionEnd', removeTransition);
	});

	refresh = false;
	} else if(track) {
	content.style['-webkit-transition-duration'] = '.25s';
	content.style.top = '0';
	content.addEventListener('transitionEnd', removeTransition);

	cancel();
	}

	track = false;
	});

	document.body.addEventListener('touchmove', function(e) {
	var move_to = contentStartY - (startY - e.changedTouches[0].screenY);
	if(move_to > 0) track = true; // start tracking if near the top
	content.style.top = move_to + 'px';

	if(move_to > 50) {
	refresh = true;
	} else {
	content.style['-webkit-transition'] = '';
	refresh = false;
	}
	});
	}
	};
	}();


	</script>
	<script>
	window.addEventListener('load', function() {
	PULL.init({
	success: function(callback) {
	// simulate a network request that takes 2 seconds
	window.setTimeout(function() {
	var l = document.getElementById('list');
	for(var i = 0; i < 5; i++) { // insert 5 new items
	var li = document.createElement('li');
	li.innerHTML = 'List Item ' + Math.floor(Math.random() * 100);
	li.style.opacity = 0;
	l.insertBefore(li, l.firstChild);
	}
	window.setTimeout(function() {
	for(var i = 0; i < 5; i++) {
	l.children[i].style.opacity = 1;
	}
	}, 0);
	callback(); // pull callback when finished
	}, 2000);
	},
	start: function() {
	console.log('start');
	},
	cancel: function() {
	//alert('cancel');
	}
	});
	}, false);
	</script>
	</head>
	<body>
	<div id='window'>
	<div id='pull_to_refresh'>Pull and release to refresh</div>
	<div style='display: none' id='refreshing'><img src='data:image/gif;base64,R0lGODlhEAAQAMQAAP%2F%2F%2F%2B7u7t3d3bu7u6qqqpmZmYiIiHd3d2ZmZlVVVURERDMzMyIiIhEREQARAAAAAP%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2BQQFBwAQACwAAAAAEAAQAAAFdyAkQgGJJOWoQgIjBM8jkKsoPEzgyMGsCjPDw7ADpkQBxRDmSCRetpRA6Rj4kFBkgLC4IlUGhbNQIwXOYYWCXDufzYPDMaoKGBoKb886OjAKdgZAAgQkfCwzAgsDBAUCgl8jAQkHEAVkAoA1AgczlyIDczUDA2UhACH5BAUHABAALAAAAAAPABAAAAVjICSO0IGIATkqIiMKDaGKC8Q49jPMYsE0hQdrlABCGgvT45FKiRKQhWA0mPKGPAgBcTjsspBCAoH4gl%2BFmXNEUEBVAYHToJAVZK%2FXWoQQDAgBZioHaX8igigFKYYQVlkCjiMhACH5BAUHABAALAAAAAAQAA8AAAVgICSOUGGQqIiIChMESyo6CdQGdRqUENESI8FAdFgAFwqDISYwPB4CVSMnEhSej%2BFogNhtHyfRQFmIol5owmEta%2FfcKITB6y4choMBmk7yGgSAEAJ8JAVDgQFmKUCCZnwhACH5BAUHABAALAAAAAAQABAAAAViICSOYkGe4hFAiSImAwotB%2Bsi6Co2QxvjAYHIgBAqDoWCK2Bq6A40iA4yYMggNZKwGFgVCAQZotFwwJIF4QnxaC9IsZNgLtAJDKbraJCGzPVSIgEDXVNXA0JdgH6ChoCKKCEAIfkEBQcAEAAsAAAAABAADgAABUkgJI7QcZComIjPw6bs2kINLB5uW9Bo0gyQx8LkKgVHiccKVdyRlqjFSAApOKOtR810StVeU9RAmLqOxi0qRG3LptikAVQEh4UAACH5BAUHABAALAAAAAAQABAAAAVxICSO0DCQKBQQonGIh5AGB2sYkMHIqYAIN0EDRxoQZIaC6bAoMRSiwMAwCIwCggRkwRMJWKSAomBVCc5lUiGRUBjO6FSBwWggwijBooDCdiFfIlBRAlYBZQ0PWRANaSkED1oQYHgjDA8nM3kPfCmejiEAIfkEBQcAEAAsAAAAABAAEAAABWAgJI6QIJCoOIhFwabsSbiFAotGMEMKgZoB3cBUQIgURpFgmEI0EqjACYXwiYJBGAGBgGIDWsVicbiNEgSsGbKCIMCwA4IBCRgXt8bDACkvYQF6U1OADg8mDlaACQtwJCEAIfkEBQcAEAAsAAABABAADwAABV4gJEKCOAwiMa4Q2qIDwq4wiriBmItCCREHUsIwCgh2q8MiyEKODK7ZbHCoqqSjWGKI1d2kRp%2BRAWGyHg%2BDQUEmKliGx4HBKECIMwG61AgssAQPKA19EAxRKz4QCVIhACH5BAUHABAALAAAAAAQABAAAAVjICSOUBCQqHhCgiAOKyqcLVvEZOC2geGiK5NpQBAZCilgAYFMogo%2FJ0lgqEpHgoO2%2BGIMUL6p4vFojhQNg8rxWLgYBQJCASkwEKLC17hYFJtRIwwBfRAJDk4ObwsidEkrWkkhACH5BAUHABAALAAAAQAQAA8AAAVcICSOUGAGAqmKpjis6vmuqSrUxQyPhDEEtpUOgmgYETCCcrB4OBWwQsGHEhQatVFhB%2FmNAojFVsQgBhgKpSHRTRxEhGwhoRg0CCXYAkKHHPZCZRAKUERZMAYGMCEAIfkEBQcAEAAsAAABABAADwAABV0gJI4kFJToGAilwKLCST6PUcrB8A70844CXenwILRkIoYyBRk4BQlHo3FIOQmvAEGBMpYSop%2FIgPBCFpCqIuEsIESHgkgoJxwQAjSzwb1DClwwgQhgAVVMIgVyKCEAIfkECQcAEAAsAAAAABAAEAAABWQgJI5kSQ6NYK7Dw6xr8hCw%2BELC85hCIAq3Am0U6JUKjkHJNzIsFAqDqShQHRhY6bKqgvgGCZOSFDhAUiWCYQwJSxGHKqGAE%2F5EqIHBjOgyRQELCBB7EAQHfySDhGYQdDWGQyUhADs%3D'> Refreshing</div>
	<div id='content' style='top: 0; -webkit-transition: top .5s ease-out'>
	<ul id='list'>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
	<li>List Item 4</li>
	<li>List Item 5</li>
	<li>List Item 6</li>
	<li>List Item 7</li>
	<li>List Item 8</li>
	<li>List Item 9</li>
	<li>List Item 10</li>
	<li>List Item 11</li>
	<li>List Item 12</li>
	<li>List Item 13</li>
	<li>List Item 14</li>
	<li>List Item 15</li>
	<li>List Item 16</li>
	<li>List Item 17</li>
	<li>List Item 18</li>
	<li>List Item 19</li>
	<li>List Item 20</li>
	<ul>
	</div>
	</div>
	</body>
	</html>