1 Reply Latest reply on Apr 7, 2013 3:35 PM by heathrowe

    Adding CSS to a property action

    shadowfax007 Level 1

      Hi all-

       

      It's mr again :-)

       

      Ok, I've got a question that may be better solved in a different way but this sounded good to me if it is possible:

       

      I have a slideshow with oval buttons on the botton of the stage (20 of them).

       

      I've built this by making each "slideshow" a symbol (They aren't just easy image sliders but contain several elements).  On the main stage page, I add the symbols and create a button and action for each symbol.

       

      so far, so good.  I have six symbols and buttons and they all work as expected!.

       

      What I want to do, however, is have it so when you click on a button, it changes color and maintains that color until another button is selected.

       

      I was thinking that if I could add this to the button action, that would be soo sweet! Something like (.css {color: "white"} (or it is background-color - I'll have to double check :-)

      Either way, is this possible, or is their a better, easier way (by keepim it in the action code then all the code for the button is together in one place for me)...

       

      I figure if needed I could list each button in each action and set them all to the main color - then set the button chosen to the new (white) color - Is that too much code?

       

      I'm already having to do this in the button action of each button (perhaps because they are symbols but I had to make sure they were ALL set to "hide" before I could "show" the button in question:

       

      sym.$("PS-one").hide();

      sym.$("PS-two").hide();

      sym.$("PS-three").hide();

      sym.$("PS-four").hide();

      sym.$("PS-five").hide();

      sym.$("PS-six").show();

      sym.getSymbol("PS-six").play();

       

       

      Thanks!

       

      James

        • 1. Re: Adding CSS to a property action
          heathrowe Most Valuable Participant

          Hi James, yes background-color is accurate.

           

          So in your case for example, something like this should work

           

          /////////////// onClick ////////////////////

           

          sym.getSymbol("PS-six").$("directElementName").css({

              "background-color": "#fff"

            });

           

          ///////////////////////////////////////////////

           

          The above simply gets the symbol reference (Ps-six) followed by the element handler you want to affect, followed by the css property.

          I don't know the actual name of the element so my mock reference "directElementName" has to match the name of you element (that resides in symbol PS-six).

           

          hth

          Darrell