12 Replies Latest reply on Mar 23, 2015 1:49 AM by Andres Angel

    How Would I do This is Edge? JQuery.

    RavenDesign Level 1

      So when everything is loaded what I want to do is have the Page auto Scroll On its own!

      And then when it reaches the bottom of the page to go back to the top of the page and start again over and over can't seem to crack it

      Lets say I have a #Header Div at the top and a #Footer Div at the bottom to make things easier

      Any idea's ? I would be very greatful thank you.

        • 1. Re: How Would I do This is Edge? JQuery.
          CindyJones-Hulfachor Level 1

          Do you mean that you want project to play animation and then loop back to the beginning and start over again? if so:

          - Go to timeline with completed animations

          - Click on actions {} top left of layers in timeline, select + and select Complete, Choose Play make ),

          sym.play(0);

          - Or you can add triggers on timeline to Play from or at specific triggers or labels.

           

          Cindy J-H

          • 2. Re: How Would I do This is Edge? JQuery.
            RavenDesign Level 1

            No I mean how would I automatically scroll to the bottom of the page and then back to the top using JQuery/Js something like this:

             

            function scroll(){
              $
            ('html, body').animate({
                scrollTop
            : $("#footerOfPage").offset().top
             
            }, 0);
            }

             

            Or Like this:

             

            function pageScroll() {

                          $('html, body').animate({scrollTop:3000});

                          scrolldelay = setTimeout('pageScroll()',100);

            }

             

            Neither work...

             

            $('html, body').animate({scrollTop:3000}, 'slow');

            In compisitionReady Works But its way to fast and then i've got the problem of when it reaches 3000px or the Footer div I want it to go to 0px or Header Div and then start over again

             

            So when the page loads I want it to auto scroll to the footer (bottom) slowley and not to jump straight to the bottom but to be animated and slow scroll the page on its own! without a button press and when its at the bottom of the page I want it to go back to the top of the page and start again over and over....but using JQuery

            • 4. Re: How Would I do This is Edge? JQuery.
              resdesign Adobe Community Professional & MVP

              Using a timer, maybe!?

              • 5. Re: How Would I do This is Edge? JQuery.
                RavenDesign Level 1

                Already tried it works a little but when it goes it again and again the speed changes for some reason in Edge . . ..

                 

                $("html, body").animate({ scrollTop: $(document).height() }, 30000);

                setTimeout(function() {

                   $('html, body').animate({scrollTop:0}, 30000);

                },30000);

                setInterval(function(){

                 

                $("html, body").animate({ scrollTop: $(document).height() }, 30000);

                setTimeout(function() {

                   $('html, body').animate({scrollTop:0}, 30000);

                },30000);

                 

                 

                },8000);

                • 6. Re: How Would I do This is Edge? JQuery.
                  resdesign Adobe Community Professional & MVP

                  What about getting the position?


                   

                  var myPos = $('html, body').scrollTop();

                   

                  if (myPos>=3000){

                   

                        $('html, body').animate({scrollTop:0});

                   

                  }


                   

                   


                  • 7. Re: How Would I do This is Edge? JQuery.
                    RavenDesign Level 1

                    That's not the problem. . .

                     

                    the problem is Edge changes the speed of scrolling after its scrolled down once and repeats the function. . .

                    I want a constant speed..but it isnt working

                     

                    $("html, body").animate({ scrollTop: $(document).height() }, 30000);

                    setTimeout(function() {

                       $('html, body').animate({scrollTop:0}, 30000);

                    },30000);

                    setInterval(function(){

                     

                    $("html, body").animate({ scrollTop: $(document).height() }, 30000);

                    setTimeout(function() {

                       $('html, body').animate({scrollTop:0}, 30000);

                    },30000);

                     

                     

                    },8000);

                    • 8. Re: How Would I do This is Edge? JQuery.
                      YOSHIOKA Ume Level 3

                      Hi.

                       

                      jQuery has an animation-queue. so you just chain two animate methods, like this.

                      function updown(){
                        //calc max scrollTop
                        var bottom = $(document).height()-$(window).height();
                        //scroll to bottom. scroll to 0. and execute updown().
                        $('body')
                          .animate({scrollTop:bottom},2000)
                          .animate({scrollTop:0},2000,updown);
                      }
                      updown();
                      

                      If you want to stop all animation-queue, use stop(true);

                      $('body').stop(true);
                      

                       

                      http://api.jquery.com/animate/

                      http://api.jquery.com/stop/

                       

                      Thx.

                      Ume.

                      • 9. Re: How Would I do This is Edge? JQuery.
                        RavenDesign Level 1

                        Perfect just what was needed,

                        Thanks for that Ume.

                         

                        One more question how would you start it again?

                        calling updown(); again from a button click doesn't seem to get it started again any idea's?

                        • 10. Re: How Would I do This is Edge? JQuery.
                          YOSHIOKA Ume Level 3

                          You just call updown() again, and restart.

                           

                          If you can't, I guess it's a scope ploblem.

                          I don't know the configuration of your content. but for example, can be solved in this way.

                           

                          1:at document.compositionReady. define updown() on symbol of Stage.

                          //document.compositionReady

                          sym.updown = function(){   var bottom = $(document).height()-$(window).height();   $('body')     .animate({scrollTop:bottom},2000)     .animate({scrollTop:0},2000,sym.updown); };

                          2:and, updown() can be called  via "sym.getComposition().getStage()"

                          sym.getComposition().getStage().updown();
                          

                           

                          To restart scrolling the middle of the content, it may be necessary to recalculate the speed of the animation.

                          Good luck.

                           

                          Ume.

                          • 11. Re: How Would I do This is Edge? JQuery.
                            RavenDesign Level 1

                            Hey Istead of having the code in the click panel in edge I put it the compositionReady and then it worked I also added html along with the body so the code worked in IE and firefox because it wasn't working in those with just body so this is how I did it in the end:

                             

                             

                             

                            function updown(){

                              //calc max scrollTop

                              var bottom = $(document).height()-$(window).height();

                              //scroll to bottom. scroll to 0. and execute updown().

                              $('html, body')

                                .animate({scrollTop:bottom},20000)

                                .animate({scrollTop:0},2000,updown);

                            }

                            updown();

                             

                             

                            $("#Stage_stop").click(function(){

                                $('html, body').stop(true);

                            });

                             

                             

                            $("#Stage_play").click(function(){

                                updown();

                            });

                             

                             

                            Working well now on all browsers

                            thanks for all your help really appreciated!

                            • 12. Re: How Would I do This is Edge? JQuery.
                              Andres Angel Level 1

                              Hi Yoshioka.

                               

                              I need something similar to this. I have a mobile site with the tabs at the bottom of the content, I want the page to slide up as you click on the tab and the conten panel fades In, I tried  this piece of script and by removing the first line   " .animate({scrollTop:bottom},2000) "

                               

                              the pages page scrolls up when the new panel fades in but then it does not allow you to scroll down again. It juts starts bumping against the top of th browser Do you think you can help me?  Thinks it's very close to what you already have here. Basically telling it to stop scrolling up once the top is reached!!


                              Im not a season coder when it comes to javaS


                              Many thanks