Mar 08 2013

Hook.js für jQuery – Pull To Refresh For The Web

Advertisement

If my memory doesn’t fool me, it was Apple who invented this. Or was it Loren Brichter for his Tweetie client? I really can’t say for sure, but that does not matter anyway. “Pull to refresh” definitely is a functionality that can be seen as a standard nowadays, at least when we look at mobile clients, foremost smartphones and tablets. Jordan Singer and Brandon Jacoby have just recently come up with a similar method of equipping websites with a “Pull to refresh”.

hookjs-homepage-w550

Hook.js – “Pull to refresh” In Free Interpretation

“Pull to refresh” as we know it functions like this: we scroll down the touchscreen with a finger and just don’t stop at the top. We bend the app, iOS even shows a resembling animation and let it loose. In doing so, a text appears instructing us to – well – pull to refresh. Then new contents are loaded.

Thought for the web this would correspond to scrolling higher than the top on any given website. That is not how Hook.js functions.

To use “Pull to refresh” in Hook.js interpretation, you need to scroll down a little and then scroll back up again. I doubt that many people will understand this. Intuitive is not the right word to subscribe this behavior. I don’t see a flood of excitement crushing the shores of the Github repository of Hook.js. But, the idea really is interesting, and why not should there be a developer right now in front of this screen, having the sparking idea to make this idea even more interesting…

Hook.js needs jQuery, itself weighing a mere 2,5k. Integration in a website is a snap:

1
2
3
<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>

Directly after jQuery, the accompanying stylesheet needs to be loaded, the JS follows. The download also contains a PNG backgropund and the spinning circle as a GIF for the animated loading effect. You can see these in action on the demo page.

The real deal gets done by these lines, put in right after the body tag:

1
2
3
4
5
6
<div id="hook">
    <div id="loader">
        <div class="spinner"></div>
    </div>
    <span id="hook-text">Reloading...</span>
</div>

As you can see, you can easily change the text shown at reload. Of course Hook.js only makes sense on websites that need it or can at least make proper use of it. The demo site can get annyoing after a while as each time you scroll back to the top a reload is initiated, except there’s nothing that needs refreshing.

Nevertheless, the idea is interesting and carries the potential to inspire even more interesting ideas. As with most of Github’s projects, contribution is appreciated.

Related Links

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • Bas, 09 March 2013

    It was Lauren Brichter. Actually, Twitter has the patent for this.

  • redwall_hp, 09 March 2013

    Actually, Loren Brichter holds the patent for pull-to-refresh. https://twitter.com/lorenb/status/21684045608

    I don’t believe he sold the patent along with Tweetie when he joined Twitter.

search form
 
image description image description