I'm using Fb.ui() to post an update to user's wall but the dialog always appears in the same spot in my browser (center middle if scrolled up). The problem is that I'm opening the dialog from the bottom of the screen. Is there a way to get the dialog to show for the user's current scroll location?

I'm using Fb.ui() to post an update to user's wall but the dialog always appears in the same spot in my browser (center middle if scrolled up). The problem is that I'm opening the dialog from the bottom of the screen. Is there a way to get the dialog to show for the user's current scroll location?

• javascript
• facebook
• api

3 Answers 3

The FB.ui() dialog should already be positionned relative to the place the user scroll currently is.

If not, you can simply position your #fb-root in CSS :

#fb-root { position:fixed; top:10%; }

That way, the pop-in will always be on the scroll position of the user and also follow it if he continue to scroll up or down the page.

I'm using this piece of code to set the dialog position to the top of the page, but you can use it to set the position anywhere you want. This code uses the jQuery library

            setInterval(function(){
                var dialog = $('.fb_dialog');

                for(var i = 0; i < dialog.length; i++)
                {
                    var d = $(dialog[i]);
                    if(parseInt(d.css('top')) > 0 && parseInt(d.css('top')) != 195)
                    {
                        d.css('top', '195px')
                    }
                }
            }, 500);

The facebook write the dialog html code to the <div class="fb-root"></div> so if you surround it with a <div style="position: absolute;"></div> the dialog appears where you put this code.

For example:

<div style="position: absolute">
<div class="fb-root"></div>
</div>