How to make a div float in and scroll with the center of page?

Question

So, I work on a Facebook FBML App. What I want is simple. Just have a div shows in the center of the page, and scroll with the page. i.e. always in the center.

It would be easy with normal JS. I just use the pageYOffset

However, in Facebook using FBJS, I am not sure what I should use. It doesn't have getPageYOffset().. and I tried getScrollTop().. it doesn't seem the right thing.

So, anyone knows how?

Answer 1

Use css

#myDiv {
    /* Keep position fixed (scroll invariant) */
    position: fixed;

    /* Center */
    left: 50%;
    top: 50%;

    /* Set width and margin to account for half of width */
    width: 200px;
    margin-left: -100px;

    /* Set height and margin to account for half of height */
    height: 100px;
    margin-top: -50px;
}

The first 3 lines would center the upper left corner on the page. The next 4 lines set the width, and then shift the div back and up so that the center is centered.

More info from w3Schools about position.

Answer 2

How about using Facebook's call myDiv.getAbsoluteTop()? This won't keep the object fixed, but it will at least start at the proper position.

Just one other idea -- you could generate an image, and set the image as the background, which I think you can keep fixed. It depends what you're after exactly though.

Answer 3

Have you ever seen something like this done on FB before? It sounds to me like FBJS is causing you the problem with its lack of API options.

One way to do it in normal JS is to get the position of the sliders, both Right and bottom, and also the whole screen size, and then determine where the center of the viewable window is based on the full frame size and the slider offsets.

All of those variables should be defined or be retrievable via javascript for you to grab and manipulate, and then it is simply updating the css values on a div to move the window to the correct location. you can then poll the state of the window sliders or monitor their event and retrieve their position as it is updated to recalculate the center of the window.

If FBJS has no facility to determine window size or slider position, then you have a much harder problem on your hands.