10 Replies Latest reply on Nov 25, 2014 1:51 AM by eldin.didic

    Multiple responsive compositions on 1 page with edgecommons

    eldin.didic Level 1

      Hi Guys,

       

      I am trying to determine what in the is going on here, got two responsive compositions using edgecommons in a single html page. Below is the runtime code - however not having much luck getting them both displayed at the same time. I am able to see each composition on the page when I remove one of the two load functions, but if I use both, there is no joy. I must be doing something wrong but cannot determine what. P.S. all files and assets loaded in the root directory.

       

      <script>

        var custHtmlRoot="";

        var script = document.createElement('script');

        script.type= "text/javascript";

        script.src = custHtmlRoot+"edge.5.0.0.min.js";

        var head = document.getElementsByTagName('head')[0], done=false;

        script.onload = script.onreadystatechange = function(){

        if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {

        done=true;

       

        //1st composition

        (function() {

        var custHtmlRoot="";

        var opts ={

        scaleToFit: "none",

        centerStage: "none",

        minW: "0px",

        maxW: "undefined",

        width: "100%",

        height: "100%"

        };

        opts.htmlRoot =custHtmlRoot;

        AdobeEdge.loadComposition('clients', 'clients', opts,

        {"dom":{}}, {"dom":{}});

        })();

       

        //2nd composition

        (function() {

        var custHtmlRoot="";

        var opts ={

        scaleToFit: "none",

        centerStage: "none",

        minW: "0px",

        maxW: "undefined",

        width: "100%",

        height: "100%"

        };

        opts.htmlRoot =custHtmlRoot;

        AdobeEdge.loadComposition('solutions', 'solutions', opts,

        {"dom":{}}, {"dom":{}});

        })();

       

        script.onload = script.onreadystatechange = null;

        head.removeChild(script);

        }

        };

        head.appendChild(script);

      </script>

       

      <style>

          .edgeLoad-clients { visibility:hidden; }

          .edgeLoad-solutions { visibility:hidden; }

      </style>

       

      <body style="margin:0;padding:0;height:100%;">

        <div id="Stage1" class="clients"></div>

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

          <meta content="minimum-scale=1, width=device-width, maximum-scale=1, user-scalable=yes" name="viewport">

      </body>

      Any help would be appreciated - Cheers

       

      Wish the adobe team would streamline this in the next update. Makes real life instances very difficult to figure out.