SideNav no Touch Operation


Topic: SideNav no Touch Operation

webmaster2 pro asked 9 months ago

NBB Development
^ example

I cannot swipe the sidenav off of the screen on mobile. When viewing on a desktop I am getting the following console error:
Uncaught TypeError: this.$dragTarget.hammer is not a function
at SideNav.bindTouchEvents (sidenav.js:45)
at SideNav.init (sidenav.js:36)
at new SideNav (sidenav.js:28)
at HTMLAnchorElement.<anonymous> (sidenav.js:361)
at Function.each (ScriptResource.axd?d=4bMApOb58R6igmkUEZ0eXtdJHB870e4MFbamy4biz87JTagEazUCN8i4d2hQPDNzuR__g3UyoIbsXXd76aCW1N11ssf7DPvicShZybtw7VI4a9-6hNT4d61ZzgwTyt0FiGlUGQti26m0v2O1TX9uZkD4fw3c3eqSu54RCcAqzBR5_kiS2lyTD4MhCjqf-OFL0&t=45b53253:2)
at e.fn.init.each (ScriptResource.axd?d=4bMApOb58R6igmkUEZ0eXtdJHB870e4MFbamy4biz87JTagEazUCN8i4d2hQPDNzuR__g3UyoIbsXXd76aCW1N11ssf7DPvicShZybtw7VI4a9-6hNT4d61ZzgwTyt0FiGlUGQti26m0v2O1TX9uZkD4fw3c3eqSu54RCcAqzBR5_kiS2lyTD4MhCjqf-OFL0&t=45b53253:2)
at e.fn.init.$.fn.sideNav (sidenav.js:360)
at sidenav:246

The code in error is:

this.$dragTarget.hammer({
prevent_default:false
}).bind('pan', this.panEventHandler.bind(this)).bind('panend', this.panendEventHandler.bind(this));

In the bindTouchEvents function of sidenav.js

I am using MDB pro with the lite versions of .css and .js 


Jakub Mandra staff premium answered 9 months ago

Hi,

Have you been working on that?
Because I cannot see those errors on NBB Development, also SideNav works on mobile...

How can we reproduce the problem? 


webmaster2 pro commented 9 months ago

Yes I did end up getting rid of the hammer error by using mdb instead of mdb-lite. However you cannot swipe the sidenav away off the screen.


Jakub Mandra staff premium commented 9 months ago

I tested your NBB Development on Xiaomi with Android 7.1.2 and Chrome - worked well. 
Side nav collapse onTouch/onClick on the overlay.

What device do you use to test?


webmaster2 pro commented 7 months ago

The sidenav width will cover small device screens. I want the user to be able to close the sidenav by swiping left on the sidenav itself. version is 4.7.1 pro


Jakub Mandra staff premium commented 7 months ago

Here you can find all the options which are provided with SideNav https://mdbootstrap.com/docs/jquery/navigation/sidenav/

I'll reach out to our JQ team with SideNav swipe feature request.


Jakub Mandra staff premium commented 7 months ago

Maybe this solution will be interesting for you https://mdbootstrap.com/snippets/jquery/piotr-glejzer/120704


webmaster2 pro commented 6 months ago

No we really need a solution to swipe the sidenav left off the screen.


Jakub Mandra staff premium commented 6 months ago

OK, it is scheduled on our task board. Keep an eye on our changelog https://mdbootstrap.com/docs/jquery/changelog/


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.5.12
  • Device: Phone
  • Browser: chrome
  • OS: Android
  • Provided sample code: No
  • Provided link: Yes
Tags