Question

I have a simple question about jqTouch. Is it possible to
programmatically slide jqTouch object?

Let say, for example, that I have a ul list of 100 li elements
sorted by time. When I create this list, I would like automatically
slide to li with current time – let say it is on position 50. How
can I do that? Is it possible?

In jCarousel for example you can sel scroll number and call .next().
How about jqTouch? Is it possible and if yes – how?

Answer 1

When you are creating the list, you can add a class, e.g. “currentTime” to the li you want to scroll to. then use the scrollTop function to scroll to the position of the li

function  scrollToElement(selector,animate) {
    //get the position of the li with class currentTime 
    var pos = $(selector).offset().top;
    if (animate){
        $('html,body').animate({ scrollTop: pos },'slow');
    } else {
        $('html,body').scrollTop(pos);
    }
}

You can bind it to one of the jqtouch page events like this. ‘#results’ is the page you are navigating to, using jqTouch.

$(function () {
    $('#results').bind('pageAnimationEnd', function (e, info) {
        if (info.direction === "in" && loadOnce) {
            scrollToElement('li.currentTime',animate)
        }
    });
});

If you are not using jqTouch, just call it on jquery’s document ready or anywhere else after your list is loaded in the DOM