May 1, 2009

Scrolling individual elements in hybrid or web applications

Posted in Uncategorized tagged , , , , , , , , , , , , 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);

}

}

Advertisements

7 Comments »

  1. hkabir said,

    function load()
    {
    dashcode.setupParts();
    makeScrollable(document.getElementById(‘view1′));
    makeScrollable(document.getElementById(‘view2′));
    makeScrollable(document.getElementById(‘view3′));
    }

    In the above code it seems that scrolling is only possible if elements (view1, view2,…) are created in dashcodes: “dashcode.setupParts();”. If I create a html division id like , , , then would it be possible make it work by replaceing view1, view2, view3 with mydiv1, mydiv2, mydiv3. I tried it; but for some reason it seems not working.
    I want to display the content of a large html file divided into iphone-screen-size pages using division id’s so that people can see the content just like swiping the pages.

  2. Naresh kumar said,

    its really good…..its there any parts for scroll in dash code

    • tetontech said,

      Dashcode doesn’t have any scrollable parts for the iPhone. Since the iPad uses a different set of parts there is a scrollable part for it.

  3. Naresh kumar said,

    i used this code in dash code application but its working pls help mw sort out this issue….

    Thanks

  4. TechFreak said,

    does this code requires Quick connect 1.5 installed?
    Also,how is one supposed to use it in Dashcode?
    i tried copying this code in the main.js file in my dashcode project,but it’s showing some errors.

    • tetontech said,

      This is very experimental code. It is slow. Try to use some other design. If you need buttons to show and yet still be able to scroll try the native footer. It will work better for you. The CPU of the iPhone/touch isn’t quite fast enough for this approach. Maybe it will get better in the future.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: