Centered dialog on Facebook canvas app

Question

How can I create a dialog that stays centered as the user scrolls through my Facebook canvas app?

I've read this post on the subject, but the method described there (listening to the undocumented facebook-event) did not work for me.

Answer 1

It looks like Facebook no longer poll the server to update the pageInfo as part of their library. However, it's fairly simple to write something that polls it yourself, and move the dialog appropriately:

var timeout;
var positionDialog = function(){
    FB.Canvas.getPageInfo(function(pageInfo){
         $("#dialog").animate({top: Math.max(parseInt(pageInfo.scrollTop) - parseInt(pageInfo.offsetTop) + 
            ((parseInt(pageInfo.clientHeight)-$("#dialog").outerHeight())/2), 0)}, 100);
         timeout = setTimeout(positionDialog, 250);
    });
};

var showDialog = function(){
    // show your dialog
    $("#dialog").show();
    positionDialog();
};

var hideDialog = function(){
    $("#dialog").hide();
    clearTimeout(timeout);
};

Note: I've used setTimeout rather than setInterval, as you don't know how long the ajax calls will take, and don't want to be handling out of order responses.