Ons-splitter-side swipeable disable

Maxim Van de Wynckel

Hey there!

I switched from ons-sidebar to ons-splitter-side to make it easier to support tablets.
https://onsen.io/v2/docs/js/ons-splitter-side.html
However I have a question:

On my login screen I don’t want to show the splitter-side. For now I use this

window.enableMenu = function(swipeable){
    var menu = document.getElementById('menu');
    var content = $('#content');
    if (swipeable){
        $(menu).attr('width','260px');
        content.css("left","260px");
    }else{
        $(menu).attr('width','0px');
        content.css("left","0px");
    }
    menu.close();
};

But I find this very ugly :S.

Any idea’s on how to make this more cleaner? Maybe there is a build in alternative?

PS: This is my splitter

    <ons-splitter>
        <ons-splitter-side id="menu" animation="overlay" side="left" width="260px" swipeable collapse="screen and (max-width:31.25em)" page="html/menu.html">
        </ons-splitter-side>
        <ons-splitter-content id="content" page="html/login.html">
        </ons-splitter-content>
    </ons-splitter>

Regards,
Maxim

Fran Diox

@Maxim-Van-de-Wynckel Just remove the swipeable attribute :)

Alireza Mn

how to remove the swipeable attribute with js? Im going nuts over it, what ever I do it doesnt work:

$(’#menu’).removeAttr('swipeable ');

why its not working?

munsterlander

@Maxim-Van-de-Wynckel I think what @Fran-Diox means, is to do this:

 <ons-splitter>
        <ons-splitter-side id="menu" animation="overlay" side="left" width="260px" collapse="screen and (max-width:31.25em)" page="html/menu.html">
        </ons-splitter-side>
        <ons-splitter-content id="content" page="html/login.html">
        </ons-splitter-content>
    </ons-splitter>

No JS, just remove it from the tag.

Alireza Mn

@munsterlander i need to disable the menu in some pages, thats why need to do it with js, otherwise it’ll be disable in all pages