MyBB Community Forums

I've just added this to my forum. It does refresh when you pull down, but it doesn't look like the example video.



Do I just need to customize the div that was inserted into the header template?

Could you share the background graphic?

If I may, doesn't Firefox and Chrome for Android do it by default ?

(2019-02-28, 05:13 AM)meetdilip Wrote: [ -> ]If I may, doesn't Firefox and Chrome for Android do it by default ?

Depends on the browser. I’m on iOS, the only big browser that I’ve found has a pull to refresh is Chrome. Firefox doesn’t and Safari doesn’t. It’s up to you if you want to add one for users who don’t have the browser feature.

---

(2019-02-27, 10:38 PM)Wildcard Wrote: [ -> ]I've just added this to my forum. It does refresh when you pull down, but it doesn't look like the example video.



Do I just need to customize the div that was inserted into the header template?

Could you share the background graphic?

The image in OP is from google images just to give an example of what pull to refresh is. The script isn’t styled the same. You’re able to edit it to your liking though.

(2019-01-29, 06:48 PM)Sharree Wrote: [ -> ]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://www.rantcentralforums.com



Credit to BoxFactura for script

how can i keep a background image in this ?