Clicking on canvas container doesn't close slidebars

[amichel86]

Hello, thank you for your plugin!

I am migrating from the 1st version to the newest. I am able to toggle the slidebars when clicking on my hamburger button but it looks like classes are not applied to the <div canvas="container"> so that if I click the blue zone, the menu closes. What am I missing? Thanks!

` // Slidebars (function ($) {

    var controller = new slidebars();
    controller.init();

    // Open left
    $('.sb-btn').on('click', function (event) {
        event.preventDefault();
        event.stopPropagation();

        controller.toggle('sb-left');
    } );

}) (jQuery);`

[amichel86]

I just looked at your source on slidebars' website, it looks like we have to trigger these controls manually. Correct?

[moondawg69]

I am too confused on this, I have the following markup and it's driving me MAD ;) - on mobile, clicking on the canvas does not close the menu :(

I have a canvas div:

<div canvas="container">    <!-- start of main canvas -->
Everything goes in there inc one offcanvas menu....
<div off-canvas="id-1 left push">
{% include '_mobile-menu' %}    
</div>
</div>

Then the script call:

<script>
      ( function ( $ ) {
        // Initialize Slidebars
        var controller = new slidebars();
        controller.init();

                // Add close class to canvas container when Slidebar is opened
                $( controller.events ).on( 'opening', function ( event ) {
                    $( '[canvas]' ).addClass( 'js-close-any' );
                } );

                // Add close class to canvas container when Slidebar is opened
                $( controller.events ).on( 'closing', function ( event ) {
                    $( '[canvas]' ).removeClass( 'js-close-any' );
                } );

        // Close any
                $( document ).on( 'click', '.js-close-any', function ( event ) {
                    if ( controller.getActiveSlidebar() ) {
                        event.preventDefault();
                        event.stopPropagation();
                        controller.close();
                    }
                } );

                // Close Slidebar links
                $( '[off-canvas] a' ).on( 'click', function ( event ) {
                    event.preventDefault();
                    event.stopPropagation();

                    var url = $( this ).attr( 'href' ),
                    target = $( this ).attr( 'target' ) ? $( this ).attr( 'target' ) : '_self';

                    controller.close( function () {
                        window.open( url, target );
                    } );
                } );

        $( '.open-menu' ).on( 'click', function ( event ) {
          // Stop default action and bubbling
          event.stopPropagation();
          event.preventDefault();

          // Toggle the Slidebar with id 'id-1'
          controller.toggle( 'id-1' );
        } );
      } ) ( jQuery );
    </script>

I have gone over the samples and help, I cannot see why?

[amichel86]

Here's how I was able to do it.

• Your mobile menu should be outside the canvas#container div
• My trigger button HTML looks like this: <a href="#" class="sb-btn"><i class="fa fa-bars"></i></a>
• My slidebars menu HTML looks like this:

Finally, the JS code `(function ($) {

    var controller = new slidebars();
    controller.init();

    // Open left
    $('.sb-btn').on('click', function (event) {
        event.preventDefault();
        event.stopPropagation();

        controller.toggle('sb-left');
    } );

    $( document ).on( 'click', '.js-close-any', function ( event ) {
        if ( controller.getActiveSlidebar() ) {
            event.preventDefault();
            event.stopPropagation();
            controller.close();
        }
    } );

    // Add close class to canvas container when Slidebar is opened
    $( controller.events ).on( 'opening', function ( event ) {
        $( '[canvas]' ).addClass( 'js-close-any' );
    } );

    // Add close class to canvas container when Slidebar is opened
    $( controller.events ).on( 'closing', function ( event ) {
        $( '[canvas]' ).removeClass( 'js-close-any' );
    } );

}) (jQuery);

`

Hope this helps you out!

[moondawg69]

Thank you for taking the time, I replicated yours and still no luck. I'll have to remove some other JS and see if that's causing a conflict somewhere.

[amichel86]

No problem!

[moondawg69]

Been through everything, removed everything, check z-indexs.. using the Foundation 6.3 flexgrid.. nope, doesn't work on iOS Safari. So put a close button inside the mobile menu off canvas.

Thanks anyway. Bizarre...

[adchsm]

@amichel86 Glad you got the problem sorted :) I'll get around to including some more demos to the download eventually.

@moondawg69 Do you have a demo I can see? I might be able to help you out then.

[amichel86]

@adchsm to be honest I preferred the previous version for its simplicity, it did what I wanted without a lot of JS but great work :)

What are the main differences between V1 and V2?

[rhinorck]

Thanks @amichel86. I too was having issues getting the menu to close. Your solution up there works perfectly.

[amichel86]

It looks like the closing when clicking on the canvas doesn't work on Chrome in iOS - Anyone has found a solution?