Reputation: 2620

Recommended way to enable touch events in Bootstrap 3?

Now that Bootstrap 3 is out, what is the recommended option for enabling touch? As before, there aren't many touch events in the bootstrap.js, though it is supposed to be a mobile first framework.

The last thing I've found on github suggests using fastclick.js, but that was before the v3.0 release.

Upvotes: 7

Answers (3)

tomhre

Reputation: 315

Despite I believe bootstrap is a joke of a css framework (especially due to no multileveled navigation), I would probably agree with others to go with some different carousel if you have a choice.

From my experience JQuery mobile will work rather smoothly but my site was not built alongside jquery mobile and the css belonging to it really messed the things up.

<script>
    $(document).ready(function() {
        $('.carouselresp').carousel({'data-interval': 6000, 'data-pause': "hover"});
        var clicking = false;
        var currentMousePos = 0;
        var newMousePos = 0;

        $('.carouselresp img').on('mousedown', function(event) {
            clicking = true;
            currentMousePos = event.pageX;
        });

        $('.carouselresp img').on('touchstart', function(event) {
            clicking = true;
            var touchstart = event.originalEvent.touches[0];
            currentMousePos = touchstart.pageX;
        });

        $(document).on('mouseup', function(event) {
            clicking = false;
        });

        $('.carouselresp img').on('touchend', function(event) {
            clicking = false;
        });

        $(document).on('mousemove', function(event) {
            if (!clicking) {
                return;
            }else {
                if (event.pageX < currentMousePos) {
                    if ((currentMousePos - event.pageX) > 50) {
                        $('.carouselresp').carousel('next');
                        clicking = false;
                    }
                } else {
                    if ((event.pageX - currentMousePos) > 50) {
                        $('.carouselresp').carousel('prev');
                        clicking = false;
                    }
                }
            }
        });

        $('.carouselresp img').on('touchmove', function(event) {
            var touch = event.originalEvent.touches[0];
            if (!clicking) {
                return;
            }else {
                if (touch.pageX < currentMousePos) {
                    if ((currentMousePos - touch.pageX) > 50) {
                        $('.carouselresp').carousel('next');
                        clicking = false;
                    }
                } else {
                    if ((touch.pageX - currentMousePos) > 50) {
                        $('.carouselresp').carousel('prev');
                        clicking = false;
                    }
                }
            }
            event.preventDefault();
        });
    });


</script>

It works fine for me on android and iphone too, plus I am allowing the move event in browsers with no touch support.

I hope it helped.

TomHre

Upvotes: 0