9 Replies Latest reply on Aug 10, 2013 6:48 AM by heathrowe

    How can I expand the stage (in one direction) on rollover? Or click?

    tomhardmanmusic

      Hello,

       

      I'm looking to create an expanding/collapsing HTML5 banner using Edge Animate.

       

      For example, say I start with a 728x90 banner. How can I make the stage expand (from the bottom edge) to 728x270?

       

      At the moment I'm looking to expand on rollover then collapse back to original stage size on rollout - but in the future I know I'll want the same functionality using a button.

       

      All help is appreciated, thank you!

        • 1. Re: How can I expand the stage (in one direction) on rollover? Or click?
          heathrowe Most Valuable Participant

          One way, on compositionReady place the following 'chain' event (mouseover, followed by mouseleave)

           

          -------- Copy Below to Stage compositionReady -------------

           

          sym.$("Stage").mouseover(function(){

             sym.$("Stage").css('height', '270');

          }).mouseleave(function(){

             sym.$("Stage").css('height', '90');

          });

           

          -------- End Copy ---------------------------------------------------

           

          View sample: http://www.heathrowe.com/edge/stageexpand/

          Dowmload:    http://www.heathrowe.com/edge/stageexpand/stageexpand.zip

           

          hth

          Darrell

          1 person found this helpful
          • 2. Re: How can I expand the stage (in one direction) on rollover? Or click?
            tomhardmanmusic Level 1

            Hi Darrell,

             

            Thanks for a quick response, and such a simple solution! I definitely need to dig into jQuery further but I understand how this example works.

             

            Do you know how to animate the expansion so it appears to 'slide' or grow, or anything really!

             

            Thanks again, very much appreciated!

             

            Tom

             

             

            Edit - I've just used this to animate - I couldn't integrate it into a single chain (is that the correct term?)

             

            sym.$('Stage').mouseover(function() {

              sym.$('Stage').animate({

                height: '270'

              }, '5000', function() {

              });

            });

             

            sym.$('Stage').mouseleave(function() {

              sym.$('Stage').animate({

                height: '90'

              }, '5000', function() {

              });

            });

            • 3. Re: How can I expand the stage (in one direction) on rollover? Or click?
              heathrowe Most Valuable Participant

              Pretty close

               

              try this - note I used 500 (half a second) for a quick animate, you can change that value to your 5000 (5 seconds).

               

              sym.$("Stage").mouseover(function(){
                 sym.$("Stage").animate({
                  height: "270"
                }, 500 );

                 //sym.$("Stage").css('height', '270');  << old code
              }).mouseleave(function(){
                sym.$("Stage").animate({
                  height: "90"
                }, 500 );

                 //sym.$("Stage").css('height', '90');   << old code
              });

               

              Also realized I incorrectly linked the above zip file: http://www.heathrowe.com/edge/stageexpand/stageexpand.zip

               

              hth

              Darrell

              1 person found this helpful
              • 4. Re: How can I expand the stage (in one direction) on rollover? Or click?
                tomhardmanmusic Level 1

                Thanks again Darrell!

                 

                How can I modify the above for clicking a particular element -

                 

                // insert code to be run when the composition is fully loaded here

                sym.$("iTunes").click(function(){

                   sym.$("Stage").animate({

                    height: "270"

                  }, 500 );

                   //sym.$("Stage").css('height', '270');  << old code

                }).click(function(){

                  sym.$("Stage").animate({

                    height: "90"

                  }, 500 );

                   //sym.$("Stage").css('height', '90');   << old code

                });

                 

                I did this, say "iTunes" refers to an iTunes Buy button or something - but this makes the stage expand then immediately collapse. Should I replace the second .click with something else?

                 

                Thanks again!

                 

                Tom

                 

                Edit - Also, what is the benefit of applying the above code (when it works...) directly to the "iTunes" div under the .click event? Just writing less code? Or is it optimised in other ways? Thanks

                • 5. Re: How can I expand the stage (in one direction) on rollover? Or click?
                  heathrowe Most Valuable Participant

                  Should it be mouseleave (though I am not 100% certain of your desired goal, in this case)

                   

                  sym.$("iTunes").click(function(){

                     sym.$("Stage").animate({height: "270"}, 500 );

                  }).mouseleave(function(){

                    sym.$("Stage").animate({height: "90"}, 500 );});

                   

                  As for the 'benefit' question, the above is a condensed version of the below. Normally it would be separate 'events' as written below. The above version is called event 'chaining' and is applied in the order they appear in the chain. Beginning with the click event (do something), followed by mouseleave event (do something). Its merely a preference/choice thing. I personnaly find it a little more organized than 'scattering' event blocks all over the place.

                   

                  sym.$("iTunes").click(function(){

                     sym.$("Stage").animate({height: "270"}, 500 );

                  });

                   

                   

                  sym.$("iTunes").mouseleave(function(){

                    sym.$("Stage").animate({height: "90"}, 500 );

                  });

                  • 6. Re: How can I expand the stage (in one direction) on rollover? Or click?
                    tomhardmanmusic Level 1

                    Sorry I've been away from this for a while! And thanks for your help.

                     

                    I'm not sure if this is possible but is there a way to adapt the above so clicking on an element expands the stage, and then a second click (on the same element) collapses the stage?

                     

                    Thanks!

                     

                    Tom

                    • 7. Re: How can I expand the stage (in one direction) on rollover? Or click?
                      heathrowe Most Valuable Participant

                      I am on the go for the day but here is a quick routine, using the toggle() method.

                       

                      In your case you can't collapse the etage to 0, otherwise you have no way of getting to the second click.
                      In my exmple, click anywhere on the stage, it collapses to the minHeight value of 15.

                      Click it again and it restores to the predefined height of the stage.

                       

                      var minHeight = 15;
                      var myStageHeight = sym.$("Stage").css("height");

                       

                      sym.$("Stage").toggle(function(){                    // run on first click of Stage
                          sym.$("Stage").animate({height: minHeight}, 500 );
                      }, function() {                                                   // run the second click of Stage
                          sym.$("Stage").animate({height: myStageHeight}, 500 );
                      });

                       

                      If you are going to apply to an element, say a button, then its going to require you to move (flow) the button to the collapsed position.

                       

                      I'll play with that notion later, when I get back.

                       

                      Try the above

                      hth

                       

                      Darrell

                      1 person found this helpful
                      • 8. Re: How can I expand the stage (in one direction) on rollover? Or click?
                        elainecc Adobe Employee

                        Hi, Tom-

                         

                        I did precisely this in one of the current samples:

                        http://html.adobe.com/edge/animate/showcase.html

                         

                        Look at the "Floral Match Maker" game, which responds to a mouseover by resizing the iframe that contains the stage.  In effect, the stage is based in % and responds to the size of the container.

                         

                        -Elaine

                        1 person found this helpful
                        • 9. Re: How can I expand the stage (in one direction) on rollover? Or click?
                          heathrowe Most Valuable Participant

                          Here is an updated version

                           

                          var minHeight = 15;
                          var myStageHeight = sym.$("Stage").css("height");
                          var myElePosition = sym.$("Rectangle").css("top");
                          var myElePositionTop = myStageHeight-myElePosition;

                           

                          sym.$("Rectangle").toggle(function(){ // run on first click of Stage
                              sym.$("Stage").animate({height: minHeight}, 500 );
                              sym.$("Rectangle").animate({top: 0}, 500 );
                            }, function() {        // run the second click of Stage
                              sym.$("Stage").animate({height: myStageHeight}, 500 );
                              sym.$("Rectangle").animate({top: myElePosition}, 500 );
                          });

                           

                          View sample: http://www.heathrowe.com/edge/stagecollapse/

                          Dowmload:    http://www.heathrowe.com/edge/stagecollapse/stagecollapse.zip

                           

                           

                          As noted above, and per Ellaines example, you can't collapse to 0, so you need to leave enough 'viewstate' to toogle back to the starting point.

                          hth

                          Darrell