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?

       

      Thanks!

       

      James

        • 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.

           

          Thanks,

           

          -Elaine

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

            Elaine-

             

            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>

            </ul>

            </div>

             

            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).

             

            Thanks!

             

            James

            • 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.

               

              http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html#differentcompositions

               

              -Elaine

              1 person found this helpful