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 a pull-down action on the web page.

It has various options for customizing the default behavior.

Pull down to refresh with PulltoRefresh.js

Download

Download and include
Initialize
Options
Conclusion

1. Download and include

This library is available on Github from where you can download it.
Include pulltorefresh.js script.

<script src="pulltorefresh.js/dist/pulltorefresh.js" type="text/javascript"></script>

2. Initialize

Enable pulldown refresh in the desktop browser –

Add following <script > above PulltoRefresh library –

<script src="//unpkg.com/hammer-touchemulator@0.0.2/touch-emulator.js"></script>
<script>TouchEmulator()</script>

Initialize PulltoRefresh plugin using init() method.

Example

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pull down to refresh with PulltoRefresh.js</title>

</head>
<body >
  
  <p style='color: red;margin-top: 20px;margin-bottom: 20px;'>Pull down the page from the top</p>
  <h2>Make user-friendly select element with Chosen - jQuery</h2>
  <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 src="//unpkg.com/hammer-touchemulator@0.0.2/touch-emulator.js"></script>
  <script>TouchEmulator()</script>
  <script src="pulltorefresh.js/dist/pulltorefresh.js" type="text/javascript"></script>
  <script type='text/javascript'>

  PullToRefresh.init({
    mainElement: 'body',
    onRefresh: function(){ window.location.reload(); }
  });

  </script>

</body>
</html>

View Demo

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: 'h2'

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>
<h2>Make user-friendly select element with Chosen – jQuery</h2>
<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 src="//unpkg.com/hammer-touchemulator@0.0.2/touch-emulator.js"></script>
<script>TouchEmulator()</script>
<script src="pulltorefresh.js/dist/pulltorefresh.js" type="text/javascript"></script>
<script type='text/javascript'>

// Initialize 
PullToRefresh.init({
 mainElement: 'h2',
 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>

View Demo

4. Conclusion

You can use this plugin where you need to implement the 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 mobile browsers, not on the desktop.

NOTE – You have to include touch-emulator.js on your page to enable it for desktop browsers.

If you found this tutorial helpful then don't forget to share.

Pull down to refresh with PulltoRefresh.js

Contents

1. Download and include

2. Initialize

3. Options

4. Conclusion

Leave a Comment Cancel reply