Disable body event and clicks when menu is open

[vanilla38]

Hello, i want to disable all links and onclick events when menu is opened, i also wonder if it's possible to disable bod scrolling during this period. Thanks.

[scottgallant]

My solution for this was to add an empty div over the content area while the tray is open. When the div is clicked, it hides itself and closes the menu. HTML

<div class="drawers">
    <div class="left-drawer"></div>
    ...stuff
</div>
<div id="content">
    <div class="prevent-click"></div>
    ...stuff
</div>

JS

// create snapper, adds a class to body when open and closes when tapped
var snapper = new Snap({
    element: document.getElementById('content'),
    addBodyClasses: true,
    tapToClose: true
});

CSS

/* Empty div to prevent interaction with content */
div.prevent-click {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    z-index: 10;
    overflow: hidden;
    display: none;
}

/* Show the empty div when the tray is open (only using left tray in this example) */
body.snapjs-left div.prevent-click {
    display: block;
}

JS

// hide empty div when clicked
$('.prevent-click').live( "click", function() {
    $(".prevent-click").hide()
});

[jakiestfu]

@jayd3e This is not the approach we'd want to take but this would be a good feature. We'd simply set the content's "pointer-events" property to "none", that way events don't register. Saving this for v2.0

[scottgallant]

pointer-events: none; is a more elegant solution but isn't well supported (>= IE9). Which is why I had to use the the empty div method above.

http://css-tricks.com/almanac/properties/p/pointer-events/

[mica16]

Hi,

I tried your solutions (both). However, it is broken when we drag the snap-content while the snap-drawer is opened (instead of just clicking on the toggle button). Indeed, the snap-drawer hides and the snap-content appears but the snap-content is still non-clickable. Dragging does not reset the trick, like if the .snapjs-left class was still present on the body, thus preventing any use of the app.

Are you aware of this? Any way to fix this?

[m4bwav]

Seems weird this issue isn't solved yet.