3 Replies Latest reply on May 15, 2015 7:11 AM by seano2o7

    Dock symbol to screen

    agelosa45936865

      Hi all,

       

      I 'm trying to have a symbol(in this case a tool-tip) docked at the bottom of my screen, as the entire document is longer than a screen height.

      Right now I did it with a parallax script, meaning the scrolling elements run an animation based on the parallax and the tool-tip was static outside the parallax parent... but it feels counter intuitive and would like to ask if there is another way.

      Edge_Dock.jpg

      Thanks in advance!

        • 1. Re: Dock symbol to screen
          seano2o7 Level 3

          You can position elements based on windowHeight for example

           

          var windowHeight = $(window).height();

          sym.$("#Stage").append(sym.$("element").css({"top": windowHeight - 500}));
          • 2. Re: Dock symbol to screen
            agelosa45936865 Level 1

            Thanks seano2o7

            Correct me if I 'm wrong, but that isn't "live".

            As far as I was able to try it, I couldn't get a result where I would scroll and the box would move simultaneously.

            I 'm putting this code in "creationComplete" event.

             

            In case I didn't explain it correctly:

            I have a fixed window size of 500x500, but the content is 1500px height for instance.

            Inside the scrolling of the Edge graphic I want the box to remain on the bottom of the 500x500 canvas no matter where the scroll bar is located.

            • 3. Re: Dock symbol to screen
              seano2o7 Level 3

              Put the code in resize for when the window is resized. Put it in compositionReady too. Creation complete will only make it work as you expect when the project is loaded not when you make adjustments when its open. You will need to change the 500 to whatever you need to make it fit your project. Play around with that code 500.

               

              The code says set the css property "top" on your stage to the BROWSER WINDOW HEIGHT - 500 you adjust the browser window height as you resize the window browser so it keeps moving with it.