18 Replies Latest reply on Sep 18, 2013 7:01 AM by AngieMM19

    Swiping moves entire screen

    AngieMM19

      Hi!  I am working on my first project in Edge Animate and have run into a problem that I hope someone can help me with.

       

      The "slideshow" is meant to be viewed on an ipad or tablet.  It is set up to move through the screens by clicking on a thumbnail or swiping left or right.  When I test this and swipe left or right, the entire screen moves.  Is there a way to lock the header, footer, and thumbnail bar in place so they remain "anchored" and don't bounce around?

       

      Here is a link to illustrate my problem: http://envisionideas.com/YOURChecking/YOURChecking.html.  This will be best viewed on an iPad.

       

      Thank you - I really appreciate any suggestions!

        • 1. Re: Swiping moves entire screen
          SEIF BH Level 2

          Hey Angie

           

          You use click action or touch ?

          • 2. Re: Swiping moves entire screen
            AngieMM19 Level 1

            Hi SEIF BH,

             

            The slideshow will most often be used with an iPad, so I am using touch to swipe left and right.

            • 3. Re: Swiping moves entire screen
              SEIF BH Level 2

              Try to use

               

              Sym.$("NameElement").lock();

              1 person found this helpful
              • 4. Re: Swiping moves entire screen
                AngieMM19 Level 1

                Thank you for your suggestion.  I really appreciate your help.

                 

                I tried this code on the action item (that may not be the correct term for the action line) and the individual elements.  I had no luck but may have put it in the wrong place.  Where would you recommend this code be placed?

                • 5. Re: Swiping moves entire screen
                  Endoplasmic Level 2

                  In your event handler for your swipe make sure you have something like this:

                   

                  function onSwipe(event) {

                    event.preventDefault();

                   

                    //your code here

                  }

                  • 6. Re: Swiping moves entire screen
                    AngieMM19 Level 1

                    Thank you for the suggestion. 

                     

                    I tried this but now when I swipe left or right the image won't "scroll" at all - it stays on the first image.  The screen still moves/bounces around when I swipe but the image doesn't change unless I press a thumbnail.  Very odd.

                     

                    It's possible that I'm doing something wrong when I add the code as I'm not great with code and this is my first Edge project.

                     

                    Thanks again, though.  I appreciate your help.

                    • 7. Re: Swiping moves entire screen
                      Endoplasmic Level 2

                      oh, basically what preventDefault does is allow you to do the gesture handling. The problem with phones and tablets is that they all have that built in elastic snap back thing when you drag around, so using preventDefault() stops that from happening.

                       

                      You want to put that in your envent that handles your swipes. I'm not sure if you're using the built in Edge ones (I've never used them before) so I don't know how they are handled.

                      • 8. Re: Swiping moves entire screen
                        AngieMM19 Level 1

                        Ah!  Yes, I am using the built in Edge events.  So, for the SWIPERIGHT, the code currently reads:

                         

                        function onSwipe(event) {

                          event.preventDefault();

                          sym.play("Screen 9");

                        }

                         

                        So I'm probably putting this code in the wrong place because it's WITHIN the SWIPERIGHT event, right?

                         

                        I currently have a swiperight and swipeleft event (the Edge built-in kind) on each of my images.  Maybe there's a better way to do this.  I will continue to dig.  Your explanation helped me understand the built-in elastic snap-back on phones and tablets.  That makes sense.

                         

                        Thank you!

                        • 9. Re: Swiping moves entire screen
                          Endoplasmic Level 2

                          Ah right, you don't want that function within your function.

                           

                          So in your built in Edge function, put "e.preventDefault();" as the first line and the rest of your code below.

                          • 10. Re: Swiping moves entire screen
                            AngieMM19 Level 1

                            Like this?

                             

                            e.preventDefault();

                            sym.play("Screen 2");

                             

                            I tried this and it scrolls again but still bounces.  I'm sorry I'm not getting this ...

                            • 11. Re: Swiping moves entire screen
                              Endoplasmic Level 2

                              Can you paste your whole Symbol.bindSymbolAction code block?

                               

                              (I'm probably leading you down a rabbit hole since I haven't even had a chance to play with the swipe events in Edge yet)

                              • 12. Re: Swiping moves entire screen
                                AngieMM19 Level 1

                                THANK YOU!!  Even looking at this code is way above and beyond!

                                 

                                I think this is what you need.  Let me know if not.

                                 

                                 

                                 

                                /***********************

                                * Adobe Edge Animate Composition Actions

                                *

                                * Edit this file with caution, being careful to preserve

                                * function signatures and comments starting with 'Edge' to maintain the

                                * ability to interact with these actions from within Adobe Edge Animate

                                *

                                ***********************/

                                (function($, Edge, compId){

                                var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

                                 

                                   //Edge symbol: 'stage'

                                   (function(symbolName) {

                                     

                                     

                                     

                                 

                                     

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_facebook}", "click", function(sym, e) {

                                         // Navigate to a new URL in the current window

                                         // (replace "_self" with appropriate target attribute for a new window)

                                         window.open("https://www.facebook.com/ForumCU", "_blank");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_twitter}", "click", function(sym, e) {

                                         // Navigate to a new URL in the current window

                                         // (replace "_self" with appropriate target attribute for a new window)

                                         window.open("https://twitter.com/ForumTalk", "_blank");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_youtube}", "click", function(sym, e) {

                                         // Navigate to a new URL in the current window

                                         // (replace "_self" with appropriate target attribute for a new window)

                                         window.open("http://www.youtube.com/ForumCreditUnion", "_blank");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_linkedin}", "click", function(sym, e) {

                                         // Navigate to a new URL in the current window

                                         // (replace "_self" with appropriate target attribute for a new window)

                                         window.open("http://www.linkedin.com/company/forum-credit-union", "_blank");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_google2}", "click", function(sym, e) {

                                         // Navigate to a new URL in the current window

                                         // (replace "_self" with appropriate target attribute for a new window)

                                         window.open("https://plus.google.com/+forumcreditunion/posts", "_blank");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_FORUM_CU_White}", "click", function(sym, e) {

                                         // Navigate to a new URL in the current window

                                         // (replace "_self" with appropriate target attribute for a new window)

                                         window.open("http://www.forumcu.com", "_blank");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                     

                                 

                                     

                                 

                                     

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1000, function(sym, e) {

                                         sym.stop();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1055, function(sym, e) {

                                         sym.play();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2000, function(sym, e) {

                                         sym.stop();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2055, function(sym, e) {

                                         sym.play();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 3000, function(sym, e) {

                                         sym.stop();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 3055, function(sym, e) {

                                         sym.play();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 4000, function(sym, e) {

                                         sym.stop();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 4060, function(sym, e) {

                                         sym.play();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 5000, function(sym, e) {

                                         sym.stop();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 5055, function(sym, e) {

                                         sym.play();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 6000, function(sym, e) {

                                         sym.stop();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 6060, function(sym, e) {

                                         sym.play();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 7000, function(sym, e) {

                                         sym.stop();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 7059, function(sym, e) {

                                         sym.play();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 8000, function(sym, e) {

                                         sym.stop();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 8060, function(sym, e) {

                                         sym.play();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 9000, function(sym, e) {

                                         sym.stop();

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 9051, function(sym, e) {

                                         sym.play("Screen 1");

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen2}", "click", function(sym, e) {

                                         sym.play("Screen 2");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen3}", "click", function(sym, e) {

                                         sym.play("Screen 3");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen4}", "click", function(sym, e) {

                                         sym.play("Screen 4");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen1}", "click", function(sym, e) {

                                         sym.play("Screen 1");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen5}", "click", function(sym, e) {

                                         sym.play("Screen 5");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_6}", "click", function(sym, e) {

                                         sym.play("Screen 6");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_7}", "click", function(sym, e) {

                                         sym.play("Screen 7");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_8}", "click", function(sym, e) {

                                         sym.play("Screen 8");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_9}", "click", function(sym, e) {

                                         sym.play("Screen 9");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_1}", "swipeleft", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 2");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_1}", "swiperight", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 9");

                                        

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_2}", "swipeleft", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 3");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_2}", "swiperight", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 1");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_3}", "swipeleft", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 4");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_3}", "swiperight", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 2");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_4}", "swipeleft", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 5");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_4}", "swiperight", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 3");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_5}", "swipeleft", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 6");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_5}", "swiperight", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 4");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_6}", "swipeleft", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 7");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_6}", "swiperight", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 5");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_7}", "swipeleft", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 8");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_7}", "swiperight", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 6");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_8}", "swipeleft", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 9");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_8}", "swiperight", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 7");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_9}", "swipeleft", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 1");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_ScreenImages_9}", "swiperight", function(sym, e) {

                                         e.preventDefault();

                                         sym.play("Screen 8");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen1}", "swipeleft", function(sym, e) {

                                         sym.play("Screen 2");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen1}", "swiperight", function(sym, e) {

                                         sym.play("Screen 9");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen2}", "swipeleft", function(sym, e) {

                                         sym.play("Screen 3");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen2}", "swiperight", function(sym, e) {

                                         sym.play("Screen 4");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen3}", "swipeleft", function(sym, e) {

                                         sym.play("Screen 4");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen3}", "swiperight", function(sym, e) {

                                         sym.play("Screen 2");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen4}", "swipeleft", function(sym, e) {

                                         sym.play("Screen 5");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen4}", "swiperight", function(sym, e) {

                                         sym.play("Screen 3");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen5}", "swipeleft", function(sym, e) {

                                         sym.play("Screen 6");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails-screen5}", "swiperight", function(sym, e) {

                                         sym.play("Screen 4");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_6}", "swipeleft", function(sym, e) {

                                         sym.play("Screen 7");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_6}", "swiperight", function(sym, e) {

                                         sym.play("Screen 5");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_7}", "swipeleft", function(sym, e) {

                                         sym.play("Screen 8");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_7}", "swiperight", function(sym, e) {

                                         sym.play("Screen 6");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_8}", "swipeleft", function(sym, e) {

                                         sym.play("Screen 9");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_8}", "swiperight", function(sym, e) {

                                         sym.play("Screen 7");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_9}", "swipeleft", function(sym, e) {

                                         sym.play("Screen 1");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindElementAction(compId, symbolName, "${_thumbnails_9}", "swiperight", function(sym, e) {

                                         sym.play("Screen 8");

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                      Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 0, function(sym, e) {

                                        

                                 

                                      });

                                      //Edge binding end

                                 

                                     

                                 

                                     

                                 

                                     

                                 

                                     

                                 

                                   })("stage");

                                   //Edge symbol end:'stage'

                                 

                                })(jQuery, AdobeEdge, "EDGE-193114054");

                                • 13. Re: Swiping moves entire screen
                                  Endoplasmic Level 2

                                  Well the good news is that you placed the code that I suggested in the right spot! Bad news is, I have no idea why that doesn't work.

                                   

                                  So try adding this code chunk right after

                                  //Edge symbol: 'stage'

                                     (function(symbolName) {

                                   

                                  and before your {$_facebook} chunk

                                   

                                   

                                   

                                  Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

                                    $(document).on({

                                        'mousedown': function(event){

                                          event.preventDefault();

                                        }, 

                                       'mousemove': function(event){

                                          event.preventDefault();

                                        }

                                    });

                                  });

                                  //Edge binding end

                                   

                                   

                                  If *that* doesn't work then I really have no idea what's up (without digging into how Edge is handling the swipe stuff)

                                   

                                  Added mousemove

                                  • 14. Re: Swiping moves entire screen
                                    AngieMM19 Level 1

                                    Well...the good news is that I am sincerely appreciative of all the time you've spent and help you've given me!

                                     

                                    The bad news is that it's still bouncing around.

                                     

                                    On the bright side, I think there is a strong likelihood that my client will put this in a web frame within their site so that may very likely take care of the bouncing.  If not, I will dig around more to see what I can find.

                                     

                                    Again, I can't thank you enough for all your help and time.

                                     

                                    Best wishes!

                                    Angie

                                    • 15. Re: Swiping moves entire screen
                                      Endoplasmic Level 2

                                      One last random question... Is this a Windows device by chance (ie. running your app in IE)?

                                       

                                      If so, add this little gem to your css:

                                       

                                      html, body {

                                          -ms-touch-action: none;

                                      }

                                       

                                      edit: nm, your original post says iPad.

                                       

                                      Try to put this in your <head> in your html

                                       

                                      <meta name="viewport" content="width=WHATEVER_THE_WIDTH_IS;" />

                                       

                                      eg.

                                       

                                      <meta name="viewport" content="width=1060;" />

                                      • 16. Re: Swiping moves entire screen
                                        AngieMM19 Level 1

                                        That's it!!  Or mostly it, anyway.  It's much better!  It still goes up and down a little but the elasticy movement is gone.

                                         

                                        Thank you!!  I really appreciate all of your help!

                                        • 17. Re: Swiping moves entire screen
                                          Endoplasmic Level 2

                                          Well if you're close, maybe playing around with the viewport meta tag parameters can sort you out: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

                                          1 person found this helpful
                                          • 18. Re: Swiping moves entire screen
                                            AngieMM19 Level 1

                                            Thank you!  This link is very helpful!