Pull-To-Refresh Needs In Your Web App | pulltorefresh.js

pulltorefresh-js

pulltorefresh.js is a small, but powerful JS library designed to pull the refresh feature of your web app and add pull to refresh (swipe) for your webpages using pure JavaScript.

How to make use of it:

Download and embrace the pulltorefresh.js in your webpage.

<script src="pulltorefresh.js"></script>

Initialize the PullToRefresh with some choices.

PullToRefresh.init({
  mainElement: '#main',
  onRefresh: function() { alert('refresh') }
});

Customize the set of components.

PullToRefresh.init({
  mainElement: '#main',
  triggerElement: '.trigger',
  onRefresh: function() { alert('refresh') }
});

Promise help:

PullToRefresh.init({
  mainElement: '#main', // above which element?
  onRefresh: function(){
    var promise = new Promise(
      function(resolve, reject){
        setTimeout(()=>{
          resolve();
          alert('refresh');
        }, 1500);
      }
    );
    return promise;
  }
});

All default choices.

// Minimum distance required to trigger the refresh
distTreshold: 60,

// Maximum distance possible for the element
distMax: 80,

// After the distTreshold is reached and released, the element will have this height
distReload: 50,

bodyOffset: 20,

// Before which element the pull to refresh elements will be
mainElement: 'body',

// Which element should trigger the pull to refresh
triggerElement: 'body',

// What class will the main element have?
ptrElement: '.ptr',

// What class prefix for the elements?
classPrefix: 'ptr--',

// What property will be used to calculate the element's proportions?
cssProp: 'min-height',

// The icon for both instructionsPullToRefresh and instructionsReleaseToRefresh
iconArrow: '&#8675;',

// The icon when the refresh is in progress.
iconRefreshing: '&hellip;',

// The initial instructions string.
instructionsPullToRefresh: 'Pull down to refresh',

// The instructions string when the distTreshold has been reached.
instructionsReleaseToRefresh: 'Release to refresh',

// The refreshing text.
instructionsRefreshing: 'Refreshing',

// The delay, in milliseconds before the onRefresh is triggered.
refreshTimeout: 500,

// The initialize function.
onInit: function () {},

// What will the pull to refresh trigger? You can return a promise. 
onRefresh: function () { return location.reload(); },

// The resistance function, accepts one parameter, must return a number, capping at 1.
resistanceFunction: function (t) { return Math.min(1, t / 2.5); },

// Which condition should be met for pullToRefresh to trigger?
shouldPullToRefresh: function () { return !window.scrollY; }

Easy Pull To Refresh Library, pulltorefresh js Plugin/Github

pulltorefresh


See Demo And Download

Official Website(BoxFactura): Click Here

This superior jQuery/javascript plugin is developed by BoxFactura. For extra Advanced Usages, please go to the official website.