CODEWITHSUNDEEP
facebookiframe
Erik Lydecker
Erik Lydecker

Reputation: 717

Facebook Application iFrame Fixed Element

I would like to have a fixed element (a DIV) in the iFrame for my Facebook Application. So when the user scrolls down the page, that element is still fixed on the top of the browser window?

The basic: You add stuff to a bag, while you are scrolling down, and a fixed DIV will show you your "score" while you add these things to the bag. The "score counter" should always be visible while scrolling.

Thank you!

Upvotes: 2

Views: 1302

Answers (2)

user2136218
user2136218

Reputation: 1

I don't know about you Erik but this really doens not help me much. Could FB.Canvas.getPageInfo help?

Maybe that would help : I was ussing

(function() {
    var el = $("header:first");
    var elpos_original = el.offset().top;
    $(window).scroll(function(){
        var elpos = el.offset().top;
        var windowpos = $(window).scrollTop();
        var finaldestination = windowpos;
        if(windowpos<elpos_original) {
            finaldestination = elpos_original;
            el.stop().css({'top':0});
        } else {
            el.stop().animate({'top':finaldestination-elpos_original},0);
        }
    });
})();

Upvotes: 0

Motin
Motin

Reputation: 5063

This is not possible if you are using facebook's iframe auto-resize features. Once the iframe is resized so that scrolling is not necessary, the only scroll available will be the one of the parent window. However, the child iframe has no information about the scroll of the parent window (since they are not on the same domain...) and trying to listen to scroll events or scroll position will only return that the scrollbar is at position 0, or topmost.

You can however listen to click events and extract the offset of the click event or the clicked element.

Some examples:

$('.clickme').click(function(e) {

    e.preventDefault();

    var top;

    // Using click position (e.pageY and e.pageX available)
    top = e.pageY;

    // Using clicked element position
    top = $(this).offset().top;

    $('#moveme').css({'top': top - 100 + 'px'}); //

}

Maybe you can base your interaction on this principle instead?

Upvotes: 2

Related Questions