19 Replies Latest reply on Aug 15, 2013 12:11 PM by resdesign

    Problem with a class attr

    David_Tardiveau

      Hello,

       

      I'm trying to execute this command…

       

      sym.$("cible").attr({class:"pancarte"});

       

      … but nothing happens.

       

      Of course, i've tried to apply the pancarte class in my HTML document (to a <p>) and it works.

      I also tried with the addClass() method, but nothinh happened.

       

      I'm not able to apply a class to an element in Edge Animate

       

      David

        • 1. Re: Problem with a class attr
          resdesign Adobe Community Professional & MVP

          Bonjour David et bienvenue sur le forum. Vous pouvez ajouter les classes dans Edge directement ou bien vous pouvez utiliser addClass() (voir ci-dessous).

          Is this element cycle created or put on the stage? If put on the stage you can give it the classname at design. You should find the class button on the left side of the screen.

          2013-08-14 07_29_06-index.html - Edge Animate CC.png

          If you want to add a class after creation then you can use addclass.

          sym.$('cycle').addClass('pancarte');

           

          then you could have all the elements with the class do something or be changed for example:

          sym.$('.pancarte').css({'left': 100});

          1 person found this helpful
          • 2. Re: Problem with a class attr
            David_Tardiveau Level 1

            Thank you for your answer.

             

            I tried both, but it doesn't want to.

             

            I know that my mesScripts.css is ok because when i add <p class="style2">Test</p> in my document, i can notice it's ok.

             

            @charset "UTF-8";

             

             

            .pancarte {

                      font-weight: bold;

                      font-size: 24px;

                      color: #F00;

                      font-family: "Arial Black", Gadget, sans-serif;

            }

             

             

            .style2 {

                      color: #03C;

            }

             

            But, when i try

             

            sym.$("cible").addClass('style2');

             

            or

             

            sym.$("cible").attr({class:'style2'});

             

            it doesn't.

             

            Nerver mind. I gonna keep on searching my bug.

             

            Thanks a lot for your answer, i known i do what must be done. There must be a bug somewhere else.

             

            Merci.

             

            David

            • 3. Re: Problem with a class attr
              resdesign Adobe Community Professional & MVP

              You need the period (point en francais) in front of the class.  .style2  not style2

               

              sym.$("cible").addClass('.style2');

              • 4. Re: Problem with a class attr
                Endoplasmic

                resdesign wrote:

                 

                You need the period (point en francais) in front of the class.  .style2  not style2

                 

                sym.$("cible").addClass('.style2');

                 

                Hmm, don't think you do: http://api.jquery.com/addClass/

                • 5. Re: Problem with a class attr
                  resdesign Adobe Community Professional & MVP

                  Hum... Let me see further.

                  • 6. Re: Problem with a class attr
                    resdesign Adobe Community Professional & MVP

                    Did you load your css file?

                     

                    Right no period before in this case.

                     

                    Check out this thread at the bottom for more info and a sample from Gil:

                    http://forums.adobe.com/message/5527564#5527564

                     

                     

                    You add the period in other cases when the class has been created like:

                     

                    sym.$('.style2').css('left', 100);

                    • 7. Re: Problem with a class attr
                      joel_pau Level 5

                      Marie : apparement, il veut utiliser un fichier externe (). Donc, il faut le "charger".

                      Hi David,

                      Your stylesheet needs to be loaded.

                      You can load stylesheet using this code:

                           $("<link/>",{"rel":"stylesheet", "type":"text/css", "href":"css/menuLogo.css" }).appendTo("head");

                      or this one:

                           $("<link/>",{"rel":"stylesheet", "type":"text/css", "href":"css/menuLogo.css" }).appendTo("#Stage");

                      • 8. Re: Problem with a class attr
                        resdesign Adobe Community Professional & MVP

                        Hi Joel.

                        Right - Our post crossed!

                        • 9. Re: Problem with a class attr
                          David_Tardiveau Level 1

                          I've got this in my HTML document.

                           

                          <head>

                                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                                    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

                                    <title>Test</title>

                                    <link href="mesStyles.css" rel="stylesheet" type="text/css" />

                          <!--Adobe Edge Runtime-->

                              <script type="text/javascript" charset="utf-8" src="Essai_edgePreload.js"></script>

                              <style>

                                  .edgeLoad-EDGE-3480864 { visibility:hidden; }

                              </style>

                          <!--Adobe Edge Runtime End-->

                                   

                          </head>

                           

                          Am i obliged to load by using the jquery method ?

                          • 10. Re: Problem with a class attr
                            David_Tardiveau Level 1

                            Whatever, i'd like to thank everybody, here, in this Forum.

                            • 11. Re: Problem with a class attr
                              Endoplasmic Level 2

                              David_Tardiveau wrote:

                               

                              I've got this in my HTML document.

                               

                              <head>

                                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                                        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

                                        <title>Sans titre</title>

                              <!--Adobe Edge Runtime-->

                                  <script type="text/javascript" charset="utf-8" src="Essai_edgePreload.js"></script>

                                  <style>

                                      .edgeLoad-EDGE-3480864 { visibility:hidden; }

                                  </style>

                              <!--Adobe Edge Runtime End-->

                                        <link href="mesStyles.css" rel="stylesheet" type="text/css" />

                              </head>

                               

                              Am i obliged to load by using the jquery method ?

                              Nope, that's fine (I tend to keep my non-Edge stuff above <!-- Adobe Edge Runtime --> so they load first, and easier to keep track of).

                              1 person found this helpful
                              • 12. Re: Problem with a class attr
                                resdesign Adobe Community Professional & MVP

                                I prefer to load them in Edge!

                                • 13. Re: Problem with a class attr
                                  David_Tardiveau Level 1

                                  OK, i've found the problem. Everything was alright, the problem is the about the attributes in the style sheet.

                                   

                                  I could notice that in Edge, for the attributes, i must take off the "-" caracter between 2 words to replace it by an uppercase. Is it the same in a style sheet ?

                                   

                                  .laCouleur {

                                            font-weight: bold;

                                            color: #F00;

                                            font-size: 14px;

                                  }

                                   

                                  In this exemple, even when i use only the color attribute, it doesn't work.

                                  • 14. Re: Problem with a class attr
                                    Endoplasmic Level 2

                                    David_Tardiveau wrote:

                                     

                                    OK, i've found the problem. Everything was alright, the problem is the about the attributes in the style sheet.

                                     

                                    I could notice that in Edge, for the attributes, i must take off the "-" caracter between 2 words to replace it by an uppercase. Is it the same in a style sheet ?

                                     

                                    .laCouleur {

                                              font-weight: bold;

                                              color: #F00;

                                              font-size: 14px;

                                    }

                                     

                                    In this exemple, even when i use only the color attribute, it doesn't work.

                                     

                                    Nope the style sheet is just fine like that, and I assume in edge you were trying to call the attribute without wrapping it in quotes.

                                     

                                    So if you wanted the font-weight attribute in edge you would do something like:

                                     

                                    sym.$('whatever').css('font-weight');

                                     

                                    When you say when you only use the color attribute and it doesn't work, what does that mean? How/where are you using it?

                                    • 15. Re: Problem with a class attr
                                      resdesign Adobe Community Professional & MVP

                                      In Edge there are 2 ways to write CSS properties:

                                      Text

                                      sym.$('element').css('color','blue');

                                      background

                                      sym.$('element').css('background-color','blue');

                                      and

                                      sym.$('element').css({'color':'blue'});

                                      sym.$('element').css({'background-color':'blue'});

                                       

                                      But I think David is using a class name. I am not sure why you would have to change the format of the attribut names but you can do it with split() as shown above.

                                      • 16. Re: Problem with a class attr
                                        Endoplasmic Level 2

                                        resdesign wrote:

                                         

                                        In Edge there are 2 ways to write CSS properties:

                                        Text

                                        sym.$('element').css('color','blue');

                                        background

                                        sym.$('element').css('background-color','blue');

                                        and

                                        sym.$('element').css({'color':'blue'});

                                        sym.$('element').css({'background-color':'blue'});

                                         

                                        But I think David is using a class name. I am not sure why you would have to change the format of the attribut names but you can do it with split() as shown above.

                                        Just to clarify what you said above, the object notation one is super useful when you need to set multiple properties, so in your 2nd example, you could actually write it so it looked like this:

                                         

                                        sym.$('element').css({

                                          'color': 'blue',

                                          'background-color': 'blue'

                                        });

                                         

                                        (I think your split() thing is in another thread )

                                        • 17. Re: Problem with a class attr
                                          resdesign Adobe Community Professional & MVP

                                          Right. I like the second format because as you said you can add several properties in one place. However you still can daisy chain the first one like this and even add html text.

                                          I started a blog and will add all these soon.

                                           

                                          sym.$('element').css('color','blue').css('left', 100).css('background-color','white').html('The man too his pen out of his pocket');

                                          • 18. Re: Problem with a class attr
                                            David_Tardiveau Level 1

                                            Thank you for your answer.

                                             

                                            When i said "only with the color" it was to explain that even with only one attribute it didn't work.

                                             

                                            Moreover i could notice that if i write…

                                             

                                            sym.$("essai").css({fontSize:10});

                                             

                                            i got the same result than

                                             

                                            sym.$("essai").css({"font-size":10});

                                             

                                            To sum up, here is what i've tested…

                                             

                                            sym.$("essai").css({"font-size":10}); It works

                                            sym.$("essai").css({fontSize:10}); It works

                                            sym.$("essai").css({"fontSize":10});  It works (i was surprised)

                                             

                                            sym.$("essai").css({font-size:"10"}); Doesn't work

                                            sym.$("essai").css({fontSize:"10"}); Doesn't work

                                            sym.$("essai").css({"fontSize":"10"}); Doesn't work

                                            • 19. Re: Problem with a class attr
                                              resdesign Adobe Community Professional & MVP

                                              I am surprised that #2 works. I always use the quotation marks (single or double) except for nunbers.

                                              number in quote is a string - I thought that js did not care but apparently it does.

                                               

                                              But you can use "10px" in the quotes.