I love webapps, but somethings gotta give… but not splitview. Split View is the thing in iPads that makes it different in navigating through content on a large touch screen device. It provides a way of allowing navigation with content browsing. However, this seems to be largely done only by a few companies/people, or through the use or large cumbersome UI kits.

Few has done it on their own, but i can’t seem to find any sample code shared or referenced. So in the end, i wrote my own.

The basic idea of the code is to
1) Have all the DIV tags allocate main areas of the display
2) Use nested DIV tags within the allocated areas to hold the content
3) Prevent event propagation when any item is touched
4) If the correct item is touched, track the movement in the X or Y direction (this should mainly be in the Y direction if scrolling)
5) Do the necessary checking for boundary problems and limits of translation
6) Limit the frequency of tracking the touch movement to prevent noise
7) Make use of webkit transitions and transforms for hardware acceleration
8 ) Create overflow transitions for the de/acceleration of the layer so that it looks more natural when you flick the layer

Here is the sample HTML. One single file, and 127 lines of code. Works great on my iPad. Does all of the above. iPad Splitview HTML file.
Want to see how it works on an iPad? Go to http://himiko.dnsalias.net/ws/splitview/ .

Comment: Some might ask why i didn’t make use of event listeners. Well, i didn’t coz i wanted to be able to specifically pass the IDs that i want to animate over to a single function that handles everything for me. Implementing the ability to scroll would then be just a matter of making sure the various ontouch events are attached to the correct DIVs. Different strokes for different folks i guess, but it works better for me this way.

Enjoy!