7 Replies Latest reply on Sep 27, 2014 1:25 PM by niti77

    how to create the animation div dyanimcally using jquery+javascript

    niti77 Level 1

      Hello,

      after a week of researching and without getting the full result i decided to upload new discussion here and maybe some of you guys will help me.thanks in advance.

       

      include the file:

      <!--Adobe Edge Runtime-->

          <meta http-equiv="X-UA-Compatible" content="IE=Edge">

          <script type="text/javascript" charset="utf-8" src="animate_edgePreload.js"></script>

      <!--Adobe Edge Runtime End-->

       

      html code:

      <div id="Stage" class="EDGE-70798230"></div>    if i put it like this of course everthing works fine..i can put more with different id's and they will work fine...

       

      my problem:

      i dont know how many of this animation i will need...depends of what my server will give me in the response...so i need to create them dynamically...

      i tried lots of things:

      $("#newAnimation").append('<div id="Stage2" class="EDGE-70798230"></div>');    of course with this nothing happend...it even dont get the symbols under stage..and not any of the css...

       

      $(".EDGE-70798230#Stage").clone().appendTo("#newAnimation");

      $("#newAnimation").children('#Stage').prop('id','Stage2');   then mroe css changes and just then i can see the animation but it doesnt work..."play is not defind" when i try to run the animations..

       

      i know there is some function that called createChildSymbol/createSymbolChild but none of them work for me...

      i use jquery mobile..so to start the animation for example i do $.Edge.symbol.get($("#Stage")).play();

      i tried to use the loadResources etc....doesnt work too..

       

      anyone have some idea what i can do? it is possible?

        • 1. Re: how to create the animation div dyanimcally using jquery+javascript
          joel_pau Level 5

          Hello,

           

          You've got an explanation here: Adobe Edge Animate CC JavaScript API see: "advanced topics".

          There is a link to the Edge blog with a case to download: Bootstrapping Animate Compositions « Adobe Edge Animate Team Blog.

           

          What's your goal: several animations playing at the same time or one after the other?

          1 person found this helpful
          • 2. Re: how to create the animation div dyanimcally using jquery+javascript
            niti77 Level 1

            i read it lots of time..the second link i need to read again but not seems that what i looking for.

            my goal:

            random number of the same animation with different id that i will put them onclick event and they will work seprated with no connection one to another.

             

            example:

            for(int i=0; i<someLength;i++)

            {

                 $('#someDiv').append('<div id="Stage'+i+'" class="EDGE-70798230"></div>');

                 $('#someSymbolInsideTheStage').on('click',function(){

                           $.Edge.symbol.get($("#Stage'+i+'")).play();

                 });

            }

             

            of course if i new home many i will need so it is very simple because i can put it static in the html file like this:

            <div id="Stage1" class="EDGE-70798230"></div>

            <div id="Stage2" class="EDGE-70798230"></div>

            <div id="Stage3" class="EDGE-70798230"></div>   ..........and then put onclick and etc...thats works fine..but not helping me :\



            Thanks.

            • 3. Re: how to create the animation div dyanimcally using jquery+javascript
              joel_pau Level 5

              I am unable to imagine what you want. Do you have a model website?

              • 4. Re: how to create the animation div dyanimcally using jquery+javascript
                niti77 Level 1

                i send you private message but i dont really sure it sent. so i will try here:

                 

                i dont have any model website. i develop an application using cordova with jquery mobile and i want to use adobe edge animate insdie the app.

                 

                 

                i have page that includes something like "posts". every user can upload as many posts he wish.

                every user can see all the user's posts and i want to put on every post animated "like" option.

                when user load the posts, I as developer dont know how many posts will be in the page..

                i send ajax request to my server and send all the posts back to the client.

                i build them(the posts) dynamically in client side(javascript of course). when i build them i put the name, date etc.

                that related to every post.(every post have postNumber..).

                i want to put the "like" animation too..so i need to put the div dynamically.

                (<div id="Stage+postNumber" class="EDGE-123"></div>) thats all.. but like this the div dont include nothing(empty div).

                 

                 

                i did a deep research and when i put this div static it works perfect.

                i believe thats because when i put it static it a "Symbol" element and when i put it dynamic it is DOM/JQUERY element.

                 

                 

                so i need to convert the dynamic div to "Symbol" element or somehow give it all the realted css,animation,etc.

                (load the resources).

                 

                 

                now you understand my problem? you have any idea how can i acheive it?

                 

                 

                Thanks!

                Niv.

                • 5. Re: how to create the animation div dyanimcally using jquery+javascript
                  joel_pau Level 5

                  So, a demo file about sym.createChildSymbol() and sym.createSymbolChild().

                  ==> create ChildSymbol SymbolChild.zip - Box

                  • 6. Re: how to create the animation div dyanimcally using jquery+javascript
                    dharmk Adobe Employee

                    Hi niti77,

                     

                    Currently there isn't a clean way for having multiple instances of the same composition on the same page. This is there in our list of priority items though.

                    However, as suggested by joel above, you should be able to create a symbol for the animation which you want to reuse and create instances of the same as you need it.

                     

                    Regards,

                    Dharmendra

                    1 person found this helpful
                    • 7. Re: how to create the animation div dyanimcally using jquery+javascript
                      niti77 Level 1

                      joel pau thank you for all the support.

                      now i will explain the anwer if anyone else will be stuck with the same problem.


                      first of all in edge animate need to mark all the things that created and "convert to symbol"(mark all and right click).

                      second:

                      in the top of your html file you got the script to the edge_preLoad.js .....


                      so now in your js code:

                      lets say we use append to add new div to our code and now we got <div id="new"</div>.

                      $.Edge.getComposition("yourCompositionID").createSymbolChild("yourSymbolThatCreatedInStepO ne","#new");

                      like this you can get new animation of the same composition.

                      if you want to conroll the animation you just need to take the id of the new symbol your created using jquery or any way you like.

                      and example of control it:

                      $.Edge.symbol.get("#theNewID").play();





                      1 person found this helpful