8 Replies Latest reply on Feb 28, 2014 5:54 AM by Muscavado

    What is the best way to load multiple instances of a button into master index page?. I have looked a

    Muscavado Level 1

      I have successfully created an animated button that opens to reveal a quotation with a nested clickable link to the source. What I would like to do is have several of these with different quotes inside them, scattered on the page. I have looked at the composition loader available via Edge Commons, and it seems that would require some sort of Edge animate Stage 'frame' to load the instances into? Is there any way to place them directly into the master page - as div elements...?

      The outer of the buttons is the same, on hover they open partialy on click fully, to reveal  their particular text - which I thought about loading it at runtime with json, or maybe handlebars...?

      I would also like to make the buttons only take the necessary space. ie. before they expand they are only buttons. ( I have set the stage to hidden but it still takes up space). To acheive this, I think perhaps I will have to target the inner components css, and set them as display:none until the button is hovered over, then set :hover and :active pseudo classes inside edge. Is this feasible?

       

      Thanks in advance for any ideas/suggestions...

        • 1. Re: What is the best way to load multiple instances of a button into master index page?. I have looked a
          resdesign Adobe Community Professional & MVP

          If you have several buttons on the stage and each one is an instance of the same button, you can change the text with data from a json file or from an array inside animate.

          insidet the button you could have a text that is with diplay on at a certain label. You can then stop on that label on mouseenter and return to the dayplayoff position in your button.

          I'll post a sample in a few.

          1 person found this helpful
          • 3. Re: What is the best way to load multiple instances of a button into master index page?. I have looked a
            Muscavado Level 1

            Hello, Thanks for your helpful input. Based on that, and the tutorial 'http://tv.adobe.com/watch/learn-edge-animate-cc/ingesting-external-data-dc/' - I have written code to drive my button's behaviour.  (copied below...)

             

            var textArray =new Array();

            var currentHead = 0;

            var currentText = 0;

            var currentFoot = 0;

             

             

            var s = sym.getSymbol("textContainer");

            sym.$("textContainer")$.("text").html("");

            var sh = sym.getSymbol("headContainer");

            sym.$("headContainer")$.("head").html("");

            var sf = sym.getSymbol("footContainer");

            sym.$("footContainer")$.("footer").html("");

             

             

            $.getJSON("assets/sources1.json", function(data){

                      for (var i=0; i<data.length; i++){

                                textArray.push({"head":data[i].heading,

                                          "text":data[i].text,

                                          "footer":data[i].foot,

                                          "link":data[i].link});

             

             

                      sym.$("headContainer")$.("head").html(textArray[currentHead]).heading;

                      sym.$("textContainer")$.("text").html(textArray[currentText]).text;

                      sym.$("footContainer")$.("foot").html(textArray[currentFoot]).foot;

                      sym.$("footContainer")$.("link").html(textArray[currentLink]).link;

            });

            });

             

            But there is an error I don't understand at line 7...

             

            Also - as you can see, at present I have several symbols in parallel. Would I be better off nesting the text containers inside the outer button container? and would I be better off creating styled mini- pages of text data, and then loading them - instead of loading them as symbols? I have had to create seperate symbols because I cannot adequately stle the text - so some is bold, some is italic etc. within one text field. Or can I? I guess I could nest several text fields inside one symbol...?

             

            I remain unsure how to load the finished animation button instances. In your example you were still loading into an animation But from yor example, I guess I would need to place all my examples inside an outer edge composition... but then I think positioning them accurately with css, making adjustments etc. will be fairly tricky. Is there any way to place multiple instances directly into divs in index.html? Could I simply repeat the class...? I may be answering my own questions here.

            • 4. Re: What is the best way to load multiple instances of a button into master index page?. I have looked a
              heathrowe Most Valuable Participant

              The notation for traversing or chaining is to separate them with the .

               

              On line 7 you are missing the period between ) $

               

              sym.$("textContainer").$.("text").html("");

               

              Also on line 9 and 11.

               

              But on another note since you are passing the lookupselector to a variable you can use that reference.

               

              Example instead of

               

               

                    var s = sym.getSymbol("textContainer");

                    sym.$("textContainer").$.("text").html("");

               

              Now becomes

               

                    var s = sym.getSymbol("textContainer");

                    s.$.("text").html("");

               

              hth

              Darrell

              1 person found this helpful
              • 5. Re: What is the best way to load multiple instances of a button into master index page?. I have looked a
                Muscavado Level 1

                Thanks for your response. Unfortunately when I paste in your suggestion, the error remains:

                 

                var s = sym.getSymbol("textContainer");

                s.$.("text").html("");

                var sh = sym.getSymbol("headContainer");

                sh.$.("head").html("");

                var sf = sym.getSymbol("footContainer");

                sf.$.("footer").html("");

                 

                Is it because I have to define the vars - like you would in As...?

                • 6. Re: What is the best way to load multiple instances of a button into master index page?. I have looked a
                  Muscavado Level 1

                  This works...  (Previously I'd put the . on the wrong side of the $)

                   

                  var s = sym.getSymbol("textContainer");

                  sym.$("textContainer").$("text").html("");

                  var sh = sym.getSymbol("headContainer");

                  sym.$("headContainer").$("head").html("");

                  var sf = sym.getSymbol("footContainer");

                  sym.$("headContainer").$("footer").html("");

                  1 person found this helpful
                  • 7. Re: What is the best way to load multiple instances of a button into master index page?. I have looked a
                    Muscavado Level 1

                    ...and so does this.

                     

                    s.$("text").html("");

                     

                    Perviously you had left in my extra dot ...

                     

                    Thanks.

                    • 8. Re: What is the best way to load multiple instances of a button into master index page?. I have looked a
                      Muscavado Level 1

                      I can get the button to load and interact - and the json loading code shows no errors - but the textContainers don't show anything... not even the place holder text anymore, and despite using display off until mouseenter - the button still takes up all the space it would when expanded on the page.

                       

                      Is display off the same as visibility: hidden as opposed to  display: none...?

                       

                      What I was hoping to do was to create a series of buttons that would each contain separate text/sources with links to the original - and I thought I could load the underlying text via external json. But I can't - and even if I could, I can't see how to make button instance 1 show only text 1, button instance 2, only text 2, and so on - when they are being instantiated with the same class on the master page. How can the animate composition 'know' where it is on the index?

                       

                      I'm feeling kind of stuck.

                      Perhaps I should investigate the arrays inside animate idea...