3 Replies Latest reply on Apr 29, 2013 5:34 PM by elainecc

    Loading animation with jquery mobile click

    shadowfax007 Level 1

      Hello all!


      I have a mobile webpage I'm working on.  The page is done using Dreamweaver CS6 and jQuery Mobile.

      I have added a few external Edge animations to the project as well.


      Each "Page" (to go to another "page " really just a  "#" placeholder on the same page) has an Edge animation at the top.

      What I'm trying to accomplish is that, when a jQuery button is clicked , I can auto start a new Edge animation for that "page" (right now they all run at pageload and you only see the one on the main page!).


      Does this make sense?

      Is there a way to accomplish this without making the entire site an Edge animation?





        • 1. Re: Loading animation with jquery mobile click
          elainecc Adobe Employee

          Hi, James-


          Yes.  You should turn autoplay off for each Animation, then refer to the next comp using the multicomp situation and call play() in your jQuery mobile click event.  There have been a lot of posts on the forums about multicomposition pages, so I think it should be easy enough to get that up and running.





          • 2. Re: Loading animation with jquery mobile click
            shadowfax007 Level 1



            Thanks for the info!


            I've added a "stop" trigger to the animation in question.


            I can get multiple compositions to run in one page, no problem. - I just don't know how to control them from outside the animation (play(), stop(), etc...)


            I apologize for my lack of knowledge (I'm just now trying to wrap my head around the use of javscript in Edge!) and I know this may be a bit off topic but can you tell me how to add the  call (play) to the jQuery Mobile buttons?


            I have this in the HTML for the jQuery buttons:


            <div data-role="content" class="page_bkgrnd">

            <ul data-count-theme="a" data-role="listview" data-theme="d">

            <li><a href="#page2" data-transition="flip">Design</a></li>

            <li><a href="#page3" data-transition="flip">Develop</a></li>

            <li><a href="#page4" data-transition="flip">Deploy</a></li>

            <li><a href="#page5" data-transition="flip">Portfolio</a></li>




            Also, does this mean that I can make different calls and "interact" with the Edge animation from outside (as in this jQuery example) the animation, or am I misinterpreting this?


            I guess I never thought that far but that could open up an entire new can of worms and a world of possibilities :-)


            NOTE - To be clear, the jQuery Mobile code is NOT within Edge).





            • 3. Re: Loading animation with jquery mobile click
              elainecc Adobe Employee

              Hi, James-


              I'd suggest you read the "Call Edge Animate APIs on a different composition" for information on how you can call into an Animate composition from outside of that composition.





              1 person found this helpful