Displaying FBJS dialog on top of Plug-in content

You cannot display any HTML Content on top of a plugin content. This is because of different window message loops running for browser and the plugin content. If you are working with Silverlight there is an option to specify to Silverlight to use browser windows message loops for paint messages. Set windowless=true to make use of this.

However this is not recommended as it will drastically slowdown your Silverlight application. Well, there is no point in using a slow Silverlight application.

If you have realized the limitations by now, lets work on the workaround. I have an application called ittiGator( a facebook game http://apps.facebook.com/ittigator ) where we are prompting with a publish dialog on completing the game.


What we will do is, we will create two DIVs sitting one top of other. We will host our Silverlight in one and publish button in other.

DIV – Publish button with some background.

DIV – Silverlight Content

Do you want to share your High Score with your friends?

We will call a JavaScript method called publish from Silverlight using

HtmlPage.Window.Invoke("publishScore", new string[] { UserScore.Text, UserName.Text });

In this publishscore method we will increase the height of ShowCase div to amount that is enough to push the plugin content just below the visible screen area.

function publishscore (score, usrname) 
{
document.getElementById("Showcase").style.height = '800px';
}

Reset the height on the publish dialog call back function

FB.Connect.streamPublish('', g_attachment, g_action_links, null, 'Post your high score and let the world follow you!', stream_callback_resizetheDiv);

This should work if you work with flash based application or even if you have an activex control embedded.

Leave a comment if you need any assistance in implementing this.