Making HTML Pull to Refresh List for mobile devices with pure JavaScript (no jquery!)

Heyy everyone,

It's kinda sudden and I'm at work, so i'll make it brief. The problems arrived when I was designing the UI of an android app using HTML (yeah ! checkout audroid). I was using the jquery mobile framework, which is one hell of slowness (when compared to native interfaces of course). And i wanted to put the pull-to-refresh feature to all of the HTML lists in ma app. But that requires attaching another script to the already heavy jquery framework which just burst it out :| too damn much

So I thought of decorating my own HTML list with using only PURE Javascript, so that i can implement a simple version of a pull-to-refresh list. And it turned out quite simple :)

View Demo : http://manzzup.github.io/demo/pull-to-refresh/

Target

Making a simple script to update a given HTML list to a pull-to-refresh list with using only javascript.

Things to note

• Mobile web browsers already come with a new set of javascript events to handle touch activity, including multi-touch
• Read about touchstart touchend and touchmove events
• We would also make this widget work on desktop browsers by handling click events

Mechanism

So how to do the pull really? I have no idea how others do it, so I implemented my own way. That is we grab the whole set of li tags by its parent ul and change (increase) its css top value to give the pull like effect. Let's take it step by step

1) Lets get our HTML List done, with some prettify style as well

NOTE:
The ul has an id called touchlist, since it's easier to grab the element from there.
And another div called "touchloader" is also added. As you might ave correctly assumed, it's the little text that's shown to user to say that the pull has triggered some loading process.



2) Now lets put our script to the script part

The code itself is pretty explanatory, the steps we do are
(i)  First note the initial position of the list and the point where we touch the list
(ii) Then when the finger moves while touching, we update the top of the list accordingly, downwards
(iii) When the finger is removed or touch event breaks, we slide the list upwards to the initial position, we try to make it nice by adding CSS3 transition
(iv) A loader div is displayed do notify the user that something is going on :)


That's it! But one thing is that this doesn't work on desktop browsers since they donot ave the touch events, so lets patch it by adding the mouse events to the list as well. Here's the final code. I added it to a jsFiddle to present you a nice demo :D


YEYI! Now you have some awesome list to do the refreshing, just note that the list are pretty much everything that the android apps containing of although it doesnt look like that. So use wisely !

Cyah again