Pull down to refresh with PulltoRefresh.js

PullToRefresh.js is a JavaScript plugin that lets you implement pull to refresh functionality on your web page. The plugin is not dependent on any other libraries.

You can define your own action when the user performs pull down action on the web page.

It has various options for customizing the default behavior.

Pull down to refresh with PulltoRefresh.js


Contents

  1. Download and include
  2. Initialize
  3. Options
  4. Conclusion

 


 

1. Download and include

  • This library is available on Github from where you can download it.
  • Include pulltorefresh.js script at the end of the <body>.
<script src="pulltorefresh.js/dist/pulltorefresh.js" type="text/javascript"></script>

 

2. Initialize

Initialize plugin using init() method.

Example

<script type='text/javascript'>
PullToRefresh.init({
 mainElement: 'body',
 onRefresh: function(){ window.location.reload(); }
});
</script>

Output

Pull down the page from the top. Open in new tab.

NOTE – It is only works on mobile browser.


 

3. Options

Here, are some options –

  • distThreshold – Set the minimum distance required to trigger the refresh. Its default value is 60.
distThreshold: 120
  • distMax – Maximum distance possible to pull down the element. Its default value is 80.
distMax: 140
  • distReload – It trigger after distThreshold and it set the element height. Its default value is 50.
distReload: 110
  • mainElement – Set before which element pull to refresh will be? The default value is 'body'.
mainElement: 'h1'
  • triggerElement – Set from which element pull to refresh trigger. The default value is 'body'.
triggerElement: '#pulldown'
  • instructionsPullToRefresh – Text will show when pulling down. The default value is 'Pull down to refresh'.
instructionsPullToRefresh: 'Pull down to refresh the page'
  • instructionsReleaseToRefresh – Text will show when distThreshold is reached. The default value is 'Release to refresh'.
instructionsReleaseToRefresh: 'Release to refresh the page'
  • instructionsRefreshing – Text will show on refresh. The default value is 'Refreshing'.
instructionsRefreshing: 'Refreshing the page'
  • onRefresh – Specify what action you want to do from pull to refresh.
onRefresh: function(){ alert("Refresh"); }
  • refreshTimeout – Set the delay before onRefresh triggers. It takes value in milliseconds and the default value is 500.
refreshTimeout: 2000

Example

Here, I created a basic layout and in the script define various options in init() method.

<div><button id='pulldown'>Pull down</button></div>
<h1>Make user-friendly select element with Chosen – jQuery</h1>
<p>The Chosen jQuery plugin makes your HTML select element more user-friendly. It is available in both jQuery and Prototype flavor.<p>

<p>It can handle both single and multi-select options. Add a search box to filter the list of options.</p>

<p>There are various options available that allow us to customize the select element behavior.</p>

<!-- Script -->
<script type='text/javascript'>

// Initialize 
PullToRefresh.init({
 mainElement: 'h1',
 distThreshold: 120,
 distMax: 140,
 distReload: 110,
 triggerElement: '#pulldown',
 instructionsPullToRefresh: 'Pull down to refresh the page',
 instructionsReleaseToRefresh: 'Release to refresh the page',
 instructionsRefreshing: 'Refreshing the page',
 refreshTimeout: 2000,
 onRefresh: function(){ 
  alert("Refresh");
 }
});
</script>

Output

Pull down from button side. Open in new tab.

NOTE – It is only works on mobile browsers.


 

4. Conclusion

You can use this plugin where you need to implement pull down effect in your project. It is easy to use and you need to initialize the plugin using init() method which takes multiple options.

It only works on the mobile browsers, not on the desktop.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *