10 Replies Latest reply on Oct 8, 2012 9:36 AM by B3NJ_M_N

    border on only one side of a div?

    B3NJ_M_N

      Stupid question: how do you set borders individually for each side of a div? This is the one thing I can see that you seem to have gotten spectacularly wrong in the 1.0 UI.

       

      Border sides need to be individually customizable, and need to be in their own panel, just like “corners.” The notion that you’re limiting people to four-sided borders exclusively, all of the same style and thickness, in what is (let’s be frank) a very primitive set of drawing tools, is just bizarre to me. For one thing, as I’m sure you know, thick one-sided borders is how CSS geeks draw right triangles. Please tell me I’m missing something in the interface? Or at least a workaround?

       

      If I’m right about this, the program as it stands is honestly almost unusable in production work for me personally.

        • 1. Re: border on only one side of a div?
          joel_pau Level 5

          Hi,

           

          Yes, you can customize borders.

          1) On stage, you create a rectangle.

          2) Then, you open compositionReady panel and you write:

          sym.$("Rectangle").css({

                   "border-width":"5px",

                   "border-top-style": "dotted",

                   "border-right-style": "solid",

                   "border-bottom-style": "double",

                   "border-left-style": "dashed"

          });

           

          Shorthands can be used:

          sym.$("Rectangle").css("border-style", "dotted solid double dashed");

          sym.$("Rectangle").css("border-color", "#ff0000 #00ff00 #0000ff rgb(250,0,255)");

           

          3) More on CSS Border Properties.

           

          4) Coding Borders: more tools (border-image, outline, box-shadow...)

           

          5) Attached File.

           

          A case:

          If i don't want left & right borders, i write:

          sym.$("myRectangle").css({

          "border-top-width":"8px",

          "border-top-style": "dotted",

          "border-top-color": "#ff0000",

          "border-bottom-width":"4px",

          "border-bottom-style": "solid",

          "border-bottom-color": "#0000ff"

          });

           

          Therefore, you'll find how to have border on only one side of a div.

          • 2. Re: border on only one side of a div?
            B3NJ_M_N Level 1

            Thanks Joel. Did you seriously just send me the link to the W3schools "border" page? Maybe my noobish tone is misleading but I've actually written css before. But your attachment actually raises further questions:

             

            1) When I open your html attachment into a browser, I see the borders. But when I open the".an" file into edge, I see no borders on the stage? Why? What is going on here? Isn't the whole point to have a scrubbable preview with a timeline? If I wanted to handcode a css animation I would just do it from scratch like I've been doing for the past year or so.

             

            2) Where is the "compositionReady" panel?  It's not listed in the window menu, and a help menu search turns up nothing. Sorry, it's not obvious.

             

            3) How does one tween individual border properties for an element?

             

            Thanks again...

            • 3. Re: border on only one side of a div?
              joel_pau Level 5

              About Edge UI: how to display compositionReady ?

               

              Step #1: you have to display panel code.

              picture1.jpg

               

               

              Step #2: select document.compositionReady

              picture3.jpg

               

               

              How to create compositionReady using a new file: click on plus then double click on compositionReady

              picture2.jpg

               

              Did you write a css file? (because you can use it).

              Tween? what do you want?

              Note: it's 10 PM (France), I'll be back tomorrow.

              • 4. Re: border on only one side of a div?
                B3NJ_M_N Level 1

                Ok, great, thanks, that answers question #2.

                 

                But what about questions number 1 and 3? To iterate:

                 

                #1) Why am I not seeing the hand-coded border for your example file on the stage in Edge? If I have to always preview in the browser I lose the whole point of the timeline! Again, I hope I'm just missing something. (I experimented with early versions of Edge but I got frustrated and decided to stop and just wait. I'm wading back in again now that the release is official.)

                 

                and

                 

                #3) How do I tween individual border properties in Edge? For example, let's say I want a div to tween from:

                 

                border-left: 4px solid #000;

                 

                to

                 

                border-left: 30px solid #ff7700;

                 

                over the period of a second. Ideally, I don't want to just do it with a general CSS "transition: all;" applied. I know how to do that already, and with less code. Ideally, I'd like it to be scripted, so that it works in older browsers, the way it would work with jquery animate(), for example.

                 

                Thanks for your patience!

                • 5. Re: border on only one side of a div?
                  Jerry Witt Level 2

                  These sound like great feature requests to me. As far as I know, setting the borders through a GUI individually is not in EA. I also don't know of a way to tween the border width and color through the ui.

                   

                  Although they are not in this 1.0 release of the software, I think they are excellent feature requests.

                  • 6. Re: border on only one side of a div?
                    resdesign Adobe Community Professional & MVP

                    Seriously I think the timeline and the stage are a great way to create an amination even if sometimes we have to use css, jquery, etc... to do something that is not yet possible. Not all features are in yet but the Adobe team has been adding features per user suggestions since preview 1. I think they are doing a great job and are great listener. They also helped a lot on the preview forum and now this forum.

                     

                    So, B3NJ, if you think about things that could be added to EA, this forum is the place! This is a constructive way to help the AE team to assess what they should add and when in their project. 

                     

                    Also, there are lots of kind people here that spend their time, not being paid, to answer questions and help others. Darrell, Joel and many others come to mind.

                     

                    As for me, I am grateful for Elaine, Sarah, Joe and others for their help, and for AE itself that has allowed to create close to 200 compostions and for the future of this new product.

                     

                    (No, I am not paid to say this - I am just a happy user of EA and this forum!)

                    • 7. Re: border on only one side of a div?
                      joel_pau Level 5

                      About #3:

                      I suceeded to implement this code line:

                      sym.$("aRectangle").animate({ borderWidth: "10px" }, 1000);

                      using an mouseover event.

                       

                      Border width can be animate as follows:

                      sym.$("Rectangle").css("border-left", "4px solid #ff7700").animate({borderLeftWidth: "30px"},1000);

                      or

                      sym.$("Rectangle").css({

                                "border-left-width":"4px",

                                "border-left-style": "solid",

                                "border-left-color": "#ff7700"

                                })

                                .animate({borderLeftWidth: "30px"},1000);

                       

                      If you want to animate colored borders jQuery UI must be loaded: test page. $.getScript() can be used to load jQuery UI.

                       

                      About #1:

                      You can only use browser preview and panel code.

                      • 8. Re: border on only one side of a div?
                        resdesign Adobe Community Professional & MVP

                        Brilliant, Joel! I knew you would come through with this one too!

                        • 9. Re: border on only one side of a div?
                          joel_pau Level 5

                          I summarize and i add a demo file.

                           

                          There are 2 constraints.

                           

                          1) jQuery Constraint: borders have to exist.

                          I quote this page:

                          Shorthand CSS properties (e.g. font, background, border) are not fully supported. For example, if you want to animate the rendered border width, at least a border style and border width other than "auto" must be set in advance.

                          Therefore,

                            • this line doesn't work: sym.$("Rectangle").animate({borderLeftWidth: "30px"},1000);
                            • this line works: sym.$("Rectangle").css("border-left", "4px solid #ff7700").animate({borderLeftWidth: "30px"},1000);

                           

                          2) jQuery Versions: with or without colors.

                          jQuery 1.7.1 inside Edge Animate 1.0 ==> no colors animating borders.

                          jQuery UI ==> borders can be colored.

                           

                          File attached (play and playReverse when mouseenter and mouseleave).

                          • 10. Re: border on only one side of a div?
                            B3NJ_M_N Level 1

                            Thanks Joel. I appreciate the demo. As you effectively point out, I can do already do this in the browser, with no timeline view, using one line of jquery bound to a window event.

                             

                            But for the moment, that raises the question of why I would pay fifty bucks a month (starting in January?) to do this in edge, adding overhead and no new tooling functionality! I'm not saying that the application stinks--just that the responses here confirm my overall impression that it's "not there yet."