Pull to refresh. For the web.
Ever wanted pull to refresh for your website? Now, with <a href="http://usehook.com/">Hook.js</a>, it's simple and easy to do!
First and foremost, download Hook <a href="http://usehook.com/">here</a>, and upload the "hook" folder.
Place the following right before the ending "head" tag:
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="hook/hook.css" type="text/css" />
<script src="hook/hook.js" type="text/javascript"></script>Place the following right after the opening "body" tag:
<div id="hook">
<div id="loader">
<div class="spinner"></div>
</div>
<span id="hook-text">Reloading...</span>
</div>Written by Jordan Singer
Related protips
13 Responses
This is simple and gorgeous. Just was I was looking for. Thanks for the tip!
Jarrett,
Thanks so much. We worked hard on getting it out as fast as possible. Much appreciated.
I didn't get the "pull to refresh" thing until I saw it on the site. This looks really cool. Definitely bookmarking this for future use. Thanks!
That's a nice lib!
Sweet Design! Have you seen any cool implementations of this on the web?
http://loadability.co is not responding.
The github project is still active, but I'd love to see the site. Hopefully it's back online soon... any word on this Jordan?
@alesf http://usehook.com is the new Loadability.
Awesome! Thanks @jsngr
I've just visited http://usehook.com/ and I'm not sure where you'd use this?
The kind of places where pull to refresh works well is where you have content that often changes AND appears before the fold of a page. It's not good having to scroll to the top of the page to refresh to then have to scroll back down the page to try and find your place again.
There may be some perfect examples of where pull to refresh works, but I can't see it just yet. I would love to see some examples of pull to refresh that really complements the content it is refreshing. I'm thinking of sites like Twitter, Facebook but this has already been solved with push style updates. Also, for mobile devices, you already have a refresh button within reach at all times within the browser you are using. The control just feels a bit gimmicky at the moment but I'm open to being enlightened!
Separate to this, its implementation also throws up some alarm bells. Having the page reload as soon as you hit the top is really going to frustrate users if they just wanted to move back to the top of the page and not have the whole page reload. Pull to refresh implemented on the iPhone, for example, provides a tactile threshold. You have to pull to refresh, not just reach the top of the view.
Pull to refresh should also be used sparingly and in the right context. I can see developers seeing a lib like this and jumping at it just to say that they have "Pull to refresh" in their project and inadvertently cause their users a real headache when visiting their site.
I'm seeing this from the point of view of an iOS developer and was just curious to get some thoughts of this controls use in the real world.
It must be cool with ajax alternation.
I agree with @justynjj. It's not well adapted to the desktop environment. Pull to refresh has been created because of the momentum scrolling (we could see past the top of the page after scrolling quickly so it was decided to use that space and natural movement to add a function).
The desktop equivalent, in my own opinion, is the "auto-load" at the end of a page. If your content scrolls in the other way (most recent on top like Twitter), you could just detect the scroll event while at the top of the page -which hook does, I believe- and load new content with Ajax. Refreshing the whole page isn't going to cut it in many cases I believe.
