How can I add two identical edge edge animations to the same html page?
I am using jquery mobile where the content of different pages will be on the same html page.
On page change (sliding page) other pages have the same animation because all html content will be positioned on one html page, only first edge animation will work, rest will not work.
I have two stages id
<div id="Stage" class="spring_animation"></div>
<div id="Stage2" class="spring_animation"></div>
Below is the code used for single step ( <div id="Stage"
), single 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 work.
Anyone in the community please help me solve this problem?
I think the problem is with the animate eyepiece and its API .
source to share
I followed this tutorial and it works. http://blogs.adobe.com/edge/2012/05/15/bootstrapping-edge-compositions/
It uses simple javascript to show / hide the correct composition. All the magic comes from 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 made a working example that changes the composition when a button is clicked.
source to share
Have you tried applying it to both ids:
<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>
source to share