how to make a phonegap selectable scrollable div list

Question

As the title says. I want to make a list of div elements inside a div. I want to be able to scroll the list up and down, and when the list is not scrolling anymore, i want to be able to click the listed elements do to something. I cant figure out how to do this.

the touchmove event executes whenever the user touches the div, even if the div its scrolling. THen i cant figure out how to make let the program know that the div isnt scrolling anymore, so the next touch on the elements will trigger a non scrollable event.....

EDIT:

what i have so far is this... However this is a quick "fix" and its not working as intended. For example if you scroll quickly up and down, then the div will think you pressed on one of the elements..

exerciseWrapper is the elements inside the scrolling div. Each element is wrapped around exerciseWrapper.

$('.exerciseWrapper').on('touchstart',function(){

        touchstart=true;
                setTimeout(function(){

                    touchstart=false;           
                    }, 100); 

    });

    $('.exerciseWrapper').on('touchend',function(){

        if(touchstart)
        {
                $('.exerciseWrapper').not(this).css('border-color','black');
                $(this).css('border-color','orange');
        }

    });

score 0 · Answer 1 · answered Apr 01 '13 at 00:24

Ok so i finally figured this one out.. Reason why i couldnt wrap my minds around the solution on this, was because i couldnt get other events then eventstart and event end to work... At the time of writing i still cant get the other events like eventcancel and eventleave to work. However eventmove works and i solved the problem using this event. eventmove keeps updating the element its linked when you move your finger. Then i had a variable of touchmove to constantly be true if i am scrolling my div (with touchmove event). WHen i stop moving i can clik on selected element again and use a normal eventstart event.. This is my working code:

var touchmove=false;
function AddExercisesEvents()
{
    $('#exerciseMenu').on('touchmove',function(){

            touchstart=true;    
                        $('h1').text("move");

        });

    $('.exerciseWrapper').on('touchend mouseup',function(event){
                    event.stopPropagation();
                    event.preventDefault();
                    //  $('.exerciseWrapper').off();

                if(event.handled !== true)
                {
            touchstart=false;

            //ENTERING editExercise Menu..!
            if(!touchstart)
                {
        //insert magic here 
                                alert($(this).attr('id'));


                }


                }
                    return false;
                                 });
}

how to make a phonegap selectable scrollable div list

1 Answers1