3 Replies Latest reply on Apr 30, 2013 11:37 AM by sarhunt

    scrolling in iPhone and iPad not working- reflow and animate site

    celmatix Level 1

      Hi, I have made a website I made using edge reflow first for the layout than plugging in two different edge animate compositions into two of the divs I created. Everything is like I would like so far, however when I went to preview the website on my iPad the scrolling was getting stuck towards the bottom. I tried setting the body style to {overflow: scroll;} but this did not work. I also tried this on my primaryContainer to no avail. I'm very new to HTML so my code is very messy also, but it works . So my main question is how to fix this scrolling problem. ----here's the link: www.kidsapp.com --- if you view on iphone or ipad you will notice if you don't scroll just right it will get stuck right in the middle of my vimeo iframe which I embedded into placeholder div from Reflow.

       

       

      Also since I have so many different edge compositions I have started to collect a lot of javascript files, mainly the three js files edge animate publishes with- so two compositions means total of 6 js files. Add my reflows two css files and then top it off with my twitter bootstrap navigation css and js, and I have a mess of a time keeping track of everything, nonetheless having this site actually load as fast as it could. I'm a definietly a noob, so if there is any easy way to just combine all my js into one minified file, and same for my css please please help me! This would speed my workflow up tremendously.

       

      -Thanks ,

       

      Katherine

        • 1. Re: scrolling in iPhone and iPad not working- reflow and animate site
          sarhunt Adobe Employee

          Hey Katherine,

           

          WOW! For noob I think you've done a fantastic job.

           

          It looks like you have an unclosed div tag somewhere. Running your site through a validator returns this:

           

          Error Line 63, Column 62: Unclosed element div.

               <div id="primaryContainer" class="primaryContainer clearfix">

           

          Could be the cause of your problem. One thing you can also try is adding a clearfix to #box6. Not sure if this'll work but give it a shot.

           

          In your code, where you have:

          <div id='box6' class='clearfix'>             <a href="http://www.facebook.com/GoLabotec" target="_blank" title="Facebook">  <img id='image8' src='img/facebook.png' class='image' /> </a>       <a href="http://twitter.com/intent/user?screen_name=labotec" target="_blank" title="Twitter">  <img id='image9' src='img/twitter.png' class='image' /> </a>       <a href="http://labotec.com/?page_id=58" target="_blank" title="Contact">  <img id='image10' src='img/contact.png' class='image' /> </a>         </div>

           

          Change it to:

           

          <div id='box6' class='clearfix'>             <a href="http://www.facebook.com/GoLabotec" target="_blank" title="Facebook">  <img id='image8' src='img/facebook.png' class='image' /> </a>       <a href="http://twitter.com/intent/user?screen_name=labotec" target="_blank" title="Twitter">  <img id='image9' src='img/twitter.png' class='image' /> </a>       <a href="http://labotec.com/?page_id=58" target="_blank" title="Contact">  <img id='image10' src='img/contact.png' class='image' /> </a><div class="clearfix"></div></div>

           

           

          Sarah

          • 2. Re: scrolling in iPhone and iPad not working- reflow and animate site
            celmatix Level 1

            Aw thanks Sara! I love your work! I follow your blog and watch all of your tutorials. I'm sure you noticed the header looked familiar haha Thanks again I'll make those changes right away. I always get lost in the code when I leave it for a day or two. I just graduated college with degree in media production so I have never worked with HTML, CSS or Javascript and its a lot to take in. But hey, I think I scored my job with all this fancy stuff I created using Edge Animate so thank you so much for all your team does! Went from intern to full time interactive designer after one month when I showed them this landing page I created using the edge suite

             

            Thanks again!

             

            Katherine

            • 3. Re: scrolling in iPhone and iPad not working- reflow and animate site
              sarhunt Adobe Employee

              That's awesome. glad you found the tutorials useful. Let me know if you need further help with the site, I'd be happy to assist.

               

              Cheers,

              Sarah