JavaScript Pull to Refresh
After seeing Leah Culver’s blog post entitled “iPhone Pull to Refresh“, I was disappointed when I clicked through to find out that it was an ObjC library and not a javascript library. So I set out to see how hard it would be to replicate the UI pattern in javascript.
This is a prototype/proof of concept which gives a good idea of how to implement pull to refresh in javascript. It uses no javascript libraries so you could easily port it over to your favorite.
To implement the UI pattern properly, javascript must take over the browser’s default scrolling functionality. Any touch javascript framework already does this (PastryKit, jQtouch, etc). Mobile browsers block rendering when the user is scrolling so exposing the “Pull and Release to Refresh” hint is impossible. This limitation also makes it difficult to develop a plug and play javascript library because each framework handles scrolling differently.
This code works on iOS/iPhone and Android. Please don’t abuse this UI pattern too much. 🙂
[…] developer Wayne Pan has created the same behavior in JavaScript for use in web apps. It’s just a proof of concept implementation at this time, and he’s […]
Wow I like, so many ideas….
[…] developer Wayne Pan has created the same behavior in JavaScript for use in web apps. It’s just a proof of concept implementation at this time, and he’s […]
[…] Javascript “Pull to Refresh” – On mobile devices, an increasingly common UI pattern is to pull down on a list to refresh its contents (Tweetie/Twitter on iOS is the canonical example). This library allows you to include this behavior in browser-based UIs. […]
[…] like Hogwarts and has a Blue Whale skeleton – so it still winsThe iPhone’s gesture Pull to refresh is now available as a JavaScript librarySix useful CSS3 tools lists […]
Is there a way to have this with links? Because right now the listener doesn’t allow the click or ‘touch’ through to the link.
Hey
Thx for a great script.
I have a problem though, your script also kill all links on the page, got any ideas for a fix
Not working
Remove to fix: e.preventDefault()
Thanks for this script! Also, I was looking for pull to refresh libraries and I have found this one – https://github.com/Cleveroad/FireworkyPullToRefresh
What can you say about UI ?