6 Replies Latest reply on Aug 10, 2015 2:07 AM by jhtmk

    Css position fixed on dynamically created symbol on a responsive scaling stage??

    jhtmk Level 3

      I have a composition that utilises responsive scaling and I’m trying to have a position:fixed element on it.

       

      It can be achieved by appending to the body:


      sym.$("body").append(sym.$(“fixedElement").css({"position":"fixed","z-index":"-1"}));


      However that takes it out of the flow of the stage and it won’t scale with the rest of the composition rendering this solution unusable in this context.


      I’m starting to believe that it’s impossible to have a fixed position element on a scalable stage because the scale is overriding the position property??


      So I’ve been trying really hard to figure out a workaround, but I’m still a newbie to coding and I’m a bit slow.


      I thought maybe if I deleted the symbol dynamically on resize and then created it again I could essentially have it fixed and just destroy it every time the stage scales and then have the new symbol’s position updated and fixed again.


      here is the code I’m using:


      IN COMPOSTION READY:

      ____________________________________________________________________

      // store your symbol

      sym.mySymbol;

       

      sym.createItem = function(){

                   // pull symbol from library, add to Stage

                   sym.mySymbol = sym.createChildSymbol(“fixedElement", “Stage");       

      }

      sym.removeItem = function(){

           // delete symbol

           sym.mySymbol.deleteSymbol();

      }

       

      var resizeId;

        $(window).resize(function() {

      clearTimeout(resizeId);

      resizeId = setTimeout(doneResizing, 500);

      });

       

      function doneResizing(){

      //whatever we want to do

       

      sym.getComposition().getStage().createItem();

       

      }

      ___________________________________________

       

      IN RESIZE:

       

      sym.getComposition().getStage().removeItem();

       

      ____________________________________________


       

      But none of the CSS I’m applying to the the created symbol is being applied and I fear that even if I can get it to work the position fix is going to be overridden but I thought maybe if !important is included?

       

      But I’ve also tried just having external CSS and dynamically adding and removing a class (fix and unfix) with !important attaching to resize...didn’t work.

       

      Can you dynamically create a symbol and append to body (where the CSS won’t be overridden) and then delete and recreate it updating it’s position on resize? or simply just fix and unfix with add/remove class on resize?

       

      Am I thinking about this all wrong?

       

      Is there any solution or is it just impossible in this context?

       

      Any advice greatly appreciated,

       

      Thanks in advance.