CODEWITHSUNDEEP
jqueryjquery-mobilejquery-animate
user1937021
user1937021

Reputation: 10781

Jquery mobile conflicting with scroll animation

<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

I have included JQuery mobile in my site to enable the tap event (above), but having done that it seems to be conflicting with an .animate I have in place in the code below, instead of animating nicely to the top of the element it jumps to the top of the element. Can anyone see what is wrong?

           $(document).on('tap click', '.team-btn', function(event){                          
             event.preventDefault();            
                    $('html, body').stop(true,true).animate({
                         scrollTop: $(".team-overlay").offset().top - 20
                     }, 2000);  
        });

Upvotes: 0

Views: 617

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Including jQuery Mobile just like that is a big mistake, mostly because it can cause you a lot of problems if you dont know how it work. It will basically take over your web app.

If you only need tap event then go to this link: http://jquerymobile.com/download-builder/

And rebuild jQuery Mobile, use ONLY tap functionality (called Touch - Touch events including: touchstart, touchmove, touchend, tap, taphold, swipe, swipeleft, swiperight, scrollstart, scrollstop). Builder will select other dependencies.

This will remove unwanted functionalities.

Or skip jQuery Mobile and use Hammer.js, it has a larger set of supported touch, multitudinous and swipe events, and it works great with jQuery.

Your syntax would look like this:

$(document).hammer().on("tap click", ".team-btn", function(event) {
    // Your code
});

Upvotes: 1

Related Questions