9 Replies Latest reply on Feb 6, 2014 12:08 PM by AMULI

    how to "click through" ?

    AMULI Level 4

      Hi there,

       

      I have added an animation (snow flakes falling down) in front of the whole home page of a full-Edge site. The problem is now that the snowShower symbol captures the click events.

       

      How could I make it "transparent" to clicks, that is transmitting them to the buttons underneath ? Thanks.

       

      Gil

        • 1. Re: how to "click through" ?
          heathrowe Most Valuable Participant

          Hey Gil

           

          Are you saying that this symbol has no 'click' handler to begin with, but it's presense (in front of everything else) is preventing you from clicking items behind it?

           

          If so, sounds like it may just be a z-index order issue of the snowShower. Does it have to 'out front'? Can it be positioned lower in the stack.

           

          Darrell

          • 2. Re: how to "click through" ?
            AMULI Level 4

            Hi Darrell,

             

            Sadly, assigning the z-index would make the snow animation covering the whole stage run behind the symbols tiling it :-(

             

            As a (poor) workaround, I have set a click event handler on snowShower to make it disappear.

             

            But this is not very user-friendly, forcing a first click to get rid of the snow and a second one to choose a section. Ideally, I would like that clicking a button through the shower make it disappear and trigger the button's handler.

             

            It has to do with passing the click event in the DOM after snowShower has captured it at first. In other words, I would like snowShower to still capture the click event, but without consuming it.

             

            Gil

            • 3. Re: how to "click through" ?
              heathrowe Most Valuable Participant

              Ya I see what you mean, now. Yes that is tricky and will have to test.

               

              Couple of thoughts on quick search

              - just discovered this option through search: css pointer-events, example here (http://fromanegg.com/post/32669641429/clicking-through-a-div-to-underlying-elements)

              - some ideas through event ordering/bubbling http://www.quirksmode.org/js/events_order.html (sounds more like the process you areafter)

               

              Alternatively, does the snow effect have to be in its own Symbol? Example here is a sample I did awhile, based off code-player website example.

              The snow effect is is front of everything but is drawn by a canvas object; the text element 'below' it is clickable to the link I have designated to it.

               

              Preview: http://heathrowe.com/edge/snowflakes/

              Download: http://heathrowe.com/edge/snowflakes/snowflakes.zip  (Code is in Stage > creationComplete event handler)

               

              hth

              Darrell

              1 person found this helpful
              • 4. Re: how to "click through" ?
                resdesign Adobe Community Professional & MVP

                Not sure about how your snow is implemented but, is there a way you could add a transparent button that would be on a layer above the snow and at the same place as the button you want to click?

                1 person found this helpful
                • 5. Re: how to "click through" ?
                  AMULI Level 4

                  Hi Marie, hi Darrell,

                   

                  toDo_stack.pop() : back to this problem ! Thank you for your leads.

                   

                  I have investigated bubbling. It would indeed be the solution when the different elements are nested. For example, a series of buttons in a container div. A click on a button could trigger a handler specific to that button, then (bubbling up at the container level) a second handler common to every button.

                   

                  But my snowShower is a child of the Stage and the buttons that show underneath are its siblings.

                   

                  I finally found the solution today reading a book about D3 :

                   

                  sym.getSymbol("snowShower").getSymbolElement().css({"pointer-events" : "none"});

                   

                  This makes snowShower "transparent" to mouse events and the buttons react through the covering animation.

                   

                  Gil

                  1 person found this helpful
                  • 6. Re: how to "click through" ?
                    resdesign Adobe Community Professional & MVP

                    Gil, that is GENIUS!

                    • 7. Re: how to "click through" ?
                      heathrowe Most Valuable Participant

                      Awesome - I mention that in my first link reference (fromanegg) and it was the first I have heard of it. Though it is not js related, its drawback is it only works on (css3) modern browsers - but then again, everyone should be using modern browsers (chuckle chuckle).

                       

                      Darrell

                      • 8. Re: how to "click through" ?
                        resdesign Adobe Community Professional & MVP

                        Haha, Darrell!

                        Some people are still on dialup (even in the US), so I guess this world is not all up to speed yet!

                        1 person found this helpful
                        • 9. Re: how to "click through" ?
                          AMULI Level 4

                          Sorry, Darrell. I skipped that and jumped directly to bubbling :-)

                           

                          Gil