Android OS Support for DIV tags (touchscroll.js) touch screen device

[breakbred101]

The wonderful folks at Chris-Barr.com have supplied us with a very useful javascript to allow oscommerce to properly display DIV tags containg the overflow:auto property. The implementation of this script is beyond me, so Im asking the oscommunity to provide us via this thread a walkthrough on how the touchscroll.js should be installed. Based on this site it sounds relatively foreward but I cant seem to get it correct.

 

Scrolling a overflow:auto; element on a touch screen device

 

In mobile Safari on the iPhone, iPod Touch, and iPad (as well as the webkit based browser on Android phones) it's not immediately obvious how to scroll a div that has overflow:auto; set on it. If this were a desktop browser you would see scrollbars and be able to manipulate those or even use your mouse wheel. No such concepts exist on a touch screen device!

 

To scroll the entire page you just touch it and move your finger. But when you touch the element that would normally scroll, the entire page scrolls instead. This is a little bit broken in my opinion since there's no visual indicator that you aren't seeing all the content. However, if you are on a site and you know there's a scrollable div there is a simple (but not obvious) workaround. Simple use two fingers at the same time and scroll them in the same direction.

 

This works OK but like I said it's not obvious, there's still no indicator that the content is scrollable, and when you use more than one finger you might accidentally trigger some other gesture like scaling the page. I recently ran into this exact issue at work and came up with a pretty solid solution in javascript. I broke this down into two simple functions, but the last one is where the magic happens.

 

This first function simply attempts to create a new touch event. Only touch screen browsers like mobile Safari have these events, so if it doesn't throw an error then we are using a touch screen device. Otherwise it's probably a desktop browser.

 

http://www.seabreezecomputers.com/tips/scroll-div.htm seems to provide a walkthrough of the installation of this script, but i cant seem to implement it correctly. Im unaware what directory to install touchscroll.js for one thing, and Im not sure if even that is the issue.

 

Any help would greatly be appreciated, and Im sure others will find the walkthrough useful as well.