iPad/touch/swipe with Scroller

iPad/touch/swipe with Scroller

tommcktommck Posts: 73Questions: 0Answers: 0
edited July 2011 in Plug-ins
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?

Replies

  • tommcktommck Posts: 73Questions: 0Answers: 0
    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
  • allanallan Posts: 55,045Questions: 1Answers: 8,638 Site admin
    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
  • tommcktommck Posts: 73Questions: 0Answers: 0
    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..
  • tommcktommck Posts: 73Questions: 0Answers: 0
    for some reason, nobody seems to like 2 finger scroll.. they want 1 finger scroll...
  • tommcktommck Posts: 73Questions: 0Answers: 0
    actually, 2 finger dragging doesn't seem to work for me either....
  • tommcktommck Posts: 73Questions: 0Answers: 0
    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.
  • tommcktommck Posts: 73Questions: 0Answers: 0
    looks like, rather than using my new method, I can set "scrollTop" = to the new coords I want on the scrollBody div
  • allanallan Posts: 55,045Questions: 1Answers: 8,638 Site admin
    [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
  • tommcktommck Posts: 73Questions: 0Answers: 0
    Yeah, I'm actually getting pretty far with my hacks :)

    Do you have an iPad?
  • allanallan Posts: 55,045Questions: 1Answers: 8,638 Site admin
    I can get access to one for the odd bit of testing. Sounds like you are doing some interesting stuff :-)

    Allan
  • tommcktommck Posts: 73Questions: 0Answers: 0
    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?
  • allanallan Posts: 55,045Questions: 1Answers: 8,638 Site admin
    I'm not sure I quite understand - you've added fnScrollToOffset which looks fair enough - but what is the bug?
  • tommcktommck Posts: 73Questions: 0Answers: 0
    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?
  • allanallan Posts: 55,045Questions: 1Answers: 8,638 Site admin
    If the table only have 20 rows, how can you scroll to row 60? Or have I missed something?
  • tommcktommck Posts: 73Questions: 0Answers: 0
    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).
  • allanallan Posts: 55,045Questions: 1Answers: 8,638 Site admin
    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.
  • tommcktommck Posts: 73Questions: 0Answers: 0
    So, it stays at that empty spot and keeps loading data until the viewport is full? Hmm.. I must be doing something wrong...
  • tommcktommck Posts: 73Questions: 0Answers: 0
    By the way, I'm writing this as a separate plugin. Do you have a list of previously taken "cFeature" values?
  • allanallan Posts: 55,045Questions: 1Answers: 8,638 Site admin
    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
This discussion has been closed.