4 Replies Latest reply on Feb 10, 2017 4:11 AM by victorc64053170

    Load page in the same frame:

    victorc64053170 Level 1
      I would like to know how to load a page within the same frame
      by changing the URL after this change,
      as these examples:

      Storytrail — Let the story be your guide.

       

      http://www.veintidosgrados.com/


      https://richard.gs/

      Waiting for a charitable response.
      Thanks

       

        • 2. Re: Load page in the same frame:
          g.bollmann Level 1

          Hello Victor, As it so happens I have JUST figured this out.

           

          ANSWER: Bootstrap Callback to load multiple compositions on top of each other

           

           

           

          You have to bootstrap the composition. That means you need a Master page that is a wrapper for all the others.

          I had to break up my composition and jump through some hoops because if I did not it resulted in a 30 second load time. That looks broken to the user. Without this technique, the user would also look at a blank white screen for 30 seconds. ugh.

           

          My Behaviors - 3 Compositions all load in the same position inside the wrapper.

           

          0 level - a splash (derived from PhoneGap Build config file) while a "Facade" loads. This is a semi-useful page which displays while the heavier main part loads. Note: I could not get animation here. Webkit is already choking on the big load. The animation started just before teh facade was dismissed. Looked broken, too.

           

          1st - loading of Facade. On compositionReady of the Facade, as specified by the Bootstrap Callback, the main composition loads.

           

          2nd - The compositionReady of the main composition instructs the Bootstrap Callback to dismiss the Facade and fade it out. Viola! Underneath the Facade is the ready-to-use Main composition.  Here, too, I delete the Facade symbol, effectively unloading it, to save on memory, etc.

           

          3rd - IF a user wants to go to the animation portion of my  app, the Bootstrap Callback is tied to a click event which loads my animation composition. Similarly, I have paths back and forth between these two: Main Tab and Video Tab.

           

           

          My code:

          I cannot give more help than I have worked out here below. I am not an expert, I can just figure things out. Maybe some part is unnecessary or inelegant or ??? . You have to work with this yourself. I'm not able to help beyond showing what I myself worked through. ALL I can say is that this worked for me. This took me FOREVER to figure out.

           

          By the time I copied this, I had removed many of my console.log markers that I used for debugging. I strongly suggest you put them everywhere to follow when the computer is processing what.

           

          I HIGHLY recommend using JShint.com to debug and fix your code. Invaluable!!!!! It helps you to see where you are missing brackets and braces. As you fix it the errors are recomputed in the sidebar. So you can see directly if things are going right.

           

          I wish you success!

          Grace

           

           

          1)

          In your Edge Animate Composition, click the stage and go to your control panel. Rename your edge composition from something like EDGE-302456   to be EDGE-MAIN.  As far as "renaming the stage" that is what is required. Below in the code you see Stage-Facade, Stage-MAIN, and Stage-Video.  That is necessary to give each Div a unique ID. However, the stage's actual name is EDGE-MAIN, for instance.

           

          My file names:

          MAINfirst = composition name EDGE-Facade

          MAINsecond = EDGE-MAIN

          MAINthird = EDGE-Video

           

          2)

          *****   paste below into a wrapper file called: index.html  *****

          I use either TextWrangler or Atom to create the file.

          YES, you need this Div "container" part.

           

           

          <!DOCTYPE html>

          <html style="height:100%;">

          <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

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

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

           

           

           

           

            <title>MAIN scratch-ish</title>

          <!--Adobe Edge Runtime-->

            <script type="text/javascript" charset="utf-8" src="edge_includes/edge.6.0.0.min.js"></script>

              <style>

                  .edgeLoad-EDGE-Facade { visibility:visible; }

                  .edgeLoad-EDGE-MAIN { visibility:hidden; }

                  .edgeLoad-EDGE-Video { visibility:hidden; }

           

           

           

           

            #Stage_Facade, #Stage_MAIN, #Stage_Video {

            position: absolute;

            overflow: hidden;

            left:0px;

            top:0px;

            }

           

           

           

           

            #Stage_MAIN, #Stage_Video {

            display: none;

            }

           

           

           

           

            .container

            {

             height:100%;

             width: 100%;

             position:relative;

             overflow: hidden;

             margin:0 auto;

            }

           

           

           

           

            .container2

            {

             height:100%;

             width: 100%;

             position:absolute;

             overflow: hidden;

             left:0px;

             top:0px;

            }

              </style>

           

           

           

           

          <script>

           

           

           

           

          AdobeEdge.loadComposition('MAINfirst', 'EDGE-Facade', {

              scaleToFit: "none",

              centerStage: "none",

              minW: "480px",

              maxW: "undefined",

              width: "100%",

              height: "100%"

          }, {dom:[ ]}, {dom:[ ]});

          //compId is not yet defined even here

           

           

           

           

          </script>

          <script>

          var wrapperCurrentPage = "EDGE-Facade";

          var loadedComps = {};

          var videoWasLoaded =0;

           

           

           

           

          AdobeEdge.bootstrapCallback(function(compId) {

          //console.error("TOP compId", compId);

          //console.log("BSCB.1 ");

          /// here IS THE FIRST REGISTRATION OF A COMPID ///

           

           

           

           

            loadedComps[compId] = AdobeEdge.getComposition(compId);

           

           

           

           

            AdobeEdge.Symbol.bindElementAction('EDGE-Facade', 'stage', 'document', 'compositionReady', function(sym, e) {

           

           

           

           

            if (wrapperCurrentPage == "EDGE-Facade") {

            wrapperCurrentPage = "EDGE-MAIN";

           

           

           

           

            sym.$("#Stage_MAIN").show();

           

           

           

           

            AdobeEdge.loadComposition('MAINsecond', 'EDGE-MAIN', {

            scaleToFit: "none",

            centerStage: "none",

            minW: "480px",

            maxW: "undefined",

            width: "100%",

            height: "100%"

            }, {dom: [ ]}, {dom: [ ]});

           

           

           

           

            //console.log("Facade: compId after load", compId);

            //console.log("Facade: wrapperCurrentPage after load", wrapperCurrentPage);

            } }); });

          ///

          ///

          ///

          AdobeEdge.bootstrapCallback(function(compId) {

          //console.log("BSCB.2  wait/fade Facade into MAIN");

          //console.log("compId", compId);

           

           

           

           

            loadedComps[compId] = AdobeEdge.getComposition(compId);

          //console.log("1");

           

           

           

           

            AdobeEdge.Symbol.bindElementAction('EDGE-MAIN', 'stage', 'document', 'compositionReady', function(sym, e) {

            if (wrapperCurrentPage == "EDGE-MAIN") {

            wrapperCurrentPage = "EDGE-Video";

           

           

           

           

            // safe to fade out Facade

            $("#Stage_Facade").animate({"opacity":0.00},500);

            setTimeout(function(){$("#Stage_Facade").hide();},400);

            // Facade is deleted because it is unnec. and takes memory

            setTimeout(function(){AdobeEdge.getComposition("EDGE-Facade").getStage().deleteSymbol();} ,1000);

           

           

           

           

            //console.info("EDGE-MAIN:  compId after deleteSymbol", compId);

            } }); });

          ///

          ///

          ///

           

           

           

           

          AdobeEdge.bootstrapCallback(function(compId) {

          console.log("BSCB.3.1  go to Video");

          console.warn("click VideoTab");

           

           

           

           

            var symbolName = "genderMenuFinal"; //gg+

           

           

           

           

          /////.....///// goes from MAIN into Video /////...../////

          AdobeEdge.Symbol.bindElementAction(compId, symbolName, "${hot--videoTAB}", "click", function(sym, e) {

            //console.log("compId", compId);

           

           

           

           

           

           

           

           

            if (compId == "EDGE-MAIN") {

            // aka First time Video load. Starting point is correct.

            if (videoWasLoaded ===0 ) {

            wrapperCurrentPage = "EDGE-Video";

           

           

           

           

            //MAIN placeholder views

            sym.$(".genderTAB").hide();

            sym.$(".genderTABretnoshow").hide();

            sym.$(".MAIN2videoTAB").show();

            sym.$(".MAIN2video-logo").show();

           

           

           

           

            //show video container

            // opacity is already 100% on the first load.

            $("#Stage_Video").show();

           

           

           

           

            //load Video

            AdobeEdge.loadComposition('MAINthird', 'EDGE-Video', {

            scaleToFit: "none",

            centerStage: "none",

            minW: "480px",

            maxW: "undefined",

            width: "100%",

            height: "100%"

            }, {dom:[ ]}, {dom:[ ]});

            //remember the load event has happened. Set it once only.

           

           

           

           

            videoWasLoaded = 1;

           

           

           

           

          // ! // EDGE-Video CR bootstrap removes EDGE-MAIN stage from view //

          // ! // EDGE-Video CR bootstrap sets timer to remove placeholders views from *MAIN* so when return all is correct

           

           

           

           

            } else {

            // aka CompId is correctly EDGE-MAIN. EDGE-Video was indeed loaded once before.

            // aka EDGE-Video has INDEED been loaded before: videoWasLoaded = 1;

            console.warn("opacity of MAIN or Video may be at 0 !!!!  show/hide are opposites?");

           

           

           

           

            // video up

            $("#Stage_Video").show();

            $("#Stage_Video").animate({"opacity":1.00},200); //,500);

           

           

           

           

            // MAIN down

            //$("#Stage_MAIN").animate({"opacity":0.00},500);

          //- // don't need timer? //setTimeout(function(){

            AdobeEdge.$("#Stage_MAIN").hide();//},300);

           

           

           

           

            }

           

           

           

           

            } else {

            //and compId is EDGE-Facade or EDGE-Video

            // do nothing

          // ? helpful to set videoWasLoaded = 0;  ?

            console.log("don't load Video yet");

            console.log("ELSE: diff comp is compId. videoWasLoaded", videoWasLoaded);

           

           

           

           

          // ? // preface the stage with AdobeEdge. or sym.  ?

            }

            }); //}

           

           

           

           

           

           

           

           

          //onerror (function(reinitiateLoad) {

            // should reinitiate loadComposition. May need to tap button twice

          // videoWasLoaded = 0;

            });

          ///

          ///

          ///

          ///

           

           

           

           

          AdobeEdge.bootstrapCallback(function(compId) {

          console.log("BSCB.4   wait/fade MAIN into Video");

          console.info("Video CR event");

            //loadedComps[compId] = AdobeEdge.getComposition(compId);

           

           

           

           

          AdobeEdge.Symbol.bindElementAction('EDGE-Video', 'stage', 'document', 'compositionReady', function(sym, e) {

            //This happens once. Clear MAIN only once Video is fully loaded

            setTimeout(function(){AdobeEdge.$("#Stage_MAIN").animate({"opacity":0.00},1000);},1600);

            setTimeout(function(){AdobeEdge.$("#Stage_MAIN").hide();},1700);

            //now safe to KILL the placeholders

           

           

           

           

            //TIMEOUT ... turn off the placeholder views so when you return, they do not block MAIN

            //Timeout is for CompositionReady, to be sure of return. However, should be IMMEDIATE from button.

            //Timer hopefully avoides interfereing with user scroll

          // ? // class apply to document?

            setTimeout(function(){

            sym.$(".genderTAB").show();

            sym.$(".genderTABretnoshow").hide();

            sym.$(".MAIN2videoTAB").hide();

            sym.$(".MAIN2video-logo").hide();

            },3000);

           

           

           

           

            }); });

           

           

           

           

          ///

          ///

          ///

          ///

           

           

           

           

          AdobeEdge.bootstrapCallback(function(compId) {

          console.log("BSCB.5.1  back to MAIN");

          console.warn("click go to MAIN from VideoMenu");

           

           

           

           

            var symbolName = "genderMenu_Video"; //gg+

           

           

           

           

            /////.....///// goes from Video back to MAIN /////...../////

            AdobeEdge.Symbol.bindElementAction(compId, symbolName, "${GenderTAB}", "click", function(sym, e) {

            // p.s. here everything has already been loaded

            if (compId == "EDGE-Video") {

            wrapperCurrentPage = "EDGE-MAIN";

           

           

           

           

            // put MAIN back in view container

            sym.$("#Stage_MAIN").show();

           

           

           

           

          // ? //can do this directly as class?

            // assure important elements are visible if they were made invisible elsewhere

            AdobeEdge.getComposition("EDGE-MAIN").$(".genderTAB").show();

            AdobeEdge.getComposition("EDGE-MAIN").$(".genderTABretnoshow").hide();

            // make sure opacity is up because it is elsewhere crossfaded

            AdobeEdge.$("#Stage_MAIN").animate({"opacity":1.00}, 200);

           

           

           

           

            //Double check that these 2 placeholder items are not present

            AdobeEdge.getComposition("EDGE-MAIN").$(".MAIN2videoTAB").hide();

            AdobeEdge.getComposition("EDGE-MAIN").$(".MAIN2video-logo").hide();

           

           

           

           

            }); });

          ///

          ///

          ///

           

           

           

           

          ///  separate. THIS IS JUST A NOTIFIER

          AdobeEdge.bootstrapCallback(function(compId) {

          //console.log("BSCB.6  NOTIFIER");

          //console.log("compId", compId);

          //console.log("current wrapper", wrapperCurrentPage);

          console.error("Composition loaded...", compId);

            });

           

           

           

           

            </script>

           

           

           

           

          <!--Adobe Edge Runtime End-->

          <style type="text/css">

            @font-face {

            font-family: gv-de-comfortaa;

            src: url(fonts/Comfortaa-Regular.ttf);

            }

            @font-face {

            font-family: gv-de-comfortaa-light;

            src: url(fonts/Comfortaa-Light.ttf);

            }

            @font-face {

            font-family: gv-de-comfortaa-bold;

            src: url(fonts/Comfortaa-Bold.ttf);

            }

          </style>

          <style>

            * {

            -webkit-tap-highlight-color:rgba(0,0,0,0);

            -webkit-tap-highlight-color: transparent; /* For some Androids */

            -webkit-touch-callout: none;

            -webkit-user-select: none;

            -webkit-backface-visibility: visible;

            backface-visibility: visible;

            }

           

           

           

           

            text {

            -webkit-font-smoothing: antialiased;

            }

           

           

            .menuDisplay {

            position:absolute;

            top:0px;

            -webkit-scrollbar: display: none;

            -webkit-overflow-scrolling: touch;

            }

           

           

            .UI {

            font-family: -apple-system, "RobotoRegular", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

            }

           

           

            img.lazyFirst, img.lazyMAIN, img.lazyGenderMenu, img.lazyMain, img.lazySidebar, img.lazyVideo, img.lazyVideoMenu {

            min-width: 5px;

            min-height: 5px;

            display: block;

            }

          </style>

           

           

           

           

          </head>

          <script>

          /*

          Though z-index is mentioned below, you cannot target it. I think the z-index doesn't mean anything here but rather the actual stack of divs as written below. Facade is on top of Main is on top of Video.

          ... script tag is here just so I can put in a commented note to you. delete ...

          */

          </script>

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

            <div class="container">

            <div id="Stage_Facade" class="EDGE-Facade container2" style="display:block; z-index:3;">

            </div>

            <div id="Stage_MAIN" class="EDGE-MAIN container2" style="display:none; z-index:2;">

            </div>

            <div id="Stage_Video" class="EDGE-Video container2" style="display:none; z-index:4;">

            </div>

            </div>

          </body>

          </html>

          2 people found this helpful
          • 3. Re: Load page in the same frame:
            g.bollmann Level 1

            Please click the little green star by my answer to mark it "answered" for the community.

            • 4. Re: Load page in the same frame:
              victorc64053170 Level 1
              g.bollmann
              Thank you, friend, for your help and for your time invested in responding ... I will try here. Do you have the file made for download to see how the dynamics worked?