How To Adjust Position Of FB.ui Dialog On Long Page

Facebook’s FB.ui Dialog is nice and easy to use. Recently I added FB.ui dialog box to send apprequests to user friends. It worked fine on my test account and my account. So we go live. I was happy. But At night i checked my mail and i got bad news. The FB.ui pop was not showing correctly whe user have many friends. BTW I am showing friends in a tabular format, one friend in a row. As first i googled 🙂 as i always do. I found many people was having issues with this but no one has correct solution. Then i found a solution in a forum. Their solution was to put a css code to put the dialog in a fixed position.

div.fb_dialog_advanced+div.fb_dialog_advanced { top:50px !important; }

As i was in a hurry i put the code in my file. Now whole thing gone terribly wrong. See the image

Now i am start poking in my Firefox browser with firebug. I see when i call FB.ui a loading popup div shown by FB and a ajax is called to get user’s friends. When ajax call is successful the loading popups top positon becomes -10000px and another popup div is show with friend-list.

The loading pop up

The request pop up

Now i have got an idea. There is function in jQuery we all use is ready() or $(function() { . With this i can set a function to check for the popup divs top position. If i get -10000px i will not change it. If get anything else i will set that div’s top to 50px.

Here is div with -10000px for fb_dialog div

Here is div with 50px for fb_dialog div

So here is my code

function move_to_top( value )
{
	$(".fb_dialog").each(function(index) {
		if(j(this).css("top")!='-10000px')
		{
			$(this).css("top", '50px' );
		}
  	});
	setTimeout( ('move_to_top("'+value+'");'), 1250);
}

function send_request()
{
    FB.Canvas.scrollTo(0,0);
    FB.ui({method: 'apprequests', message: 'Press accept to see this request.', data: 'tracking information for the user'},
        function(response) {
            if(response!=null)
            {
                alert('You are boss')	
            }
    });
    $(".fbProfileBrowserResult").ready( function(){
        t = setTimeout ( ('move_to_top("'+50+'")'), 1250 );
    });	
}

Here I called the FB.Canvas.scrollTo(0,0); to scroll to the top. See this post for further information. Then i call the move_to_top() function. Now i check for div with fb_dialog calss. If i found 1 then i check for the top. If it is not ‘-10000px’ the i set it to 50px. Now my app is working fine. I am happy.

About Zakir Hyder

This entry was written by .

29. September 2011 by Zakir Hyder
Categories: Facebook, FB Javascript SDK, jQuery, Social Networking Application Development | Tags: , , , , , , , , | Comments

Comments

  1. […] How To Adjust Position Of FB.ui Dialog On Long Page Thursday, September 29, 2011 11:52 AM Facebook’s FB.ui Dialog is nice and easy to use. Recently I added FB.ui dialog box to send apprequests to user friends. It worked fine on my test account and my account. So we go live. I was happy. But At night i checked my mail and i got bad news. The FB.ui pop was not […] […]