Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

pull-to-refresh jquery plugin

branch: master
README.md

Pull to refresh

Easy to use javascript plugin for implementing pull-to-refresh to any page. It works especially well for webapps installed on the homescreen. Or you can use it in your app webviews.

Demo

Point your i-device to: http://bit.ly/pull-to-refresh

How to use

See demo.html, call pull_to_refresh() on a block element and you're done. Easiest would be to point a wrapper element surrounding your entire content.

The wrapper element will get a 'position: absolute' css style (to support the pulling), and will add a div above your wrapper which will hold the actual pullbar.

  $('#wrapper').pull_to_refresh({
    refresh: function(stoploading){
      alert('start reload!');
      stoploading();
    }
  });

Options

There are several options available, which you can provide during setup:

  var defaults = {
    refresh: function(callback){},
    pull_to_refresh_text: 'Pull down to refresh...',
    letgo_text: 'Release to refresh...',
    refreshing_text: 'Refreshing...',
    status_indicator_id: 'pull_to_refresh',
    refreshClass: 'refresh',
    visibleClass: 'visible',
  };
  • refresh

    A function, which will be called when the refresh is triggered, it will get a callback method as only option. You can call this function to have the bar removed again.

  • pull_to_refresh_text

    The text that will show up when the bar is being pulled

  • letgo_text

    The text that will show up when the bar is pulled enough to trigger the refresh callback

  • refreshing_text

    Text that will show when the bar is let go, and the refresh callback will be triggered

  • status_indicator_id

    id of the element to use for the status indicator, you probably won't have to change this

  • refresh_class

    Class to be used when bar is being refreshed

  • visible_class

    Class to be used when the bar was pulled far enough to trigger the refresh callback

Pro-tips

  • Handy for full webapp functionality
  • See the demo.html file for an example

Problems?

I haven't tested this with other libraries out there (jquery-mobile, iscroll, etc.), so I'm not sure whether this script will interfere with any of those. Then again, they probably provide their own solution :)

Caveats/TODO

  • I'm not sure if this works on any Android devices, I don't have those around, so if anyone can test, that would be sweet :)
  • The element you call will get a position absolute, to support the dragging
  • We need to call e.preventDefault() so this will break the default bouncing of your webview, any tips would be appreciated

Credits

Inspired by http://waynepan.com/2010/07/30/javascript-pull-to-refresh/

Something went wrong with that request. Please try again.