Pull-to-Refresh in PhoneGap and Topcoat Applications

Pull-to-refresh has become a standard UI pattern to refresh lists in mobile applications, and there is no reason not to use it in PhoneGap / Cordova applications.

A first option is to use iScroll, which has pull-to-refresh built-in. That’s a great option for older OS versions or platforms that do not support touch-based scrolling natively.

But on platforms that support it (with -webkit-overflow-scrolling: touch), you don’t want to give up the benefits of native scrolling just to implement pull-to-refresh.

Damien Antipa, a colleague at Adobe, wrote a nice library showing how to implement pull-to-refresh with native scrolling.

I recently used it in a PhoneGap application built with the Topcoat CSS toolkit. Damien’s library worked great as-is, but I changed a few styles and assets to match the Topcoat look.

You can see the result here:

The source code for this example is available here.

Damien’s orginal library is here.

  • Jerry

    So does the pull refresh work on android phones?

  • hello ,i am phonegap user,i was search in google modular backbone js and jqm 1.3.2. i want to create phonegap app using jqm 1.3.2 and backbone js, can i request example for jqm and backbone js that use many page such as page.html, page2.html and use modular backbone js..
    thanks :D

  • Mike

    Holy Bujeebus you almost lost me with that horrendous Ghostbusters music. Thankfully it was only 38 seconds.

  • Nice plugin and great example app.
    But I wonder how to implement this UI pattern with backbone.js architecture?

    I tried to put it after render of app.views.HomeView, but it works correct only first time.

    It will be amazing to extend article “Building Modular Web Applications with Backbone.js and RequireJS — Sample App” ( or even without RequireJS) with this UI pattern .

  • toast

    Hi, yeah, not working on Android for me (not tested any other platforms) also the link to Damiens library is not working.
    I downloaded the github and tried to put it pretty much as-is onto my phone so not sure what the issue is (phonegap -v = 3.1.0-0.15.0)

    thanks,
    t

  • Nice plugin and great example app.

  • Wouter

    Doesn’t work anymore? I tried the Damien’s lib first. Then after i couldn’t get it to work, i tried this example. I see the list view, header and all, but no pull-to-refresh icons or text appears.

  • Hi everyone, i have the same issue. The library doesn’t work anymore.

  • This article will assist the internet people for creating new web site or even a weblog from start to end.

  • sni

    I have the same problem, the lib doesn’t work anymore. Tested on Galaxy Nexus 7 and Samsung Galaxy S

  • YouSung

    Is this library ONLY for iOS device? even though it’s using PhoneGap?

  • daf182

    It does not work on Android 4.0.4.

  • goodv very nices

  • Thanks you admin coenraets YarbayALf mjks ;b

  • Jeremy

    I can’t get this to work on Adnroid 4.0+
    Is it compatible?

  • quality, reliable, cost-effectiveness and the associated jobs are done imalattan.profesyonel team.http://jonsunsport.com/spor-coraplari.html

  • duka sizlerle.

  • workeep great! Thanks

  • Jack

    I love this, thanks for sharing it. Also, would like to know your opinion on my library – https://github.com/Cleveroad/FireworkyPullToRefresh It’s called FireworkyPullToRefresh – creative “pull to refresh” effect.

  • james mmoore

    A few of the time this will definitely be fantastic. They are a strong fanatic to that dialog. Anyhoo, this, old friend, is something I can not disclose to you considerably to it. Thoraxin Publication is a week by week magazine that highlights on the existing Thoraxin details. eye care treatment

  • Paul Ambler

    I’m currently utilizing WordPress for a few of my blog sites, however, wishing to modify one of them over to a platform comparable to your own as a dry run. Anything especially you would definitely suggest concerning it? residential plumbing repair

  • Paul Ambler

    This short article describes why it is necessary to pick a great hairstyle in order to enhance the total individuality. Hairs are just one of the most integral parts of a human body which to a degree reflects the personality of the person. event planner services

  • Paul Ambler

    I am just commenting to allow you to recognize the actually excellent experience my better half’s youngster’s experience examining your internet blog. She even learned some problems, which included what it resembles to have a magnificent giving character to obtain the others efficiently learn some advanced issues. tech tl dev gadgets

  • Paul Ambler

    Your blog isn’t best handy nonetheless it’s much furthermore absolutely ingenious additionally. There tend to be very couple of individuals that can essentially compose say goodbye to so basic short articles that creatively. tax relief service

css.php