javascriptscrolljqtouch

Programmatically slide / scroll jqTouch element


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?


Solution

  • 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