9nea9q
Last Updated: February 25, 2016
·
11.27K
· jsngr

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>
Say Thanks
Respond

14 Responses
Add your response

60
6ab76deb566c7c01f69dd8d396526fbe

This is simple and gorgeous. Just was I was looking for. Thanks for the tip!

over 1 year ago ·
61

Jarrett,
Thanks so much. We worked hard on getting it out as fast as possible. Much appreciated.

over 1 year ago ·
63
Photo

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!

over 1 year ago ·
67
13a9550a854af911366d9f5deb785cd6

That's a nice lib!

over 1 year ago ·
1981

Sweet Design! Have you seen any cool implementations of this on the web?

over 1 year ago ·
3799
17f1dc85e6bf0e7cd2525ed1b7fe3175

http://loadability.co is not responding.

over 1 year ago ·
3804

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?

over 1 year ago ·
4518

@alesf http://usehook.com is the new Loadability.

over 1 year ago ·
4519
over 1 year ago ·
4522

Awesome! Thanks @jsngr

over 1 year ago ·
6464

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.

over 1 year ago ·
6466

It must be cool with ajax alternation.

over 1 year ago ·
8013
Dlap 106

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.

over 1 year ago ·
12930
Cef1e696bb14143dfb0f5529f5fa5601

Hi, I implemented this but it's not working, any suggestions why:
http://hushmagazine.ca/
Thanks

over 1 year ago ·