Targeting a symbol within a symbol

sym.getComposition().getStage().getSymbol("card").$("TextSym").html("Hello World");

This is working for me.

try this

var r = sym.createChildSymbol("card", "Stage");

r.$("TextSym").html("H ello World");

Hi there,

When you create a symbol dynamically, the symbol is assigned an id by Animate.

In you case, card is the original symbol and the one that is created has a different id.

When you create an symbol dynamically, you can also assign an id to it and then use it as you would a symbol that was added to the stage manually.

Here is how to add an ID to a created symbol. When you use it, then do not forget to add the # when you use that new ID.

var newCard = sym.createChildSymbol("card", "Stage");

newCard.element.attr("id","newIDName");

// example of use

sym.getSymbol("#newIDName").$("Text").html("some text here");

What if we want to target a symbol inside a symbol that later needs to reference dynamic data from a json file.  Like the below code block where thumb1 is a symbol inside of teamgroup1 which rests on the stage.  The elements holder, the name, the title and biography are all inside the symbol thumb1 which in turn is inside teamgroup1.

We need to do it this way because when we move the timeline elsewhere we want a different set of thumbs to load with a different Json.

@

   $.getJSON('staffnames.json', function(data){

    {

     var s1 = sym.getComposition().getStage().getSymbol("teamgroup1").$("thumb1");

    s1.$("holder").css({"background-image":"url('"+data[0].image+"')"});

    s1.$("thename").html(data[0].thename);

    s1.$("thetitle").html(data[0].thetitle);

    s1.$("biography").html(data[0].biography);

You just need to use the proper scope the same way as a normal symbol. So if your symbol is inside a symbol then you use:

Note I use i since I am iterating the data with a next button but you can call any element with its index.

• text

sym.getSymbol('name').getSymbol('insideSymbolname').$('text').html(data[i].question);

• image - with attr  - change from div to img in the top left - all images are the same size

sym.getSymbol('name').getSymbol('insideSymbolname').attr('src','images/'+ data[i].image +'.jpg');

• image with css - use empty div for container - images fit inside the div in at least the height or the width

sym.getSymbol('name').getSymbol('insideSymbolname')..css({'background-image':'url("images/ '+data[i].image + '.jpg")','background-repeat':'no-repeat'});

Thanks!

I modified my code as per your recommendation and I got a partial success.

Here's the code.  See he // comments.

$.getJSON("staffnames.json", function(data){

  {

  var s1 = sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); //this is working it understands that the data from the JSON should be pulled into the nested symbol.

  var m1 = sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); // THIS VAR IS NOT WORKING.  Lower down I'm binding a series of events attached to this m1 var.  What's interesting is, in my original file shared yesterday, this worked.  The only difference is that the s1 var was one level up in that case.

  s1.$("holder").css({"background-image":"url('"+data[0].image+"')"});

  s1.$("thename").html(data[0].thename);

  s1.$("thetitle").html(data[0].thetitle);

  m1.on({

         mouseenter: function() {

             // Do something

             sym.$("biographyareaCopy").html(data[0].biography);

             sym.$("thename").html(data[0].thename);

             sym.$("thetitle").html(data[0].thetitle);

             sym.$("certifications").html(data[0].certifications);

             sym.$("thename").css ({"position":"relative",

             "top":"0px"});

  alert( "hovered over a div" );

         },

         mouseleave: function() {

             // Do something

             //alert( "mouse left a div" );

         },

         click: function() {

             // Do something

             //alert( "clicked on a div" );

         }

     });

  }

});

Assuming that all the elements you have are in the symbol, could you try this:   (otherwise your elements' scope is wrong. You might want to put the whole scope of these elements like:

m1.$("biographyareaCopy").html(data[0].biography);  which uses m1 instead of sym.

sym.getSymbol("teamgroup1").$("teamThumb1").mouseenter(function(){

   // Do something

  sym.$("biographyareaCopy").html(data[0].biography);

  sym.$("thename").html(data[0].thename);

  sym.$("thetitle").html(data[0].thetitle);

  sym.$("certifications").html(data[0].certifications);

  sym.$("thename").css ({"position":"relative","top":"0px"});

   alert( "hovered over a div" );

});

sym.getSymbol("teamgroup1").$("teamThumb1").mouseleave(function(){

  // Do something

  alert( "mouse left a div" );

}),

sym.getSymbol("teamgroup1").$("teamThumb1").click(function(){

  // Do something

  alert( "clicked on a div" );

});

Success.  This worked below. I wish I could markup this code better so it was obvious where the issues lay.

The two lines which are bolded were the problem.  The first bolded line was originally written the same on the second bolded line.  I don't understand the difference between

sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); and

sym.getSymbol("teamgroup1").$("teamThumb1")

As far as calling a symbol is concerned… what is the difference between .$ and .getSymbol

This is the bit that worked.

//  ========================== TEAM 1  ========================== //

$.getJSON('staffnames.json', function(data){

  {

var s1 = sym.getSymbol("teamgroup1").getSymbol("teamThumb1"); // first bolded line

  s1.$("holder").css({"background-image":"url('"+data[0].image+"')"});

  s1.$("thename").html(data[0].thename);

  s1.$("thetitle").html(data[0].thetitle);

  s1.$("biography").html(data[0].biography);

  //start mouse events//

         sym.getSymbol("teamgroup1").$("teamThumb1").mouseenter(function(){ // second bolded line

         /*change position of the name */ sym.$("thename").css ({"position":"relative","top":"0px"});

         /*place JSON data in text blocks*/

         sym.$("biographyareaCopy").html(data[0].biography);

         sym.$("thename").html(data[0].thename);

         sym.$("thetitle").html(data[0].thetitle);

         sym.$("certifications").html(data[0].certifications);

         // next line returns the name text back to it's 0 position.  See line 24

         sym.$("thename").css ({"position":"relative",

             "top":"0px"});

         /*alert( "hovered over a div");*/

})//close mouse enter //

//keep close outs below

  }

});

getSymbol is a native animate handle that allows interaction with the symbol while $ is a jquery handle that interact on a DOM element which you need for the click event that is jquery.

Hope this makes sense.
I am glad you got all this to work.