Scrolling on x, with a side menu

ionic-v1
1

Hi,

I’m trying to have a section on my page, scrolling on x, but working bad. I think it’s due to the side menu, because when i’m doing a scroll on y, it works perfectly.

On the scroll y, it has some difficulties to scroll it, only translating by 3px max, and when you want to scroll from left to right it displays the left side menu and not coming from the start of the section.

How can i do this ?
Need some code ?

And finally sorry for my bad english.

Thank you all for your answers

1 Like
2

Are you using the current beta?
I mentioned this and thought there was a fix.

But all in all -> can use javascript events to disable dragging the side-menu.
Like:

touchstart on your domnode -> disable sidemenu
touchend on your domnode -> activate it again

For disabling the sidemenu:
http://ionicframework.com/docs/api/service/$ionicSideMenuDelegate/
The “canDragContent” option.

Greetz, bengtler

3

This is my HTML code :

<ion-scroll zooming="true" direction="x" style="width: 100%; height: 150px;">
            <div class="inline over" ng-controller="testCtrl">
                <div class="thumbnail">
                    <img src="img/test.jpg" class="img-circle img-circle-size2">
                    LAURE<br> LAGARDE
                </div>
                <div class="thumbnail">
                    <img src="img/test.jpg" class="img-circle img-circle-size2">
                    LAURE<br>
                    LAGARDE
                </div>
                <div class="thumbnail">
                    <img src="img/test.jpg" class="img-circle img-circle-size2">
                    LAURE<br>
                    LAGARDE
                </div>
                <div class="thumbnail">
                    <img src="img/test.jpg" class="img-circle img-circle-size2">
                    LAURE<br>
                    LAGARDE
                </div>
                <div class="thumbnail">
                    <img src="img/test.jpg" class="img-circle img-circle-size2">
                    LAURE<br>
                    LAGARDE
                </div>
                <div class="thumbnail">
                    <img src="img/test.jpg" class="img-circle img-circle-size2">
                    LAURE<br>
                    LAGARDE
                </div>
            </div>
      </ion-scroll>

This is the controller like the documentation :

.controller('testCtrl', function($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeftSideMenu = function() {
    $ionicSideMenuDelegate.canDragContent(false);
  };
})

I don’t understand how i should do, to disable it on this section of HTML part. Have you got an exemple with my code please ?

And yes i’m using the current version.

4

You can build a directive -> add the directive to your ion-scroll.

app.directive('disableSideMenu', [
    '$ionicSideMenuDelegate',
    function ($ionicSideMenuDelegate) {
        return {
            restrict: 'A',
            link: function (scope, element) {
                element.on('touchstart', function () {
                    scope.$apply(function () {
                        $ionicSideMenuDelegate.canDragContent(false);
                    });
                });

                element.on('touchend touchcancel', function () {
                    scope.$apply(function () {
                        $ionicSideMenuDelegate.canDragContent(true);
                    });
                });
            }
        };
    }
]);

in your html:

<ion-scroll ..... disable-side-menu>
1 Like
5

Thank you for your answer, but it’s not working for me, I have tried it on, chrome emulation for smartphone, and on a smartphone with android, but side menu still enabled. :frowning:

EDIT : confused x and y on my precedent post, y is working well event if i have a second scroll on the full page, but it’s x who is not working as needed cause of the left side menu.

6

Might it possible that you create a codepen of your current code?

7

Well, this is the first time i’m using this, so i added bootstrap, ionic and angular, but some part of code not working, i don’t even know where i have to put my angularjs code, even if i added angularjs.

There is the code, i hope it will help you to understand, it’s my first time developping mobile app and web development.

http://codepen.io/anon/pen/oEqsy

EDIT: made a new codepen

8

change

to element.on(‘touch’, function() {

change

to element.on(‘release’, function() {

9

Still displaying the menu

10

@chenjiafan
i am using the standard mobile events and it worked for my purposes.

@Jean_Claude_Dus
look in your javascript console:
https://docs.angularjs.org/error/$injector/modulerr?p0=starter&p1=Error:%20[$injector:nomod]%20http:%2F%2Ferrors.angularjs.org%2F1.2.12%2F$injector%2Fnomod%3Fp0%3Dstarter %20%20%20%20at%20Error

:wink:

11

I have no error in the console, only this warning :
WARNING: Tried to load angular more than once.

And this is my version of angular :
angular-1.3.0-beta.16

12

yeah but if i open your codepen, i get this error.

13

Maybe cause i have probably forgotten something in the codepen.
Can you drop me your e-mail or something by private message, to give you a .zip of my actual project ?

14

Hey,

your forgot to load your directives for your module:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives'])

starter.directives - is missing :wink:

1 Like
15

Oh well, my bad, so tired.

it works really good now.

Thank you so much for you help.