Friday, October 17, 2008

Showing HTML Content over Flash Movie - quick and dirty way!

I had faced a nasty problem few days ago. I was to show user a modal-popup (in html page) for Terms and Conditions for registration on a site. Popup was coming okay, but There was a flash movie at top of the page which was hidding upper portion of the dialog. The tested and widely used method is to put an Iframe at place where you want to show your content and absolute position your content and IFrame. For example, if you want to show a div above a flash movie, then place a IFrame like follows:
        <iframe style="position:absolute;top:250;left:150;"></iframe>
Then position the div exactly above this iframe like:
        <div style="position:absolute;top:250;left:150;"></div>

I was using jquery on the page to show dialog using ui.dialog plugin.
After fooling around sometime I devised following simple solution.

1)  put id attribute on movie element to uniquely identify the movie object. Like,
<object id="movie1"></object>
2)  before showing the dialog (or other content for that matter) call a javascript function to hide the movie. Like,
$("#movie1").css("display","none");

3)  now show dialog. Like,
$("#dialog").dialog("open");

4)  after closing the dialog, show the movie again. Like,
     $("#dialog").dialog("close");
$("#movie1").css("display","inline"); 

that's all folks, Happy Coding