Is there a way to get the window scroll position in Facebook API?

In the FB.Canvas API there are methods to get the scroll top, offset top and client height (through getPageInfo()) but I need a way to find the top most window scroll position so I can determine if the area I need to be visible to the client are in view. The users will be tabbing through a form and it is taller than most screens. I need to ensure the form item is visible.

Answers


It appears that the getPageInfo().scrollTop property and the getPageInfo().offsetTop together will give you the top window scroll position.

Here is the final code I used to scroll elements into view given the absolute / global x and y coordinates.

function scrollElementIntoViewFB(applicationID, elementTop, elementBottom) {
    var pageInfo = FB.Canvas.getPageInfo();

    // fallback if running local
    if (pageInfo.clientHeight==0) {
         scrollElementIntoView(applicationID, elementTop, elementBottom);
         return;
    }

    var scrollPosition = pageInfo.scrollTop;
    var viewportHeight = pageInfo.clientHeight;
    var flashOffsetTop = pageInfo.offsetTop;
    var elementAbsoluteTop = elementTop + flashOffsetTop;
    var elementAbsoluteBottom = elementBottom + flashOffsetTop;
    var visibleBottomPosition = viewportHeight + scrollPosition;

    if (scrollPosition>elementAbsoluteTop) {
        FB.Canvas.scrollTo(0, elementAbsoluteTop);
    }
    else if (visibleBottomPosition<elementAbsoluteBottom) {
        FB.Canvas.scrollTo(0, elementAbsoluteBottom-viewportHeight);
    }


    return true;
}

And if for some reason you want the HTML only version (which will not work if in a iframe inside another domain like Facebook but will work on your own site):

function scrollElementIntoView(applicationID, elementTop, elementBottom) {
    var scrollPosition = f_scrollTop();
    var viewportHeight = f_clientHeight();
    var flashElement = swfobject.getObjectById(applicationID);
    var flashOffsetTop = flashElement.offsetTop; // not sure if this is cross browser   
    var elementAbsoluteTop = elementTop + flashOffsetTop;
    var elementAbsoluteBottom = elementBottom + flashOffsetTop;
    var visibleBottomPosition = viewportHeight + scrollPosition;

    if (scrollPosition>elementAbsoluteTop) {
        window.scrollTo(0, elementAbsoluteTop);
    }
    else if (visibleBottomPosition<elementAbsoluteBottom) {
        window.scrollTo(0, elementAbsoluteBottom-viewportHeight);
    }

    return true;
}

Search online for the other functions by their names and you'll find the rest of the code.


Need Your Help

Load HTML file to WebView with custom CSS

java html android css webview

I have a WebView on my Android application which loads (WebView.loadUrl()) different local HTML files from phone's internal storage. I would like to include some custom css styles for them.

Mysql result to limit output

php html mysql arrays

I have a problem realizing some output to echo a list of results that comes from an Array.