1 Reply Latest reply on Jul 2, 2014 1:43 PM by billw2011

    How do I resize a symbol instance from within itself?


      I am dynamically adding symbol instances to create a menu from json data. I want the menu item height to expand during mouse over.

      So I want to animate the height of the symbol from within itself, but the root div element is read only.

      My solution is to animate a rectangle, then copy its height to its parents height, which once the symbol is instanced should be a normal editable div.

      My timeline update function in the symbol looks like this:

      sym.$("HeightRect").parent().height( sym.$("HeightRect").height() );

      But it doesn't work. sym.$("HeightRect").parent() doesn't seem to return the instance of the symbol.

      Any ideas?

        • 1. Re: How do I resize a symbol instance from within itself?
          billw2011 Level 1

          So looking in to this further because it seems absurd that it wouldn't be possible:

          My original code is in-fact correct but Edge overrides the height function, and for some reason is stopping me from being able to modify the height.


          Their height function code is below, one of the checks it does to see if the height I pass in can be applied fails. Any experts here who can tell me why please? Why is Adobe so obsessed with stopping me from modifying a symbol instance root?


                    var ele = this[0],

                          h = $.data(ele, 'ch'),

                          dirty = $.data(ele, 'ch_d') == 1 || $.data(ele, 'ch_d') === undefined,

                          managed = Edge.Symbol.get(ele) || $.data(ele, 'domDef'),

                          isBody = ele.nodeType === 1 && ele.tagName === 'BODY';



                      // We don't support % yet, so if the height is in percent, get it fresh everytime

                      dirty = dirty || $.data(ele, 'u_h') == "%";



                      if (!managed || isBody || dirty || h === undefined || h === null || ele == ele.window || ele.nodeType === 9) {

                          h = height.apply(this, arguments);

                          $.data(ele, 'ch', h); // ch = cached height

                          $.data(ele, 'ch_d', 0); // cw_d = cached height dirty


                      return h;


          So I found that the following DOES work, and now I get exactly the behavior I expect:

          sym.$("HeightRect").parent().css({height: hgt});

          Except that sym.$("HeightRect").parent().height() ALWAYS returns the original height. I suspect there is some concept here I am not getting... Maybe I am getting class values from parent()? But why?