22 Replies Latest reply on May 21, 2013 3:27 PM by TimJaramillo

    CSS syntax question

    John Hall Level 4

      Now that I have my foot in the door ;-), is there any must-read pieces to understand how Adobe Edge uses JQuery at a little more advanced level (not that I am). The JavaScript API gives some decent hints but it's not like ASDocs with fully annotated examples of use.

       

      That said, what is the correct syntax to get and set the z-index of a symbol I create dynamically from the prototype in the resource panel. This all works, but I have yet to fall upon the correct syntax to set the depth of the symbol, which is covering up other objects that I need closer to the foreground. This works:

       

      function playNext(){

              currentSlide ++;

              var audioID = "slide"  + currentSlide;

              playSound(audioID);

              var slideID = "slide_" + currentSlide;

              sym.createChildSymbol(slideID, "Stage");

       

           // but this doesn't (EC.info you can think of as an alert if you don't use Edge Commons)

       

       

              EC.info(sym.$('slideID').css('z-index'));

              EC.info(sym.$(slideID).css('z-index'));

              EC.info(sym.$('slideID').zIndex);

              EC.info(sym.$(slideID).zIndex);

              EC.info(sym.$('slide_1').css('z-index'));

              EC.info(sym.$('slide_1').zIndex);

              EC.info(slideID.zIndex);

       

      }

       

      Am I close in one of them? Obviously, I'd like to set the z-index but getting it would be a sweet first step.

       

      I have also tried setting the resulting child object to a variable with the same attempts, but nothing sticks yet.

       

                var mySlide = sym.createChildSymbol(slideID, "Stage");

              EC.info("my slide is " + mySlide);

              // EC.info(sym.$('mySlide').css('z-index'));

              // EC.info(sym.$(mySlide).css('z-index'));

              // EC.info(sym.$('mySlide').zIndex);

              // EC.info(sym.$(mySlide).zIndex);

              // EC.info(sym.$('mySlide').css('z-index'));

              // EC.info(sym.$('mySlide').zIndex);

              // EC.info(mySlide.zIndex);

       

      Thanks much.

        • 1. Re: CSS syntax question
          TimJaramillo Level 4

          Hi there, you can set z index to 100, like this:

          sym.$("mySlide").css("z-index", "100");

          • 2. Re: CSS syntax question
            John Hall Level 4

            Thanks much, as usual. I'm still not having any luck. Here's what I'm trying without results.

             

            function playNext(){

                    currentSlide ++;

                    var audioID = "slide"  + currentSlide;

                    playSound(audioID);

                    var slideID = "slide_" + currentSlide;

                    var mySlide = sym.createChildSymbol(slideID, "Stage");

             

                 // want to put the object near the back

                    sym.$("mySlide").css("z-index", "1");

            }

             

            It's still in front of other things. Thinking that the symbol has not completely loaded before the css command is fired, I also tried.

             

            (tried it with mySlide scoped locally like that and by declaring it as a global variable early in the composition.)

                  function playNext(){

                    currentSlide ++;

                    var audioID = "slide"  + currentSlide;

                    playSound(audioID);

                    var slideID = "slide_" + currentSlide;

                    var mySlide = sym.createChildSymbol(slideID, "Stage");

                    sym.$("mySlide").css("z-index", "1");

                    setTimeout(layerSlide, 2000);

                  }

             

                 // This feels right but I'm just learning javascript instead of actionscript

                 

                 function layerSlide(){

                    alert("hi");

                    sym.$("mySlide").css("z-index", "1");

                  }

             

             

            It alerts fine in this case but the symbol is still highest in the z order, though it certainly gets placed on the stage correctly and the audio plays well. No other JS errors in the console.

            • 3. Re: CSS syntax question
              TimJaramillo Level 4

              Since it's a variable, try taking out the quotes on mySlide.

               

              sym.$(mySlide).css("z-index", "1");

              • 4. Re: CSS syntax question
                John Hall Level 4

                It was worth a shot but doesn't work either in the local function or timeout function scoped either globally or locally. The symbol doesn't have any timeline to play, it's essentially a graphic or several graphical objects turned into a symbol. Is there something special about loading a symbol that doesn't play that would interfere with setting its z-index?

                 

                Oh well, just created a timeline for the slide with an alert at the end. It  alerts fine but still no change in z-index. Can't imagine that simply loading it programmatically would create a problem. Must be syntax somewhere.

                • 5. Re: CSS syntax question
                  TimJaramillo Level 4

                  Ah- I didn't notice you added the setTimeout. Is the first set index working? Is it just the set index call in the setTimeout function that's not working?

                   

                  Try setting the variable outside of function scope, like this:

                   

                  var currentSlide;

                   

                  function playNext(){

                          currentSlide ++;

                          var audioID = "slide"  + currentSlide;

                          playSound(audioID);

                          var slideID = "slide_" + currentSlide;

                       currentSlide =  sym.createChildSymbol(slideID, "Stage");

                          setTimeout(layerSlide, 2000);

                        }

                      

                  function layerSlide(){

                          alert("hi");

                          sym.$(currentSlide).css("z-index", "1");

                  }

                   

                   

                  If this doesn't work, send me your file and I'll take a look.

                  • 6. Re: CSS syntax question
                    John Hall Level 4

                    Neither are working. I took the cheating way out, which works fine but doesn't advance my knowledge much. I created a slideContainer on the stage that is fixed to a particular z index and load the library symbols into it. That works fine. Though, as you've probably felt before, I wish I knew why the original approach doesn't work.

                    • 7. Re: CSS syntax question
                      resdesign Adobe Community Professional & MVP

                      Here is a sample manipulating z-index:

                      https://www.box.com/s/odo689lhanqtjgnxfwv4

                      • 8. Re: CSS syntax question
                        TimJaramillo Level 4

                        If you'd like- send me your file and I'll take a look.

                        • 9. Re: CSS syntax question
                          John Hall Level 4

                          Thanks. I'm able to control symbols on the main timeline OK, it's just when I load them dynamically that I'm having a problem. I appreciate the example though.

                          • 10. Re: CSS syntax question
                            John Hall Level 4

                            I appreciate it Tim. Of course, since I moved on with a different method, I've pretty well nuked the old approach. I'll try to create a simple repro though and post a link to see if you have suggestions.

                            • 11. Re: CSS syntax question
                              John Hall Level 4

                              Well Tim, since my new approach has hit a snag, I'll take you up on your offer. To advance the slide, which brings up the object that covers the button, click the CC graphic at the lower right. It should still have a pointer and an active script but you'll see that the captions bar covers the object. The z-index script is part of the playNext() function. Thanks so much.

                               

                              https://www.dropbox.com/s/aywz6csa3vv9jfn/layerRepro.zip

                              • 12. Re: CSS syntax question
                                John Hall Level 4

                                To make the repro even easier, here's a small rectangle and another rectangle where I just want to put the rectangle shown on the bottom layer.

                                 

                                https://www.dropbox.com/s/8jejvzpye4j9rqu/zindex.zip

                                • 13. Re: CSS syntax question
                                  TimJaramillo Level 4

                                  Hey John, Edge seems to be doing some funny stuff with the dynamically created symbols.

                                   

                                  In this thread http://forums.adobe.com/message/5279992#5279992,

                                  Elaine says: "Are you working in a dynamic symbol situation?  We handle ordering in a slightly different way and don't rely on z-indexing."

                                   

                                  This may be why setting the z-index of the dynamic symbols isn't working.

                                   

                                  I'm sure you've considered this, but you can set the z-index of your "captionButton" symbol to stack above the slide, like this: sym.$("captionButton").css("z-index", "100");

                                   

                                  Or, as you mentioned (and this is less hacky than the above method), you can add the dynamic symbol to a "slideContainer" symbol. Position the "slideHolder" symbol below your other symbols in the Elements panel, and you should be good to go. I don't think this is too hacky ...

                                  • 14. Re: CSS syntax question
                                    John Hall Level 4

                                    Wow. I totally missed that from Elaine so that is a true learning moment. Thanks much. If you're not entertained enough, you don't need to debug this as you have your own job I'm sure, but here's where I was using containers and figured that the third slide would either replace the content of the first container or overlay the content of slide 1. I'm to Flash-y I think and thinking all ECMA script is essentially the same.

                                     

                                    https://www.dropbox.com/s/puo5ckv4aphj694/framework.zip

                                     

                                    BTW, your suggestion of hard-wiring the layer of caption button (temp next button) to a high layer does seem to work fine. Thanks so much.

                                    • 15. Re: CSS syntax question
                                      TimJaramillo Level 4

                                      Aha, this works in your rect example (try setting the z-index to a negative):

                                       

                                       

                                      function showCover(){

                                                     var myRectangle = sym.createChildSymbol("slide1", "Stage");

                                                     myRectangle.getSymbolElement().css({"z-index":-100});

                                      }

                                      • 16. Re: CSS syntax question
                                        John Hall Level 4

                                        Wow. Fascinating. I  wonder I should count on that always working, i.e., that they're using negative numbers for the forseeable future. Have you seen that in JS before? You da man today. Thanks so much.

                                        • 17. Re: CSS syntax question
                                          TimJaramillo Level 4

                                          I think this works in your full site example!

                                           

                                          function playNext() {

                                              currentSlide++;

                                              var audioID = "slide" + currentSlide;

                                              playSound(audioID);

                                              var slideID = "slide_" + currentSlide;

                                              EC.info("current slide should be " + slideID)

                                              mySlide = sym.createChildSymbol(slideID, "Stage");

                                               mySlide.getSymbolElement().css({"z-index":-100});

                                           

                                            }

                                          • 18. Re: CSS syntax question
                                            TimJaramillo Level 4

                                            It may have something to do with stacking order. There are some pretty weird rules associated with stacking order. Peep this link:http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

                                            • 19. Re: CSS syntax question
                                              John Hall Level 4

                                              It's now in my Evernote notes. Thanks!

                                              • 20. Re: CSS syntax question
                                                TimJaramillo Level 4

                                                Cool, no problem!

                                                 

                                                Btw, can you mark my 2:51pm response as "correct", so other users will be able to find the answer easier? Thanks and good luck with your project!

                                                • 21. Re: CSS syntax question
                                                  John Hall Level 4

                                                  BTW, I think the article will  help solve my other problem with containers. Understand the z-index better and its interaction with position, I'm betting my third slide is solely loading below the first slide's content and I can't see it. Now all  I have to do is learn about removingChildren from nested symbols. That's a project for tomorrow. Appreciate all your help and it's marked as correct.

                                                   

                                                  BTW, just tried it and this worked. I'm quite excited.

                                                   

                                                  sym.$("slideContainer1").children().remove();

                                                  • 22. Re: CSS syntax question
                                                    TimJaramillo Level 4

                                                    Glad to hear that, John!