How can i dynamically enable and disable snap.js (by jakiestfu)

Question

I am using jquery to dynamically enable or disable snap.js like this:

$(window).resize(function () {
    if ($(window).width() < 1024) {
        snapper.enable();
    } else {
        snapper.disable();
    }
});

But this doesnt seem to work. I think this has something to to with not using the event handler but i have no idea how.

thanks in advance!

edit:

this also doesnt seem to work:

addEvent(window, 'resize', function(){
     if ($(window).width() < 1024) {
        snapper.on('drag');
    } else {
        snapper.off('drag');
    }
    });

score 1 · Answer 1 · answered Mar 10 '14 at 21:22

1

Just don't init snap.js when viewport is greater than 1024px. Why holding a reference to an instance of something, that never will be get used?

Or do: snapper.off('drag');

answered Mar 10 '14 at 21:22

TorchMan

274
3
12

I already tried that, but (for example) on ipad when in portret view i want the snapper to be enabled and in landscape view i want to disable it.(because of a bootstrap menu break point) Once i init snap.js, it will always be enabled, even when you change the view. (same goes for resizing your browser window). Ill give snapper.off('drag'); a try and let you know if it works. Tnx for your answer! – user3329751 Mar 20 '14 at 08:36

score 1 · Answer 2 · answered Dec 16 '14 at 18:39

1

how you get snapper variable? If you do new Snap in each resize - it is the problem. You must save the snapper

answered Dec 16 '14 at 18:39

RouR

6,136
3
34
25

I get the snapper variable like this: var snapper = new Snap({ element: document.getElementById('content'), touchToDrag: false, }); – user3329751 Dec 19 '14 at 08:14

score 0 · Answer 3 · answered Apr 27 '16 at 21:32

I had this issue too (snapper.disable(); doesn't appear to do anything) and the only way I found to 'disable', and then 're-enable', the Snap navigation was to use the inbuilt ignore-this-area function and then use css media queries to also hide the button that was triggering the nav.

var snapper = new Snap({
    element: document.getElementById('content')
});

$(window).resize(function() {
    //initialise navigation
    if ($(window).innerWidth() >= 968) {
        $('body').attr('data-snap-ignore','true');
    } else {
        $('body').removeAttr('data-snap-ignore');
    }
});

This disables the dragging for the whole screen (but not the function), so it is effectively hidden.

How can i dynamically enable and disable snap.js (by jakiestfu)

3 Answers3