Facebox popup stays under flash on page

[tobtob]

I have a problem with facebox getting chopped by a flash movie on my
page. I tried some things I read about setting flash to "opaque" and/
or "transparent" but it still gets cut off. Any ideas ?

[tobtob]

Hello, (here is a link that shows the problem: http://204.8.82.53/richter/events.asp
)
I spent a good part of the day looking for a solution to this
problem. I'm hoping someone has used facebox and knows how to make it
display over a flash movie without getting "chopped off". Any help
would be appreciated. Thanks.

[Jason Tate]

Did you try setting the wmmode to "transparent"?

[SoccerGuy3]

Has anyone found a fix for this? I tried the above, but it didn't
work. Using SWFObject to display the flash

[stuk]

try setting the z-index to bigger number like 99999

[James Beuthling]

z-index 9999 no good, having same issue with form elements popin thru

[Jacinto]

Is there no definitive solution for this? I've tried every suggestion
proposed on this discussion forum and nothing works. I'm using
FlashEmbed to embed my video player, but I have also tried hand-coding
object/embed elements. Nothing.

[Jonny Stephens]

Is the site available to check out online?

[Jacinto]

Hi Jonny,

Our site hasn't gone live yet, so I created two quick demos. The first
one (http://galathil.googlepages.com/testrabbit.html) uses Flashembed
and the second (http://galathil.googlepages.com/testrabbit2.html) uses
manual embed code that sets wmode. I probably should have mentioned
before that I was testing on Linux with Firefox 3 and Opera 9.5.

While creating the demos I also did some testing under Windows. The
first demo doesn't work at all (which I can understand), while the
second one does work on Windows (I tried IE 7 and Firefox 3), but not
Linux.

[Jacinto]

After some more digging it seems that this is a known bug with Flash
on Linux. Fortunately, I came across a blog post (http://
blog.marcoos.com/2006/07/21/html-div-above-a-flash-animation-on-linux-
its-possible/) that describes a dirty hack using an iframe with a z-
index between the Flash player and a div that will appear above it.

I made a quick hack to use this technique in Facebox. You can see it
in action at http://galathil.googlepages.com/testrabbit3.html. This
works on Linux with Firefox 3 (with the minor issue of the non-rounded
iframe corner bleeding through) and doesn't appear to cause any
inconsistencies with Firefox on Windows. IE 7 has some trouble though;
I believe it is an issue with transparent iframes there. My
modifications are included inline below (diff against v1.2).


diff -u a/facebox.css b/facebox.css
--- a/facebox.css 2008-05-05 14:28:41.000000000 -0400
+++ b/facebox.css 2008-07-10 15:08:24.000000000 -0400
@@ -80,6 +80,15 @@
width:100%;
}

+#facebox_foundation {
+ background-color: transparent;
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 98;
+}
+
.facebox_hide {
z-index:-100;
}
diff -u a/facebox.js b/facebox.js
--- a/facebox.js 2008-05-05 14:28:41.000000000 -0400
+++ b/facebox.js 2008-07-10 15:08:24.000000000 -0400
@@ -140,6 +140,11 @@
$('#facebox .loading').remove()
$('#facebox .body').children().fadeIn('normal')
$('#facebox').css('left', $(window).width() / 2 - ($('#facebox
table').width() / 2))
+ $('#facebox_foundation').width($('#facebox').width())
+ .height($('#facebox').height())
+ .css('display', 'block')
+ .css('left', $('#facebox').css('left'))
+ .css('top', $('#facebox').css('top'))
$
(document).trigger('reveal.facebox').trigger('afterReveal.facebox')
},

@@ -188,6 +193,7 @@

if (settings) $.extend($.facebox.settings, settings)
$('body').append($.facebox.settings.faceboxHtml)
+ $('body').append('<iframe id="facebox_foundation"
src="javascript:false;document.write(' + "''" + ')"
allowtransparency="true" scrolling="no" frameBorder="0"></iframe>')

var preload = [ new Image(), new Image() ]
preload[0].src = $.facebox.settings.closeImage
@@ -314,6 +320,9 @@
hideOverlay()
$('#facebox .loading').remove()
})
+ $('#facebox_foundation').fadeOut('fast', function() {
+ $(this).css('display', 'none')
+ })
})

})(jQuery);

[Jonny Stephens]

I don't have Linux here to test, but here are my findings for
testrabbit3.html on Windows and Mac:

Windows

IE6 - OK (transparent borders aside).

IE7 - OK, but strangely the Facebox borders are transparent in
Testrabbit2 but not in Testrabbit3.

Firefox 2 - OK.


Mac

Safari 2 - crashes (see thread "Facebox causing Safari 2 to crash",
though I find Safari works best with jQuery 1.2.1).

Safari 3 - OK.

Firefox 1.5 - Movie disappears when Facebox opens, leaving empty
space. Returns when Facebox is closed.

Firefox 2 - Same as 1.5.

Firefox 3 - Some overlapping areas of Facebox not rendering (redraws
correctly if window is resized or not at the front).

Opera - 9 - Same as Firefox 3.

On Jul 10, 8:38 pm, Jacinto <galat...@gmail.com> wrote:
> After some more digging it seems that this is a known bug with Flash
> on Linux. Fortunately, I came across a blog post (http://
> blog.marcoos.com/2006/07/21/html-div-above-a-flash-animation-on-linux-
> its-possible/) that describes a dirty hack using an iframe with a z-
> index between the Flash player and a div that will appear above it.
>
> I made a quick hack to use this technique in Facebox. You can see it

> in action athttp://galathil.googlepages.com/testrabbit3.html. This