4 Replies Latest reply on Mar 24, 2014 1:05 PM by Preran

    Need to scroll en external text

    ErnestoCC

      Hello, I am new here and I have been creating my first web design using Edge.

       

      I have finished the design, now I need to add some content.

       

      The way I would prefer to do it is by calling it from external files, in this case it is to a screen inside Edge.

       

      I can call the file, the problem is that the file is bigger than the area I want it to show so I thought about a scroller. The element area size is 904px width x 410px height

       

      I have tried adding one but with no luck . I am using NiceScroll3

       

      http://areaaperta.com/nicescroll/

       

      This is what I have on Stage:

       

      This is how I call the external file

       

      $.ajax({

       

                  url : "http://mywebsite.com/bio.html",

       

                  success : function (data) {

       

                     sym.$("#Stage_MainGroup2_MenuMaster_ScreenBio2_ScreenBio").html(data);

       

                  }

       

              });

       

      ScreenBio is an element inside ScreenBio2 that is a symbol, MenuMaster is symbol and MainGroup2 too

       

      I do not know how to call the scrolling funtion or if it is possible, can you please help me with this?

       

      Thank you so much for your support!

        • 1. Re: Need to scroll en external text
          ErnestoCC Level 1

          Hello, ok I managed to add an iFrame to my element ScreenBio and the scroller comes from the iFrame

           

          It shows perfect on the site in all browsers but iPhone and iPad do not show the scroll.

           

          the site is ernestocortazar.com.mx/eciii and go to Biografia to see whats going on.

           

          This is what I have on stage composition ready:

           

          $.ajax({

           

                      url : "http://ernestocortazar.com.mx/eciii/web/bio-frame.html",

           

                      success : function (data) {

           

                         sym.$("#Stage_MainGroup2_MenuMaster_ScreenBio").html(data);

           

                      }

           

                  });

           

          yepnope({nope:[ "jquery.nicescroll.min.js",

           

                                 ],complete: init});

           

          function init (){

           

                               sym.$("#Stage_MainGroup2_MenuMaster_ScreenBio").niceScroll();

           

          }

           

          my iFrame has this code:

           

          <html>

          <head>

          <style>

          body

          {

          overflow:auto;

          }

           

          </style>

           

          </head>

          <script src="http://ernestocortazar.com.mx/eciii/scroller/jquery.nicescroll.min.js">

          $(document).ready(

          function() {

          $("http://ernestocortazar.com.mx/eciii/web/bio.htm").niceScroll();

          }

          );

           

           

          </script>

           

          <body>

           

          <iframe src="http://ernestocortazar.com.mx/eciii/web/bio.html" width="100%" height="100%" frameborder="0"></iframe>

           

           

           

           

          </body>

           

          </html>

           

          Hope someone can help me with this

           

          Have a good day!

           

          Ernesto

          • 2. Re: Need to scroll en external text
            ErnestoCC Level 1

            Hello,

             

            I am still trying to figure out why my iFrame does not work with iPhones or iPads

             

            Here is what I have added to my files to try to fix it:

             

            iFrame:

             

            <iframe src="http://ernestocortazar.com.mx/eciii/web/bio.html" width="900" height="400" frameborder="0"></iframe>

             

            Info Page - Bio:

             

            <div id="content" style="width:100%;" style="overflow-scrolling:touch; overflow: auto;">

             

            Edge on Stage Content Ready:

             

            $.ajax({

             

                        url : "http://ernestocortazar.com.mx/eciii/web/bio-frame.html",

             

                        success : function (data) {

             

                           sym.$("#Stage_MainGroup2_MenuMaster_ScreenBio").html(data);

             

                        }

             

                    });

             

            yepnope({nope:[ "jquery.nicescroll.min.js",

             

                                   ],complete: init});

             

            function init (){

             

                                 sym.$("#Stage_MainGroup2_MenuMaster_ScreenBio").niceScroll();

             

            }

             

             

             

            Is there something wrong, missing or is there an easier way to call an external file and havi it scrolled from all browsers, smartphones and tablets?

             

            I swear I have looked on the forums for this solution with no luck

             

            Thanks for all your help!

             

            Ernesto

            • 3. Re: Need to scroll en external text
              ErnestoCC Level 1

              Ok I found the solution.

               

              I leave it here for future reference and help to others.

               

              I added this code to my iFrame file:

               

              <html>

              <head>

                  <meta charset="UTF-8" />

                  <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />

               

                  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>

                  <script type="text/javascript">

                  $(function(){

                      if (/iPhone|iPod|iPad/.test(navigator.userAgent))

                          $('iframe').wrap(function(){

                              var $this = $(this);

                              return $('<div />').css({

                                  width: $this.attr('width'),

                                  height: $this.attr('height'),

                                  overflow: 'scroll',

                                  '-webkit-overflow-scrolling': 'touch'

                              });

                          });

                  })

                  </script>

               

              </head>

              <script src="yourURL/jquery.nicescroll.min.js">

              $(document).ready(

              function() {

              $("yourURLtoFile").niceScroll();

              }

              );

              </script>

              <body>

               

              <iframe src="yourURLtoFile" width="900" height="400" frameborder="0"></iframe>

               

               

               

               

              </body>

               

              </html>

               

              It worked, now all browsers are scrolling, smartphones and tablets too.

               

              Hope this info helps someone.

               

              Ernesto

              • 4. Re: Need to scroll en external text
                Preran Adobe Employee

                Hi ErnestoCC,

                 

                Thank you for taking time to post your solution. I am sure that it will help users witha related issue.

                 

                Thanks,

                Preran