Skip to content

Instantly share code, notes, and snippets.

@lbj96347

lbj96347/pull-to-refresh.html

Created November 11, 2011 05:53
Show Gist options
  • Save lbj96347/1357311 to your computer and use it in GitHub Desktop.
Save lbj96347/1357311 to your computer and use it in GitHub Desktop.
Download ZIP
Pull to refresh using javascript!
Raw
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>
@lbj96347
Copy link
Author

Use this code demo,you can creat a web app effect: pull to refresh.

This is useful in the timeline.

Yo.Check it out!

@sadiq81
Copy link

sadiq81 commented Feb 10, 2014

How come it only works inline?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment