Menu icon Foundation
Adding swipe event listeners to elements

I went looking for documentation around this and couldn't find any. 

I wanted to make off canvas close by swiping. After digging through the code, I found that foundation.util.touch.js add a function to jQuery. 

I added it to the body as below. The function doesn't appear to return a jquery object so can not be chained ( possible fix?? )

    var $body = jQuery('body');
    $body.addTouch();

Then you can do something like the following: 

                nav.$offCanvas.on('closed.zf.offcanvas', function() {
                    $body.off('swipeleft');
                });

                nav.$offCanvas.on('opened.zf.offcanvas', function() {
                    $body.one('swipeleft', function(event) {
                        nav.$offCanvas.foundation('close');
                    });
                });

Hope this helps someone. 

 

 

swipeoff canvasjquery

I went looking for documentation around this and couldn't find any. 

I wanted to make off canvas close by swiping. After digging through the code, I found that foundation.util.touch.js add a function to jQuery. 

I added it to the body as below. The function doesn't appear to return a jquery object so can not be chained ( possible fix?? )

    var $body = jQuery('body');
    $body.addTouch();

Then you can do something like the following: 

                nav.$offCanvas.on('closed.zf.offcanvas', function() {
                    $body.off('swipeleft');
                });

                nav.$offCanvas.on('opened.zf.offcanvas', function() {
                    $body.one('swipeleft', function(event) {
                        nav.$offCanvas.foundation('close');
                    });
                });

Hope this helps someone. 

 

 

Chris Romero over 1 year ago

This was super helpful. Thank you!