6 Replies Latest reply on Dec 6, 2016 1:25 PM by MikeBilbo1960

    horizontal scrolling

    MikeBilbo1960

      Does anybody know the plugin or code and setup for horizontal scrolling for apps? I'm using Phonegap Buld. In other words, using your finger to slide out one page (left or right) and another sildes into its place. Would appreciate any pointers

       

      Mike

        • 1. Re: horizontal scrolling
          ryanskihead Adobe Employee

          I don't have a lib off the top of my head, but I don't think you'd need something PhoneGap specific here -- any javascript view-swiping library should work here.

          • 2. Re: horizontal scrolling
            kerrishotts Adobe Community Professional

            Depends mostly on the framework you're using -- a lot of frameworks have components that support this out-of-the-box.

             

            If you're not using a framework, I'd suggest starting with Hammer.JS (Hammer.JS - Hammer.js) for gesture handling and go from there.

             

            If you're targeting modern iOS (with WKWebView) and/or Firefox, see snap points (http://caniuse.com/#feat=css-snappoints ).

            • 3. Re: horizontal scrolling
              MikeBilbo1960 Level 1

              Thanks for your replies. I'm not using any framework. Really, I just want left and right swipe to go from one page to the next or one div to the next. I've pored over the pages on Hammer but can't find how to set this up re. the HTML page markup. I'm new to mobile and am just an amateur with a website. Can you point me to a page with an easy-to-view complete setup model I can copy, paste and adapt?

               

              Regards,

               

              Mike

              • 4. Re: horizontal scrolling
                VectorP Level 4

                Using a framework is sound advice.

                 

                What you want requires a complex javascript construction, which catches swipe events, then loads html, manipulates the DOM and uses a large set of CSS3 attributes to create the transition. You don't really want to copy-and-paste those required code sets, then debug them for various OS and webviews. And you certainly don't want to manage and update such code if you are not fluent in javascript and CSS.

                 

                Suppose something "doesn't work" or suppose the tranisition is too fast/slow/clumsy to your liking, how are you going to find out what to change and how to debug your changes?

                 

                Really, if you are new to all this, you should use solutions from a third party. Yes, it requires some work to find out how to implement such framework, but web application development is a bit more complex than building your first Lego limousine.

                1 person found this helpful
                • 5. Re: horizontal scrolling
                  kerrishotts Adobe Community Professional

                  @MikeBilbo1960: HTML doesn't provide a feature like you're asking natively (short of FireFox/Safari with snap points), and so you'd have to build it up yourself if you're not going to use a framework. That's easier said than done, even for experts, which is why we usually rely on frameworks or other libraries to do it for us.

                   

                  I just remembered that iscroll has a snapping feature. It's not a huge framework (just takes over scrolling of select containers), and might do what you need. See iScroll 5, smooth scrolling for the web

                  • 6. Re: horizontal scrolling
                    MikeBilbo1960 Level 1

                    Thanks. I suppose I thought swiping could be solved by a plugin from Cordova or Npm and built in with Phonegap Build. I see it's not that simple. I'll continue to follow up some of your advice to use some framework.