iPad/touch/swipe with Scroller

tommck

So, I'm using Scroller and I'm on an iPad.. I'd love to use iScroll 4 (http://cubiq.org/iscroll-4) inside the scroller.

I'm digging around seeing what it would entail, but I need to touch/swipe-enable Scroller.

Anyone have any tips?

tommck

Here's my status...

It makes me feel dirty hacking stuff like this up, but I really want the smooth acceleration and things that iScroll gives me.

I changed fnScrollToRow and added fnScrollToOffset to the Scroller.js:

[code]
"fnScrollToRow": function (iRow, bAnimate) {
var px = this.fnRowToPixels(iRow);
this.fnScrollToOffset(px, bAnimate);
},

"fnScrollToOffset": function (px, bAnimate) {
if (typeof bAnimate == 'undefined' || bAnimate) {
$(this.dom.scroller).animate({
"scrollTop": px
});
}
else {
$(this.dom.scroller).scrollTop(px);
}
},
[/code]

Then, I have this running this code on the first draw of the table:

[code]
// add an ID to the scroll body so we can pass that to iScroll
var scrollBody = $('div#shoppingCartItemsViewContainer div.dataTables_scrollBody');
scrollBody.attr('id', 'tableContainer');

// calculate a bottom offset to tell iScroll about
var scrollBodyHeight = scrollBody.height();
var tableHeight = (self.getTableElement()).height();
var offsetBottom = tableHeight - scrollBodyHeight;

_debug('debug', 'scroller height = ' + scrollBodyHeight + ', tableHeight = ' + tableHeight + ', calculated offset = ' + offsetBottom);

// wire up an onScrollEnd Event handler for iScroll
var scrollEnd = function () {
var iX = this.x;
var iY = this.y;
_debug('info', 'iScroll.onScrollEnd - iScroll coords = [' + iX + ',' + iY + ']');

// get the scroller control's top position
var scroller = _dataTable.oScroller;
var top = scroller.dom.scroller.scrollTop;

_debug('info', 'oScroller top = [' + top + ']');

// add the iScroll y-offset to it (it's negative, so subtract)
var newTop = top - Math.round(iY);
_debug('info', 'oScroller NEW top = [' + newTop + ']');

// scroll the scroller to the new position and fire the scroll update method
_dataTable.oScroller.fnScrollToOffset(newTop, false);
_dataTable.oScroller._fnScroll();

_debug('info', 'resetting iScroll position to 0,0');
this._pos(0, 0);
};

// init the iScroll
new iScroll('tableContainer', { hScroll: false, offsetBottom: offsetBottom, onScrollEnd: scrollEnd });
[/code]


When we scroll past the bottom, the scroller seems to jump backwards sometimes. I'm not sure if it was meant to scroll like this...

Any thoughts would be appreciated..

T

allan

You don't need any extra software to get scrolling to work in Safari in iOS with DataTables - just a two finger drag will do it (an obscure feature in Safari for iOS). The downside is that there aren't any scrollbars shown by default (in iOS 5 it appears that you can use CSS to have these scrollbars display) - for which you need 3rd party software - I guess that is why you are using it here? Scroller certainly hasn't been tested in this way, so I can't say if it would work or not - it might require a bit of debugging if you are seeing issues at the moment.

Allan

tommck

Looks like this is a bug... when using server-side data and issuing an fnScrollToRow(someNumberLargerThanTheNumberAlreadyLoaded), it doesn't work. It only scrolls to the bottom of the data that is there..

tommck

for some reason, nobody seems to like 2 finger scroll.. they want 1 finger scroll...

tommck

actually, 2 finger dragging doesn't seem to work for me either....

tommck

one problem with 2 finger dragging, it doesn't have acceleration and momentum support, which is a big deal when you've got a large list to get through.

tommck

looks like, rather than using my new method, I can set "scrollTop" = to the new coords I want on the scrollBody div

allan

[quote]tommck said: one problem with 2 finger dragging, it doesn't have acceleration and momentum support, which is a big deal when you've got a large list to get through.[/quote]

Agreed! The new scrolling options in iOS 5 should help with that since it will have momentum support. Until then, I guess it will require some library to integrate with Scroller in order to work as required, which might well involve some digging around in the code.

Allan

tommck

Yeah, I'm actually getting pretty far with my hacks :)

Do you have an iPad?

allan

I can get access to one for the odd bit of testing. Sounds like you are doing some interesting stuff :-)

Allan

tommck

If I get stuff to work, I'll send you the code I have. Do you agree that the fnScrollToRow issue I mentioned above is a bug?

allan

I'm not sure I quite understand - you've added fnScrollToOffset which looks fair enough - but what is the bug?

tommck

If the table only has 20 rows, and I tell it to scroll to row #60, it fetches new data and positions it so that the top row is row 21, not row 60. Are you not experiencing that?

allan

If the table only have 20 rows, how can you scroll to row 60? Or have I missed something?

tommck

I'm using Scroller to do virtual scrolling... the # of rows -currently- in the table is 20, but I want to scroll to the 60th row (there are hundreds of rows in the collection).

allan

Oh I see. In that case, I'm afraid I'm not hitting the same problem as you - when I use fnScrollToRow it jumps to the required position, regardless of the data source. I might be missing something in my setup possibly though, but I'm not sure what.

tommck

So, it stays at that empty spot and keeps loading data until the viewport is full? Hmm.. I must be doing something wrong...

tommck

By the way, I'm writing this as a separate plugin. Do you have a list of previously taken "cFeature" values?

allan

I've only got one on my local machine (which I'm not at at the moment, so can't post...) but generally speak no - there isn't a public list. It's something I mean to do, and might write a little blog post about at some point. Generally speaking plug-ins should be capital letters. Off the top of my head T (TableTools), R (ColReorder), C (ColVis) and S (Scroller). The others I think are initialised in other ways.

Allan