May 1, 2009

Scrolling individual elements in hybrid or web applications

Posted in Uncategorized tagged CSS, element, iPhone, ipod, JavaScript, open, QuickConnect, Safari, scroll, source, transition, UIWebView, WebKit at 6:24 pm by tetontech

A request has been made to show how individual elements in a hybrid or web application can be scrolled on the iPhone.  I have included some code below that has all of the JavaScript requried to accomplish this.  It comes from the QCUtilities.js file of QuickConnect iPhone 1.5 release that will be posted within a couple of days.

Because it is from QuickConnect it includes the ability to add request handling for when the user touches the screen in preparation for scrolling, as well as each time the finger is moved and when the scroll action is complete.  If you want to use this code outside of QuickConnect then remove everything regarding the startDragCmd, dragCmd, and dropCmd parameters.

If you want to use this within an older version of QuickConnectiPhone place the code in your version of the QCUtilities.js file and it works.

This approach uses the CSS transitions, proposed for HTML 5,  available in WebKit instead of the standard JavaScript approach since that approach is much to slow for both the iPhone and iPod touch devices.

To make an element scrollable call the makeScrollable function and pass the element you want to be scrollable as the first parameter.  If you want the element to not be scrollable below its original y axis location pass true as the second parameter of makeScrollable.  Here is the onload event code from the scrollingElements example of the  upcoming QuickConnectiPhone 1.5 release that sets three views in a view stack to be scrollable.

Making elements scrollable

function load()

{

dashcode.setupParts();

makeScrollable(document.getElementById(‘view1’));

makeScrollable(document.getElementById(‘view2’));

makeScrollable(document.getElementById(‘view3’));

}

Scrolling Functions to Add

/*

* Pass any DOM element to this function to make it scroll

* The *Cmd parameters are optional commands to be handled for

* scroll events.

*/

function makeScrollable(anElement, scrollBothUpAndDown, startDragCmd, dragCmd, dropCmd){

anElement.ontouchstart = prepareScroll;

anElement.ontouchmove = scrollIt;

anElement.ontouchend = scrollDone;

anElement.scrollBothUpAndDown = scrollBothUpAndDown;

//do not set or reset the commands if none are passed in.

if(startDragCmd){

anElement.startDragCmd = startDragCmd;

}

if(dragCmd){

anElement.dragCmd = dragCmd;

}

if(dropCmd){

anElement.dropCmd = dropCmd;

}

}

/*

* This function is triggered each time an ontouchmove event is

* fired for an element that has been passed to makeDraggable.

*/

function scrollIt(event)

{

stopDefault(event);

this.y = event.targetTouches[0].clientY – this.offsetY;

if(this.lastY){

this.y += this.lastY;

}

if(this.scrollBothUpAndDown || this.y < 0){

this.style.webkitTransform = ‘translate(0px, ‘ + this.y + ‘px)’;

}

else if(this.y >= 0){

this.style.webkitTransform = ‘translate(0px, 0px)’;

}

if(this.dragCmd){

var params = new Array();

params.push(event);

params.push(this);

handleRequest(this.dragCmd, params);

}

}

/*

* This function is triggered every time an ontouchstart event is

* fired for an element that has been passed to makeDraggable.

*/

function prepareScroll(event)

{

stopDefault(event);

//store off any timing and duration set anywhere else in the app

//and turn them off so they don’t interfere with the scrolling

this.timing = this.style.webkitTransitionTimingFunction;

this.style.webkitTransitionTimingFunction = null;

this.duration = this.style.webkitTransitionDuration;

this.style.webkitTransitionDuration = null;

this.touches = event.targetTouches;

this.offsetY = event.targetTouches[0].clientY;

if(this.startDragCmd){

var params = new Array();

params.push(event);

params.push(this);

handleRequest(this.startDragCmd, params);

}

}

/*

* This function is triggered every time an ontouchend event is

* fired for an element that has been passed to makeDraggable.

*/

function scrollDone(event)

{

//this.ontouchmove = null;

//this.ontouchend = null;

if(this.scrollBothUpAndDown || this.y < 0){

this.lastY = this.y;

}

else{

this.lastY = 0;

}

//restore any timing or duration that was set anywhere else in the app

this.style.webkitTransitionTimingFunction = this.timing;

this.style.webkitTransitionDuration = this.duration;

if(this.dropCmd){

var params = new Array();

params.push(event);

params.push(this);

handleRequest(this.dropCmd, params);

}

}

Permalink 7 Comments