stephband / jquery.event.swipe

jQuery custom events swipeleft, swiperight, swipeup and swipedown
stephband.info/jquery.event.swipe
446 stars 180 forks source link

Using Swipe To Slide A DIV Up Or Down #6

Closed eat-sleep-code closed 11 years ago

eat-sleep-code commented 11 years ago

I am trying to use the jquery.event.swipe plugin to expand and collapse a DIV on my page. I am having trouble getting the swipe events to fire.

On my page I have:

<div id="slidingContainer" class="sliding-container">
    <span id="slidingButton" class="toggle-button">view</span>
    <span>my title goes here</span>
    <br />
    <span>my content goes here</span>
    <br />
</div>

and

<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.10.1.js"></script>
<script src="/Scripts/jquery.event.move.js"></script>
<script src="/Scripts/jquery.event.swipe.js"></script>
<script src="/Scripts/custom.js"></script>

In custom.js I have the following.

$(document).ready(function () {
    var indication = $('.slidingContainer')

    indication
    .on('swipeup', function (e) {
        alert("Swipe Upwards");
    })
    .on('swipedown', function (e) {
        alert("Swipe Downwards");
    });
});

I would think that when I swipe up or down the alert box would pop up -- showing me that the event was firing -- but it doesn't. Any ideas?

stephband commented 11 years ago

You have the class 'sliding-container' but are trying to select the class 'slidingContainer'.

eat-sleep-code commented 11 years ago

That should have been obvious, but I overlooked that. Thank you. It is working now.