6 Replies Latest reply on May 5, 2010 7:16 AM by David_F57

    mx:HBox Show Hide Mouse Over

    djh88ukwb Level 1

      Hello All,

       

      How easy / possible is it to add mouse hover function to a HBox.

       

      So that when you hover over it shows, and when you take your mouse off it hides?

        • 1. Re: mx:HBox Show Hide Mouse Over
          David_F57 Level 5

          hi,

           

          This sort of thing is a one way deal once its hidden the mouse can't see it....now if the hover was attached to the region(hitarea) that the hbox occupied or the hbox occupies a parent container that controls the 'hover' then you could achieve the desired effect. If you are talking more a collapsible container/hbox thats a different thing again.

           

           

          David.

          • 2. Re: mx:HBox Show Hide Mouse Over
            djh88ukwb Level 1

            Hello, Firstly thanks for the quick reply !

            Secondly sorry, i should have given a more detailed question.

             

            Like you mentioned a holding container is what im after really.

             

            Something like this -

                    <mx:Canvas x="160" y="294" width="624" height="61">
                           <mx:HBox x="0" y="0" width="100%" height="61">
                           </mx:HBox>
                    </mx:Canvas>

             

            So when you hover over the canvas, the Hbox appears.

             

            Is this easliy done?  could you advise me on how to do this?

             

             

            Thanks again !

            • 3. Re: mx:HBox Show Hide Mouse Over
              David_F57 Level 5

              hi,

               

              Something like this ?

               

              <mx:Canvas x="50" y="50" width="900" height="122" backgroundColor="0xFFFFFF" backgroundAlpha="0"

                 mouseOver="hb.visible=true" mouseOut="hb.visible=false"

                 borderColor="#0C0E10" cornerRadius="5" borderStyle="solid">

               

              <mx:HBox id="hb" width="100%" height="100%" visible="false">

              <mx:Panel width="200" height="100%" layout="absolute">

              </mx:Panel>

              <mx:Panel width="200" height="100%" layout="absolute">

              </mx:Panel>

              <mx:Panel width="200" height="100%" layout="absolute">

              </mx:Panel>

              <mx:Panel width="200" height="100%" layout="absolute">

              </mx:Panel>

              </mx:HBox>

              </mx:Canvas>

              David.

              • 4. Re: mx:HBox Show Hide Mouse Over
                djh88ukwb Level 1

                David,  thanks ever so much thats exactly what i wanted to achieve.  It works perfect.  Thanks again.  Really helpful !

                • 5. Re: mx:HBox Show Hide Mouse Over
                  djh88ukwb Level 1

                  Sorry David, could i take this one step further,

                  how easy is it to include a timer ? so the hbox dosent disappear for like say two seconds after the mouse has gone ?

                  • 6. Re: mx:HBox Show Hide Mouse Over
                    David_F57 Level 5

                    hi,

                     

                    rather than a timer use an effect, on mouse out the box stays for 1.5 seconds then fades out over another 1.5 seconds, you could also do a fadein effect to complete the 'pretty' part of it

                     

                    David.

                     

                     

                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">

                    <mx:Canvas x="50" y="50" width="900" height="122" backgroundColor="0xFFFFFF" backgroundAlpha="0"

                       mouseOver="fadeout.stop();hb.alpha=1.0;hb.visible=true" mouseOut="fadeout.play()"

                       borderColor="#0C0E10" cornerRadius="5" borderStyle="solid">

                     

                    <mx:HBox id="hb" width="100%" height="100%" visible="false">

                    <mx:Panel width="200" height="100%" layout="absolute">

                    </mx:Panel>

                    <mx:Panel width="200" height="100%" layout="absolute">

                    </mx:Panel>

                    <mx:Panel width="200" height="100%" layout="absolute">

                    </mx:Panel>

                    <mx:Panel width="200" height="100%" layout="absolute">

                    </mx:Panel>

                    </mx:HBox>

                    </mx:Canvas>

                    <mx:AnimateProperty id="fadeout" duration="3000" target="{hb}" startDelay="1500" property="alpha" fromValue="1.0" toValue="0.0" effectEnd="hb.visible=false" repeatCount="1"/>