9 Replies Latest reply on Jun 1, 2015 12:25 PM by CPedrick

    .$("elementName") vs .getSymbolElement() - what is the difference?


      I have a symbol called Chart on the main stage, along with a symbol called Dot in the library. Dot contains an element (just a basic rectangle) called "bar".

      I wanted to dynamically create a couple of copies of Dot, with it's element bar on the main stage. I could create the copies just fine using the code shown below, but they did not line up correctly vertically. Each copy dropped down the stage by a bit. 

      var Bars = new Array();

      var xPos = 8;

      for (i=0;i<3;i++){

         Bars[i] = sym.createChildSymbol("Dot", "Chart");

         Bars[i].$("bar").css ('position', 'absolute');

         Bars[i].$("bar").css ('left', xPos);

         xPos = xPos + 40;

        } //end for


      It drove me nuts. I tried including the following to force the Y position:

          Bars[i].$("bar").css ('top', yPos);


      That made absolutely no difference at all. It drove me nuts.


      Finally, I changed the code in the loop to:

               Bars[i] = sym.createChildSymbol("Dot", "Chart");

               Bars[i].getSymbolElement().css("position", "absolute");

               Bars[i].getSymbolElement().css("left", xPos);

               Bars[i].getSymbolElement().css("top", yPos);


      That lines everything up perfectly.


      I am thrilled that I have a solution, but now I also have a question:


      Why does the syntax Bars[i].$("bar")  not work, but the syntax Bars[i].getSymbolElement()  positions things correctly?


      Even more importantly, what if I had two elements within the Dot symbol and wanted to position them independently of each other? How would I address them by name or ID to differentiate them?


      Thanks for any light anyone can shed...