2011-11-30 27 views
5

En la API de FB.Canvas hay métodos para obtener la parte superior, la parte superior y la altura del cliente (a través de getPageInfo()), pero necesito una manera de encontrar la posición más alta de desplazamiento de la ventana para poder determinar si el área que necesito para ser visible para el cliente están a la vista. Los usuarios estarán tabulando a través de un formulario y es más alto que la mayoría de las pantallas. Necesito asegurarme de que el elemento del formulario esté visible.¿Hay alguna manera de obtener la posición de desplazamiento de la ventana en Facebook API?

Respuesta

4

Parece que la propiedad getPageInfo(). ScrollTop y getPageInfo(). OffsetTop juntos le darán la posición de desplazamiento de la ventana superior.

Aquí está el código final que usé para desplazar los elementos a la vista dadas las coordenadas absolutos/globales xey.

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; 
} 

Y si por alguna razón desea que la única versión HTML (que no va a funcionar si en un iframe dentro de otro dominio como Facebook pero trabajará en su propio sitio):

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; 
} 

búsqueda en línea para las otras funciones por sus nombres y encontrarás el resto del código.

0

enfoque general como la respuesta en términos de posicionamiento una vez que tenga su posición de desplazamiento, pero creo que el SDK ha cambiado ligeramente desde que se publicó y el método getPageInfo() ahora requiere una función de devolución de llamada, para obtener el mismo datos iniciales que tendrá que empezar con algo como:

FB.Canvas.getPageInfo(function(info){ 
    console.log(info); 

    //... code for positioning based on fb window 
}); 

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/

Cuestiones relacionadas