CODEWITHSUNDEEP
javascriptjqueryhtmltouchswipe
Shailesh Bhat
Shailesh Bhat

Reputation: 152

How to handle Swipe event using jQuery and touchswipe

plunker demo shows swipe event functionality with touchswipe library. I need to able to swipe, after scrolling the page completely(horizontal).(Now it is swiping , if you just move the mouse/swipe with finger) And the new page which I get after swiping, should have different background color for entire page.(In given Demo, it is HtmlPage1.html) Can anyone help me out?... 

<script type="text/javascript">
    var swipeOptions = {
        allowPageScroll :"auto",

    fingers:1,
    swipeLeft:swipeLeft,
    swipeRight: swipeRight
    };
    var threshold = 800;
    $(function()
    {
        imgs = $("#slide1");     
        imgs.swipe(swipeOptions,threshold);
    });
    function swipeStatus(event, phase, direction, distance) {

        debugger;
    }

    function swipeLeft(event,direction, distance, duration, fingerCount, fingerData, currentDirection) {

        $("#x1").text("You Swiped " + event + distance + "_pixels distance " + duration + "_time in units " + fingerCount + fingerData + " in " + currentDirection + " direction");


    }
    function swipeRight(event,direction, distance, duration, fingerCount, fingerData, currentDirection) {

        $("#x1").load("HtmlPage1.html").css('background-color', 'red');
    }

</script>
</head>
<body>
    <div id="slide1">
        <div id="x1">

        </div>   
    </div>

</body>
</html>

I have UPDATED the Plunker Demo and code. Now I need to call swipeLeft/swipeRight method in the line

alert('Left Reached!');

ie. instead of alert(), I need to call swipe methods of touchswipe.. How to achieve this feature..can anyone help me out?.. 

var swipeOptions = {
        allowPageScroll :"auto",

    fingers:1,
    swipeLeft:swipeLeft,
    swipeRight: swipeRight
    };
    var threshold = 800;
    $(function()
    {
        imgs = $("#slide1");


        imgs.swipe(swipeOptions,threshold);
        imgs = $("#slide2");
    });

$(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            alert("bottom!");

        }
    });
    $(window).scroll(function () {
                if ($(window).scrollLeft() + $(window).width() == $(document).width()) {
               alert('Left Reached!');
            }
        });

    function swipeStatus(event, phase, direction, distance) {

        debugger;
    }

    function swipeLeft(event,direction, distance, duration, fingerCount, fingerData, currentDirection) {
 window.scrollTo(event.pageX, 0);       
        $("#x1").text("You Swiped " + event + distance + "_pixels distance " + duration + "_time in units " + fingerCount + fingerData + " in " + currentDirection + " direction");


    }
    function swipeRight(event,direction, distance, duration, fingerCount, fingerData, currentDirection) {
      window.scrollTo(-event.pageX, 0);
        $("#x1").load("HtmlPage1.html").css('background-color', 'red');
    }

Upvotes: 1

Views: 1107

Answers (0)

Related Questions