Preventing fb.ui() from scrolling the browser

Question

I'm working on a Facebook canvas page application using an iframe. I'm using fb.ui() to create a dialog box for sharing however when the dialog opens, it's centered at first, then once the async call loads the dialog, it moves the dialog box to the top of the iframe and scrolls the browser to the top.

I considered using jQuery to reposition the box however I'd also have to scroll the browser position which screams hack to me. Any suggestions would be greatly appreciated.

Answer 1

Had the same problem, positioning in iFrames sucks. The easiest way to keep the dialog positioned correctly is to use the popup display option which pops a new browser window above the center of the current page. It's not as pretty, but it works nicely.

//generic sharing function
var fbshare = function(url, display) {
    var share = {
        method: 'stream.share',
        u: url,
        display: display
    };
    FB.ui(share);
};

//share using popup
<a href="#fbshare" onClick="fbshare('http://www.theurl.com','popup');">Share</a>