svdgraaf / pull-to-refresh

pull-to-refresh jquery plugin

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/

pull-to-refresh's Issues

jQuery Mobile Compatibility

Just to let everyone know that I have tested this with jQmobile and it breaks the styling. Functionality wise it works tho.

If anyone has been able to find a workaround for it, please let me know.

Images are missing

one image is missing called arrow_up.png file

Demo page isn't working anymore

The page is returning a 404 error in GitHub Pages. The demo page doesn't seem even exist already.

Jquery mobile callback function

Hello,
I have tested this cool plugin with phonegap / jquery mobile and everything works fine except that the callback function doesnt "hide" the refreshing element and it doesn't stop.

chrome in android

Pull-refresh works but regular scrolling doesn't, at touch end the page scrolls to top directly

Dude je demo is stuk

http://svdgraaf.nl/pull-to-refresh/demo.html
http://bit.ly/pull-to-refresh

doet 404