Open Slide menu on swipe when swipe begins from edge of the screen

[kalpeshhpatel]

Is there any way I can make side menus (both right and left) to open when I swipe the screen from edge of the screen.

I know there is settings there $.ui.slideSideMenu = true that enables slide menus to open on slide of screen.

But in this case menu gets open even if swipe occurs from or in the middle of the screen, which creates some kind of fluctuating events as both scrolling and slide menus are opens simultaneously.

Is there any way I can make side menus to open on slide when swipe begins from the edge of the screen?

Thanks for your time.

[imaffett]

I just pushed up a change with a new property. You can set the threshold that the touch must be inside (X coord from the left or the right) for it to start. This was just added to the plugin. If it works for you, I'll rebuild the dist files then.

$.ui.slideMenuXThreshold=50;

[kalpeshhpatel]

Hi @imaffett , thanks for your quick response.

Is the changes you pushed is in master branch or some other branch?

-- Thanks

[kalpeshhpatel]

Got it. Let me try this out.

[kalpeshhpatel]

Hi @imaffett , I just checked it out, but unfortunately it didn't workout, and opens the side menu even if I swipe from the middle of the screen.

[imaffett]

I only updated the plugin file, not the build files

[kalpeshhpatel]

Yes, I checked it and also I tested it by downloading this repository itself. And in that there is reference to ./plugins/af.slidemenu.js in index.html. And I tried setting threshold in index.html. But it didn't work.

Please let me know if I missed something.

[imaffett]

http://jsbin.com/kapixoqu/2/ - check that out. It should be 50px from either side to swipe

[kalpeshhpatel]

Hi @imaffett , somehow it didn't work initially in my browser. I was using Chrome on Ubuntu, but when I checked it on Firefox, it worked. I apologies for that. There must be some issue from my side. It is working fine now.

I just create build now and will let you know if I am still having issue.

Many thanks to you.

-- Thanks

[kalpeshhpatel]

Hi @imaffett , again sometimes it is not working on my side. I just checked the code and found that this is what you did:

if($.ui.slideMenuXThreshold!==0&&sidePos===0){
                if(e.pageX>$.ui.slideMenuXThreshold&&window.innerWidth-e.pageX>$.ui.slideMenuXThreshold){ 
                    doMenu=false;
                    tracking=false;
                    return;
                }
            }

But when I tried debugging it on chrome ubuntu, e.pageX was always coming to 0.

I replaced e.pageX with startX ie declared and assigned above in code as startX = e.touches[0].pageX.

So, I updated the code as follows:

javascript

if($.ui.slideMenuXThreshold!== 0 && sidePos===0 ) { if(startX > $.ui.slideMenuXThreshold && window.innerWidth - startX > $.ui.slideMenuXThreshold) { doMenu=false; tracking=false; return; } }

And it is works fine for me now. I am not sure it this is the correct solution. Can you please confirm it?

-- Thanks

[imaffett]

Desktop browsers are not supported.

edit I wasn't using e.touches[0]...that's the issue! Pushing up a fix now.