How to add two same adobe edge animation in single html page?

Question

I am using jquery mobile where different pages contents will be in one html page.

On page change(sliding page), other pages have same edge animates, because of all html contents will be located in single html page, only first edge animate will work, rest will not work.

I have two stage id's

<div id="Stage" class="spring_animation"></div>

<div id="Stage2" class="spring_animation"></div>

Below code used for one stage(<div id="Stage") edge animate to work...

<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="spring_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->

<script type="text/javascript">
 jQuery(document).ready(function(){        
     jQuery('[data-url="10.htm"]').live('pageshow', function(){

        if($ && $.Edge && $.Edge.symbol.get($("#Stage"))){
            $('#Stage, #Stage > div').show();
            $.Edge.symbol.get($("#Stage")).play(0); 
        }

    });   
 });       
</script>

But, it doesn't works.

Will anyone in community please help me solve this issue?

I think, problem is relies with adobe edge animate and its API.

Have you find a solution.? Do you still need help with that.? — Konstantinos Margaritis, Apr 08 '13 at 11:11
@KonstantinosMargaritis I don't get a good solution, but work around is done. What I done is drop the `id` `Stage` and add the class for element with getComposition `$.Edge.getComposition( 'yourclass' ).play(0);` and wrap it inside an other div container. On each page show check the corresponding element with class is there or not. **If** no element is there(no animation have played yet) use the normal method **else** use a [detach](http://api.jquery.com/detach/) the elements from where it is placed and append(http://api.jquery.com/append/) to a wrapper div on page show of page. — Justin John, Apr 08 '13 at 13:59
@JD. Actually I forget the stuff. I managed to get it working by same thing explained in my previous comment. — Justin John, Aug 25 '14 at 08:35

score 1 · Answer 1 · answered Mar 23 '13 at 14:12

I followed this tutorial and it works. http://blogs.adobe.com/edge/2012/05/15/bootstrapping-edge-compositions/

It uses plain javascript to show/hide the right composition. All the magic is beacause of the callback: AdobeEdge.bootstrapCallback(function (compId) { //your function will be called when the composition is ready to play });

As stated in the comment this callback will be called when the composition is ready. I did a working example that changes the composition on button click.

radu florescu · Answer 2 · 2013-01-25T06:41:33.170

0

Have you tried applying it to both of the ids present:

<script type="text/javascript">
    $(document).ready(function(){
    jQuery('[data-url="10.htm"]').live('pageshow', function(){

        if($ && $.Edge && $.Edge.symbol.get($("Stage"))){
            $('#Stage, #Stage > div').show();
            $.Edge.symbol.get($("#Stage")).play(0);

        }
    });

    jQuery('[data-url="11.htm"]').live('pageshow', function(){

        if($ && $.Edge && $.Edge.symbol.get($("Stage2"))){
            $('#Stage2, #Stage2 > div').show();
            $.Edge.symbol.get($("#Stage2")).play(0);

        }
    });
});

</script>

edited Jan 25 '13 at 06:41

answered Jan 25 '13 at 06:27

radu florescu

4,315
10
60
92

The problem doesn't lies in jquery. It's in edge animate... Above syntax will work when edge created the its elements inside `stage` div. – Justin John Jan 25 '13 at 06:29
.live( events, handler(eventObject) )Returns: jQueryversion deprecated: 1.7, removed: 1.9 Description: Attach an event handler for all elements which match the current selector, now and in the future. – radu florescu Jan 25 '13 at 06:32
Thanks... I know, I am using v1.8.3. Have you had exposure in [adobe edge animate](http://html.adobe.com/edge/animate/) and its API? – Justin John Jan 25 '13 at 06:36
No, only jQuery, but it is rather strange not to use that code in document.ready, not there, because your dom isn't fully loaded. – radu florescu Jan 25 '13 at 06:39
The edge will create its elements inside `#stage` div on loading `spring_edgePreload.js`. The code in ready handler is used to play animate again, when the page is again slided back to animation page(`10.htm`). If no elements are created in second stage, how we can play it?. The both the edge animates are in single html page and it causes the problem. Without having exposure in adobe edge animate, I can't fully convince you what is my problem. Thanks your answer... – Justin John Jan 25 '13 at 06:46
I still think that you should check using document.ready as suggested, otherwise the code you wrote will be executed as soon as it is rendered on page. I'm sorry that I don't have exposure with API. – radu florescu Jan 25 '13 at 06:50
I am sorry, I didn't added the `document.ready` in my post. I already have it in my local file. Thanks for pointing it. – Justin John Jan 25 '13 at 06:56

How to add two same adobe edge animation in single html page?

2 Answers2

Linked