“Why bother?” You may ask. First of all because it’s there, and it can be done. Secondly I don’t think that web applications for mobile devices are dead. Web apps are replacing native apps on your PC (google docs, maps, calendars, Zoho, Basecamp, you name it), why not on mobile? G3 data contracts are still expensive and connection speed barely acceptable, but things are evolving fast. Palm agrees so much with me that built an entire device around the webkit.
The whole script is based on the code I wrote for content scrolling inside a container. (It has been recently optimized, update it if you use it). All I needed to add was the alphabetical right control to quickly browse through the contacts.
The ABC is a ul list absolutely placed on the screen. onTouchMove the code checks which letter our finger is on with:
var theTarget = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
I had never heard of elementFromPoint before and I regret about it. It’s a great function to get an element reference from its XY coodinates.
Now that we have the letter we are pointing at, all we have to do is to find the position of that letter heading on the contact list. Since I gave each headings the id of the corresponding letter (so id for letter A is id="A"), finding their Y coordinate is easy as document.getElementById(theLetter).offsetTop.
There’s not much to add I’m afraid. You can check the live demo (it works on simulator, iPhone and iPod touch, not on Safari for Mac.) or watch the screencast. The script with graphics is also available at the bottom of this post.
Now all you need to do is to add the search functionality. It’s quite easy, put all your contacts in an array and you are half way 
There’s another cool thing we can do with the versatile scrolling code: the spinning wheel (slot machine alike) select box. Maybe next time I’ll talk about it.
Very impressive. I was surprised how quickly it ran on my iphone
I have tried to put the script into my iPhone application, how is it possible to retrieve the selected line and highligt the line when pressed, like it does in the Contacts on the iPhone.When pressed i want to return to the calling webpage with the return value.
Super Job
It works and looks great! This would be especially handy to emulate the functionality but also try other color and graphic styles.
One quick thought – doesn’t the iPod Touch/iPhone only show letters corresponding to visible headers? So in the example, it should only contain A B C D E L O and W rather than every letter. But maybe I’m wrong. Still very nice though, and filtering out unused letters doesn’t sound like too difficult to add if desired.
Great script!
One issue though; when it’s used inside a fullscreen webapp (one with a webclip on the home screen) the script forces Safari to be opened once a link is clicked. So instead of staying inside the fullscreen webapp, the user is brought towards Safari.
Would be great if this could work inside fullscreen!
@Jeroen Onstenk, well that’s not actually a bug but a fullscreen webapp feature. To prevent opening a new safari window you have to apply evt.preventDefault(); to all your anchors onclick events and do some ajax instead.
Well it’s actually curious right now, because when I restarted the iPhone today it did worked without opening Safari.
But thanks for the tip. Let’s see if I can work with that.
Ok, I was not correct in my last comment. It did worked, but only in one way;
Page C is a fullscreen webapp on my homescreen. From page C I made a link towards page A. From page A there is a link to Page B (Page B is the contact list page) and from there I could go (without opening Safari) to page C again. Page C was already loaded inside the fullscreen.
But any other page would open Safari. While normally any page would open inside the fullscreen webapp feature.
So thats what happened.
@ Matteo
Could you be a little more precise please with: “you have to apply evt.preventDefault(); to all your anchors onclick events and do some ajax instead.”
Because I actually don’t know where to start.
Sorry guys, I’m always in a hurry when publishing my scripts and I tend to be little explanatory. I’ll post a complete functional revisited contact list in the next couple of days and I’ll try to do a step-by-step usage tutorial in that occasion.
That would be great Matteo! Highly appreciated.
Thnx!
@Jereon,
Most fullscreen apps have this problem. What you can do is on load you get every A element using getElementsByTagName and check for those elements with a href attribute. Then you apply those with the attribute an onclick function that sets the window.location to the href value of the element. This overrides the normal href and opens it in the fullscreen window.
I love this script. I am having an issue though – I’m trying to load a contact list in a hidden iframe – the problem is that most of the elements are showing up on top of the visible page. Any ideas?
Relevant html:
When I look at the above from my Touch I see the content (alpha headers and list items, but not the header bar or background)
Actually looks like my issue is with the scrolling div code – and it sounds like an update (v3.0) should be coming out any day – so I’ll wait to see if that fixes it.
The html that did not publish before (using square brackets this time):
[html][head]
[script type="text/javascript"]
function switch_for_5_seconds()
{
var o = document.getElementById(“my_frame”);
if (o != null) {
o.style.display = “”;
setTimeout(“document.getElementById(‘my_frame’).style.display = ‘none’;”, 5000)
}
}
[/script]
[/head][body]
[span onclick="switch_for_5_seconds()"]Click Me[/span]
[iframe id="my_frame" src="http://cubiq.org/dropbox/iphonescroll.html" style="display:none; position:absolute; width:320px; height:100%; top:0; left:0;"][/iframe]
[/body][/html]
Magical csript , I want know is it possible to make two div synchronized scrolling . and how achieve it . Thanks !
is there an update for it to work on 3.0?
never mind i see it, duh
Hmmm… confusion. The online demo works well, but when I download the script and send it over to my site (without changing anything) it displays the initial page, but one can’t scroll down and the ABC doesn’t work either. What am I doing wrong?
Sorry Stefan, my fault. The zip does not contain the latest iscroll. I’ll update the archive right-away.
Did the Contact List Script get updated for iScroll 3.x ?
If so I’m having a struggle to find it.
Any pointers grateful received!
(p.s. terrific script)
Doesn’t seem the zip has been updated as the last time the iscroll has been modified was on the 12th of february 2009.
Great work Matteo by the way !
OK. For those trying to get this script working with iScroll 3.x (who doesn’t want Android support
you need to update the scrollTo calls because they now take 3 parameters not 2. Just add 0 as the first parameter to all 3 scrollTo calls.
@Dave
Thank you so much for you comment! Adding 0 as the first parameter did indeed fix the scrolling problem.