11 Replies Latest reply on Oct 14, 2016 9:24 AM by nickg55985485

    Auto rotate to landscape on ipad

    nickg55985485 Level 1

      Hello.

      I have basic Adobe Edge skills and no coding skills at all!

       

      Could someone please tell me if it is possible to automatically change my edge animate layout from a portrait version to a different landscape version if it is viewed landscape on an ipad? I have created both layouts in edge.

       

      Thanks for your time and any help.

       

       

      Nick

        • 2. Re: Auto rotate to landscape on ipad
          joel_pau Level 5

          code.png

          1 person found this helpful
          • 3. Re: Auto rotate to landscape on ipad
            nickg55985485 Level 1

            Thank you very much for the replies, but I still don't fully understand!

             

            I have this code assigned to my stage:-

             

            __________________________________________________________________________________________ _

            /*

            window.orientation returns the following values: 90,180, 0 or -90.

            A value of 0 means: the portrait view,

              180 means: Upside Down,

              -90 means: the device is landscape rotated to the right,

              and 90 means: the device is landscape rotated to the left.

            */

             

             

            if(window.orientation == 0){

              sym.$("o").html("angle="+window.orientation+". This is: Portrait View.") }

            else if (window.orientation == 180){

              sym.$("o").html("angle="+window.orientation+". This is: Upside Down.") }

            else if (window.orientation == 90){

              sym.$("o").html("ORIGIN_iPad_landscape_W2048xH1396.html="+window.orientation+". This is: Landscape Left.") }

            else { sym.$("o").html("angle="+window.orientation+". This is: Landscape Right.") }

            __________________________________________________________________________________________ _

             

             

            I'm working on the portrait version and I assumed that I would need to insert the file name or the code for the landscape version so that it could link to it once rotated.

             

            This is some code that Chris Gannon wrote on the thread supplied by "Resdesign" (thanks Resdesign!)

             

            __________________________________________________________________________________________ _

            You can simply call a custom updateLayout(); function when your project initialises:

             

            function updateLayout (){

             

                 //sets the stage's width and height to be the window width and height

                 sym.$("#Stage").width($(window).width());

                 sym.$("#Stage").height($(window).height());

             

                 switch (window.orientation){

             

                      //Portrait

                      case 0:

                      case 180:

                           //do portrait stuff here

                      break;

                      default:

                           //do landscape stuff here

                 };

            }

            __________________________________________________________________________________________ _

             

            I usually amend my code in "Brackets" (app).

             

            When I search my exported .html file for the word "window.orientation" so I can insert Chris Gannons code it does not find any results.

             

            I have a feeling that I'm doing something very wrong!

             

            Any help would be hugely appreciated!

             

            Thanks.

            • 4. Re: Auto rotate to landscape on ipad
              joel_pau Level 5

              Well, you cannot display or load a file using this code: sym.$("o").html("ORIGIN_iPad_landscape_W2048xH1396.html

              What's your idea? 2 files: one for portrait and one for landscape?

              • 5. Re: Auto rotate to landscape on ipad
                nickg55985485 Level 1

                Thaks Joel.

                I have 2 adverts

                 

                PORTRAIT

                 

                LANDSCAPE

                 

                And I want to combine them to one html file so that if someone is on an ipad and they view it portrait they will see the P. advert and if they view it landscape they will view the L. advert.

                 

                I come from a Illustrator/Photoshop/Indesign background and I've just stumbled into edge.

                 

                Thanks for your help.

                • 6. Re: Auto rotate to landscape on ipad
                  joel_pau Level 5

                  I saw your work.

                  First: are you using an Apple device?

                  Is it a constraint (2 animations: portrait and landscape) because Edge Animate has a responsive mode?

                  responsiveMode.png

                  • 7. Re: Auto rotate to landscape on ipad
                    nickg55985485 Level 1

                    Hi Joel.

                    Yes, I use apple.

                    I have the responsive scaling window ticked already.

                    I want my layout design to change when viewed in landscape mode.

                     

                    Thanks.

                    • 8. Re: Auto rotate to landscape on ipad
                      resdesign Adobe Community Professional & MVP

                      just put code in stage/orientationchange

                       

                        if (Math.abs(window.orientation) === 90) {

                        // Landscape  - enter code to go to landscape view

                        } else {

                        // Portrait   - enter code to go to portrait view

                        }

                      • 9. Re: Auto rotate to landscape on ipad
                        joel_pau Level 5

                        Well, Safari 9 or 10 have a responsive mode. You can test your work without an iPad.

                        See: Test a Site for Mobile With Safari Responsive Design Mode

                         

                        Here are demos file. 2 steps: events and size.

                         

                        1) Implementing orientation events: orientation events.zip - Box

                         

                        2) Implementing responsiveness:  orientation width height.zip - Box

                        • 10. Re: Auto rotate to landscape on ipad
                          resdesign Adobe Community Professional & MVP

                           

                          // stage/compositionReady
                          function readDeviceOrientation() {
                               if (Math.abs(window.orientation) === 90) {
                                     // Landscape  - enter code to go to landscape view
                               } else {
                                    // Portrait   - enter code to go to portrait view
                               }
                          }

                          // see correction below for the following line

                          window.onorientationchange = readDeviceOrientation;

                           

                          //correction by joel

                          sym.$(window).bind("orientationchange", readDeviceOrientation);
                          • 11. Re: Auto rotate to landscape on ipad
                            nickg55985485 Level 1

                            Thank you both very much.

                            Thanks for those files Joel!

                             

                            I think I understand now!

                            It works!

                            This opens up a whole new world for me, so I can't thank you enough!