[Tutorial] Pull to Refresh on Mobile

Sites like Twitter let you pull the page down and release to refresh the page in mobile view. An example of this can be seen in the screen shot below



Step 1.

• Download the pulltorefresh.min.js file attached to this thread
  
• upload the pulltorefresh.min.js file to your /jscripts folder
  

Step 2.

• Open AdminCP > Template & Style > Templates in Sidebar > Your Theme's Templates > header
  
• Add the following code to the very top of the template (Line 1)
  

<div id="pulltorefresh"></div>
<script src="{$mybb->asset_url}/jscripts/pulltorefresh.min.js"></script>
<script>
PullToRefresh.init({
  mainElement: '#pulltorefresh', // above which element?
  onRefresh: function (done) {
    setTimeout(function () {
      done(); // end pull to refresh
document.location.reload(true);
    }, 1500);
  }
});
</script>

* If you have a fixed header (A header that follows you as you scroll) place the code below the header element. If you want the Pull To Refresh message to appear below your header, place the code below the header element.


And that's it. You're done. Open your site on your phone and test it out.

Demo Link (Mobile Only): https://sharree.com



Credit to BoxFactura for script

  pulltorefresh.min.js (Size: 6.48 KB / Downloads: 4)