9 Replies Latest reply on Jul 26, 2010 3:40 AM by rootsounds

    fix container always at the bottom of the browser

    Vie Bone

      I am new with flex 4 an I need some basic help.

       

      I have an application with a long vertical scroll and I would like to fix a menu always at the bottom of the browser. My idea is that the user can use the menu without make a scroll.

       

      Any ideas.

       

      Thanks a lot!!!!!

        • 1. Re: fix container always at the bottom of the browser
          rootsounds Level 4

          To clarify, you want it at a fixed position at the bottom of the view of the page in the browser? You do not mean at the bottom of some larger Flex application, correct?

          • 2. Re: fix container always at the bottom of the browser
            Vie Bone Level 1

            yes you are right, I want the container at the bottom of the window, not at the bottom of the flex app.

             

            I just want to avoid the container to be at the end of the flex app.

             

            I saw some html pages that display a layer always at the same position in the window, doesn't matter how long the scroll is, the layer always is at the same position relative to the browser window, over all the content. That is what i want.

             

            Thanks you so much!

            • 3. Re: fix container always at the bottom of the browser
              rtalton Level 4

              You could bind your container to the verticalScrollPosition.

               

              Example in FB3:

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                  width="600"
                  height="100%"
                  layout="absolute"
                  verticalScrollPolicy="auto">

               

                  <mx:Script>
                      <![CDATA[
                          private const FUDGE_FACTOR:Number = 6;
                      ]]>
                  </mx:Script>

               

                  <mx:Canvas
                      id="cvs"
                      width="50%"
                      height="100%"
                      y="0"
                      x="0">

               

                      <mx:ApplicationControlBar
                          id="cBar"
                          width="85%"
                          height="40"
                          y="{cvs.verticalScrollPosition + this.height-(cBar.height + FUDGE_FACTOR)}">

               

                          <mx:Button label="Sample"/>

               

                          <mx:HBox
                              width="100%"
                              height="100%"
                              horizontalGap="3">

               

                              <mx:Label
                                  text="Current Y position:"
                                  textAlign="right"/>

               

                              <mx:Label
                                  text="{cvs.verticalScrollPosition}"
                                  width="58.75"
                                  height="18"/>
                          </mx:HBox>
                      </mx:ApplicationControlBar>

               

                      <mx:Label
                          text="bottom of app"
                          width="102"
                          height="18"
                          y="1930.75"
                          x="100"
                          fontWeight="bold"/>
                  </mx:Canvas>

               

                  <mx:Label
                      text="{this.height}"
                      y="18.75"
                      x="338.25"/>

               

                  <mx:Label
                      text="Application Window Height:"
                      y="4"
                      x="313"/>
              </mx:Application>

              • 4. Re: fix container always at the bottom of the browser
                jsd99

                You would have to use a separate SWF for that and put it in a div that floats at the bottom of the browser.  I don't know if it's possible to have two swfs on one page communicate with each other.  You can definitely do it indirectly with javascript in the browser.

                • 5. Re: fix container always at the bottom of the browser
                  Vie Bone Level 1

                  Thanks for your answer!

                   

                  Really I am working with FB 4, and I got some errors if i do what you say.

                   

                  An other problem is that it is a big app with lot of code an now, I can't change the way it is developed.

                   

                  The canvas that I want to float over the content is in a s:Application with an others skinnableConntainers.

                   

                  I was think tha the best way was to add a TitleWindow, but i got the same problem, i can't float it over the content.

                   

                  I don't know what to do, maybe is easy but I am completly newbe with flex.

                   

                  Thanks all!!!!

                  • 6. Re: fix container always at the bottom of the browser
                    NickDF__

                    well, if you managed to bind to the position you want, then having it float over the other stuff is easy.

                     

                    Lets assume you have everything else in a container, and this one is a separated container (lets call it floater) then all have to do is make sure that floater.depth is always greater than the depth of the other container in order to be always on top.

                    • 7. Re: fix container always at the bottom of the browser
                      rootsounds Level 4

                      jsd99 wrote

                      You would have to use a separate SWF for that and put it in a div that floats at the bottom of the browser.  I don't know if it's possible to have two swfs on one page communicate with each other.  You can definitely do it indirectly with javascript in the browser.

                      Agreed. You are looking to position the SWF at the bottom of the browser view, which requires a CSS (and possibly JS) solution using relative positioning.

                      • 8. Re: fix container always at the bottom of the browser
                        Vie Bone Level 1

                        ok, thanks!!!

                         

                        It is a bit more complicated that I imagined.

                         

                        This floating pannel have lots of functions that interact with the components, if a put the floating pannel in other swf, i can't use this methods or it could be much more difficult a think.

                         

                        Thanks for your help.

                        • 9. Re: fix container always at the bottom of the browser
                          rootsounds Level 4

                          You said that it's just a menu that you are separating. Should be quite easy to use the ExternalInterface and wire them together via JavaScript.