How to disable side menu when sliding over a div?

Well my question seems a bit not clear, i have built a basic app with left and right side menus then i tryed to use this slider http://www.idangero.us/sliders/swiper/
but when i try to slide over the container the entire ion view slides with it to show the side menus, is there any way to disable the slide top open side menus on some divs so that i can slide across the items in that div without showing sliding the entire menu ?

and sorry for my english, it’s neither my first or second language

1 Like

Is there any way you could use the built in ionic slide-box? you can use that and it’s set up to prevent any accidental menu dragging :smile:

http://ionicframework.com/docs/api/directive/ionSlideBox/

i would love to but how can i style it because it takes full screen by default and i only want it on a specific height with some other styles applied to it ? i couldn’t find on the docs or demos a way to do that

actually the slider only takes up as much area as the content inside it. But it you need to, you can apply styles to it by using the class .slider

You can disable the sidemenu by using drag-content="false".

http://ionicframework.com/docs/api/directive/ionSideMenuContent/

So, implement that and for the view that has the slide box, disable the drag on the content section.

Thank you so much for the replies i like ion slidebox it’s smoother in every way so i’ll go with @mhartington 's option, and by the way i really love the framework great job guys

I’ve been using ion-slide-box since beta1 and since then it cannot prevent the swipe gesture to also open the side menu. Is there anything else I have to do to enable that, @mhartington ?

How do you have your markup set up? Do you mind posting a sample

I have the same issue! Any assistance would be appreciated.

EDIT: See my code below. What happens is when you swipe on Slide 2 it opens the menu up.

Basically the app is set up like this structure:

Slider page:

<ion-view hide-nav-bar="true">
  <ion-slide-box on-slide-changed="slideChanged(index)">
    <ion-slide>
     Slide 1
    </ion-slide>
     <ion-slide>
     Slide 2
    </ion-slide>
  </ionslide-box>
</ion-view>

Menu:

<ion-side-menus>
  <ion-side-menu side="right">
    <ion-header-bar class="bar-calm">
      <button nav-clear menu-close class="button button-icon ion-close text-center font-small"></button>
    </ion-header-bar>
    <ion-content>
      <form id="search_input" action="#/app/search" method="get">
      </form>
      <ion-list>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

@fredericogalvao and @mbesto, I put this codepen to help with your issues.

Basically I’m setting up my slide-box like so

<ion-slide-box>
       <ion-slide>
         <ion-content></ion-content>
       </ion-slide>
       <ion-slide>
         <ion-content></ion-content>
       </ion-slide>
</ion-slide-box>

Then adding some css to make the slide box take up some space.

.slider{
  position: absolute !important;
  top: 0;
  bottom: 50%;
  left: 0;  
  right: 0;
}

This should help resolve your issues.

Doesn’t work:
http://recordit.co/UAXHiXBsgg

and now breaks the view of it.

As I understand it <ion-slide-box> adds the .slider class. So the problem with your fix is that the bottom: 50% breaks the slider into half: (the dots are supposed to be on the bottom)

Well the bottom value was just an example, you can use a value of 0 for your case and it will work.

.slider{
  position: absolute !important;
  top: 0;
  bottom: 0;
  left: 0;  
  right: 0;
}

Actually, I found the issue in my case to be something else after I went back to test what I was doing because there was no fundamental difference between what I already had implemented and what you suggested, @mhartington .

The slider works as expected on my Moto G (4.4.2) and on a Galaxy Nexus (4.3), and the failing environment is Ripple.

I don’t know why it fails on Ripple, but I confirmed that it works as expected on pure browser (codepen) and on pure cordova (running the application), and only fails when emulated through Ripple (it works when emulated directly through Chrome Device Emulation). I’ve tested this case on Ripple using Chrome@Linux, Chrome@MacOS, Safari@MacOS and Firefox@Linux, and Firefox was the only one that worked as expected.

can you give me an example ? how can I disable the drag JUST on the content section ??
I Know I must add attribute {{drag-content=“false”}} to the ion-side-menu-content
it doesn’t work when I add it to the ion-view

See this example ; http://codepen.io/calendee/pen/deibl?editors=101

It allows you to enable or disable the drag-content in each controller using the $root.canDrag property.

3 Likes

Many thanks for the prompt reply.

Many thanks again Mr. @Calendee
I’m Very sorry for this inconvenience
when I applied your way, I was able to disable drag content on all page within ion-nav-bar
and then I tried to give ion-nav-bar a specific controller and apply

$scope.$root.canDrag = true;

on it, but it doesn’t work.
still can’t drag content from ion-nav-bar only…

What is the reason ?? Can I apply drag content on ion-nav-bar and disable it on the rest of my page ??

I think you’ll need to setup a CodePen sample. It’s pretty hard to troubleshoot it without something to work with. Fork my sample, modify it with your changes, and let me know.

1 Like

this Codepen http://codepen.io/anon/pen/Kqxpk?editors=101

I need to disable Drag Content in all Page1 and all Page2 {{ EXCEPT on “Nav Bar” or ion-nav-bar within each page}} and swipe between them

In other words: if the user try to drag side menu when he is on the Nav Bar, he can do this,
but if he try to drag side menu when he is on the rest of the page, he can’t

Ah… I see what you mean. Out of the box, I don’t think Ionic supports ability to allow drag to open depending on what you’re dragging.

I’ve put together a sample that can make this work. It’s not perfect and could use some fine tuning.

On page 2 where side menu content is disabled, you can swipe on the Navbar to get the sidemenu to open. The directive for this is navBarSwipe. navBarSwipe uses the swipe gesture because it’s pretty smooth. I’ve commented out the drag gesture. You could change the directive to use the drag. However, it’s a bit glitchy. You’d need to spend some time fine tuning it - maybe with a debounce or distance detection.

1 Like