2 Replies Latest reply on Feb 6, 2015 8:27 PM by Jack Cain

    Change Link Depending on ID

    Jack Cain

      I know this is simple, but it's been a year since I've touched JavaScript, and then I don't know what limits Edge Animate puts on calls within files. Every time I try to make a simple addition it throws an error. I've got to move on, but it would be nice for this simple animation to work like the idea said it would at 2:30 AM.


      Here's what I have:


      I have an animation which appears  four times on a page. When a user clicks the animation, it plays a short timeline telling them to double-click the animation. When the user double-clicks, they are taken to another page. Each of these four animations needs to point to a different page.


      What I want to do is grab one of two things:


        1. I can manually change the ID for the "Stage" ID to "vance", for example, then use a variable to assign the URL.
        2. I could grab the href value and put it onto the end of the base URL.


      Here's the HTML:


      <div class="textBox">


          <div class="animposition">

              <div id="Stage" class="EDGE-knock2enter"></div> <!-- end EDGE-knock2enter div -->

          </div> <!-- end animposition div -->


          <h2><a href="vance.html" target="_blank">Vance<br>Randolph</a></h2>


          <p>Blah, blah, blah</p>


      </div> <!-- end textbox div -->


      Here's the relevant parts of the edgeActions.js file:


      (function($, Edge, compId){

      var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes


         //Edge symbol: 'stage'

         (function(symbolName) {


            Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

               // insert code to be run when the composition is fully loaded here



               // Show an element



               // Show an element



               // Hide an element




            //Edge binding end


      <other bindings removed>


            Symbol.bindElementAction(compId, symbolName, "${_Rectangle}", "dblclick", function(sym, e) {




               // Play an audio track



               // Replay an audio track from the beginning, regardless of current playing state

               sym.$("knock_012")[0].currentTime = 0;

               if (sym.$("knock_012")[0].paused) {




               // Navigate to a new URL in the current window

               // (replace "_self" with appropriate target attribute)

               var vance="http://urlurlurl/vance.html";

               var may="http://urlurlurl/may.html";

               var otto="http://urlurlurl/otto.html";

               var alan="http://urlurlurl/alan.html";


               setTimeout(function() {

               window.open(vance, "_self");       




            //Edge binding end



         //Edge symbol end:'stage'


      })(jQuery, AdobeEdge, "EDGE-knock2enter");

        • 1. Re: Change Link Depending on ID
          resdesign Adobe Community Professional & MVP

          I would use a flag and conditional


          A = 0;



          and change the variable in click event (you can have other possibilities and you could use a switch instead).


          if (A==0){

          // go to url #1



          if (A==1){

          // go to url #2



          if (A==2){

          // go to url #3



          if (A==3){

          // go to url #3



          1 person found this helpful
          • 2. Re: Change Link Depending on ID
            Jack Cain Level 1

            Thanks for the response!


            I'm going to do my best to reply, but please understand that I'm not up on JS as well as I should be, and this is going to bug me until I get it right! I also thought of a conditional, but I couldn't retrieve the value of the div's ID without throwing an error in the edgeActions.ls file.


            If it helps, the website is DeNoon History in the Ozarks – Preserving the Ozark Sound


            If you were to scroll down about 1/2 of the page, you will see a series of four brass door knockers on the left. Essentially, to decrease size I don't want to have four separate animations, but when each animation is double-clicked, it should take the user to the appropriate URL.


            So, per your example above, I need to be able to retrieve the ID's value, compare it to the variables listed, then populate the window.open function accordingly. It's setting the "A" from the given HTML that's the problem. Please feel free to tell me if I am not using the terminology correctly - I'm not shy and any kind of help is appreciated!