10 Replies Latest reply on May 28, 2013 11:47 AM by a.jonesLargeAnimal

    stop() overrides css that is applied via javascript (Updated 5/15/2013 1:00EST)

    a.jonesLargeAnimal

      I previously asked a question here (http://forums.adobe.com/thread/1212488?tstart=0) and have realized that it's not very well explained, so this is a v2.0 to explain my problem

       

      First, to setup, create a new project and create a new symbol. Structure your new symbol as such

       

      AdobeEdgeSymbolStructure.JPG

       

      Make sure that the background div's color isn't the default grey. For some reason this works as expected when it's the default grey color, but it breaks if it has a different background color.

       

      The timeline of the symbol looks like this

       

      AdobeEdgeSymbolStructureTimeline.JPG

       

      The keyframes on 'otherRectangle' just change the color

       

      After you have this generic symbol setup, add the symbol to your stage.

       

      Attach the following code snippets

       

      Stage

      - document.compostitionReady

       

      var mySymbolObject = sym.getSymbol("GenericSymbol");
      
      
      var targetElement = mySymbolObject.$("background");
      
      
      targetElement.css({"background-color":"#111111"});
      
      

       

      GenericSymbol

      -background.mousedown

       

      sym.stop("down");
      

       

      -background.mouseover

       

      sym.stop("over");
      

       

      -background.mouseup

       

      sym.stop("over");
      

       

       

      Then run this. When you first see the screen you should see a black rectangle with another rectangle inside of it.

      AdobeEdgeStage1.JPG

       

      if you mouse over, you'll see the inner (in this case small blue) rectangle turn to a different color. You'll also see the outer black rectangle revert to whatever color the symbol originally had it as (in this case red)

      AdobeEdgeStage2.JPG

       

      then if you click on it (in this case the red rectangle) you'll see the inner rectangle change to a 3rd color (in this case green)

       

      AdobeEdgeStage3.JPG

       

      I'm never modifying the outer (red) rectangle other than at startup, change it to black.

       

      The expected outcome would be if I (on startup) set a css property, it stays that property for the duration of the symbol unless it's supposed to change via key frames.

       

      Long story short, the red rectangle should have stayed black because even though it's red in the symbol, I set it to black after startup so that property should persist for as long as I don't change it.

       

      If all this is too much and you just want a project that already does it you can download a zip here (http://static-media-live-ultimate-playtoga.s3.amazonaws.com/ultimate/adobe_stop_css_overri de_bug/AdobeStopOverrideCSSBug.zip)