Problem with Flash appearing on top of Facebox

logo.png

Facebox is a modal window plugin for jQuery. It's fantastic, so give it a go.

The problem

I just had an issue with Flash appearing above a Facebox window in one of the projects I've been working on. Thought it may be useful to post the solution I found, since it wasn't an instant find for me.

The solution

When you embed flash on a page, you'll almost always have an <object> element and an <embed> element.

What you need to do is add <param name="wmode" value="transparent"></param> as a child element to the <object> element, and add wmode="transparent" as an attribute to the <embed> element.

That's it, fixed it nicely for me :) Happy coding!
Loading mentions Retweet
Filed under  //   facebox   flash   javascript   jquery   problem   solution  

Comments (11)

Jun 25, 2009
Jay Charles said...
Keep in mind that you need to be careful with wmode and flash. On some browsers it can break functionality. For example, on some versions of Firefox, a transparent .swf cannot receive text input.
Jul 01, 2009
Joel Gascoigne said...
Thanks for the pointer Jay! That wasn't something I was aware of.
Jul 08, 2009
Darwin said...
Nice. Same thing happens with aurigma image uploader (java applet).
Have a solution on this?
Jul 11, 2009
Joel Gascoigne said...
Sorry Darwin, I don't know anything about aurigma image uploader. Hopefully someone else will or you find a solution somewhere.
Aug 24, 2009
Roberto said...
Thank you sooo much! It worked like a charm!
Sep 22, 2009
nil said...
thanks this helped!
Oct 02, 2009
Joel Gascoigne said...
Thanks guys, I'm delighted it's proving helpful :)
Nov 10, 2009
Francisco said...
Thank you very much Joel!!!
You safe my life lol lol.
I was looking for a solution and I hadn´t found anything.
Nov 11, 2009
Joel Gascoigne said...
That's fantastic to hear Francisco! Glad it was useful :)
Jan 04, 2010
Randy Lewis said...
THANK YOU! I was searching for a fix! This worked perfectly! A+
Feb 08, 2010
Wayne said...
Hi. I have a different problem.
I designed a flash game and it activates the facebox from a flash button.(http://www.ushakamarineworld.co.za/Sushi-Game-2010/sushi-game-2010.php) My wmode cannot be set to transparent, because then the page scrolls when the user plays the game and presses the down or up keys.

I have to set my wmode to window.
In Firefox and Safari everything works 100%, but in IE the flash pops in on top of the facebox overlay and content.

Anyone have a suggestion? Thanx

Leave a comment...

 
Got an account with one of these? Login here, or just enter your comment below.
Posterous-login    Connect    twitter



 

About

I'm Co-Founder and CTO of OnePage (http://myOnePage.com). In this miniblog I aim to share content which will be useful and interesting for entrepreneurs, those managing technical aspects of a startup and web developers. I'm on the never ending learning process myself and just want to document as much of it as I can :)

I'm a graduate of Masters in Computing Systems at the University of Warwick and I love drum n bass and freestyle skiing!

I aim to post things here several times a week. Also, the posts are shorter in nature than my actual blog at http://joelg.co.uk, where I aim to write more lengthy posts less frequently on subjects of real interest to myself and the industry I am in rather than sharing information I find on the web. Take your pick as to which you'd like to subscribe to (both is the right choice here of course).