2-way-iScroll icon indicating copy to clipboard operation
2-way-iScroll copied to clipboard

jump to a page directly

Open kiran-aghor opened this issue 13 years ago • 3 comments

I want to use this scroll for a news slider. I have a page with list of news titles. clicking on one of the news item will bring up the horizantal scrolling page. Is it possible to directly jump to a specified page in 2-way iscroll? For example - On the listview page, user clicks on 5th news item. It will go to a page that has 2-way iscroll in it but it should show that particular 5th page containing news item. Is this feature available?

kiran-aghor avatar Oct 12 '11 10:10 kiran-aghor

I still miss a scrollToPage method, but you may try with scrollTo(x, y, time). where x for example is pageNum * elementWidth and y is pageNum * elementHeight.

cubiq avatar Oct 12 '11 10:10 cubiq

I had the same problem and I solve it as follows

... //size of div var PageSize = parseInt($('.new-detail').css('width').replace(/[^-\d.]/g, '')); //jump to page var PaginaDespl = -(PageSize * news);

// property have different name depend the browser var div = document.getElementById('scroller-news-details'); var propiedad = getPropiedadACambiar(div);

//jump if (propiedad) div.style[propiedad] = "translate3d(" + PaginaDespl + "px,0px,0px)";

// I need this to work fine the scroll scrollHorizVert();

// get the property that I would like to change function getPropiedadACambiar(element) { var properties = [ 'transform', 'webkitTransform', 'msTransform', 'MozTransform', 'OTransform']; var p; while (p = properties.shift()) { if (typeof element.style[p] != 'undefined') { return p; } } return false; }

function scrollHorizVert() { myScroll = new TWIS('#wrapper-news-details');

// liberamos memoria
window.removeEventListener('load', scrollHorizVert, false);

}

alexmen avatar Nov 24 '11 12:11 alexmen

Hi I am trying with this function, hacked from the main iScroll script. It does scroll horizontally to the page, but vertical scrolling is disabled when I use it. Any suggestions gratefully received. Thank you. Hugh

scrollToPage = function (myScroll,pageX, pageY, time) {
    var that = myScroll, x, y;

   if (pageX == 'next') pageX = (that.currentPage + 1);
   if (pageX == 'prev') pageX = (that.currentPage -1); 

   if (pageX == 0)  {
      window.location.replace("../index.html")
    }

   else {
        if (that.options.onScrollStart) that.options.onScrollStart.call(that);

        x = -that.wrapperW * pageX;
        y = -that.wrapperH * pageY;


        if (x < that.maxScrollX) x = that.maxScrollX + 1;
        if (y < that.maxScrollY) y = that.maxScrollY - 1;

        that.scrollTo(x, y, time || 400);
               that.currentPage = pageX;
        }
    };



$(".next").bind('click', function () {
    scrollToPage(myScroll,'next', 0, 400);
    return false;

});
$(".back").bind('click', function () {
    scrollToPage(myScroll,'prev', 0, 400);
    return false;

});

storynory avatar Nov 30 '11 11:11 storynory