I'm experiencing weird behavior on my Flash content when using Floatbox.

Normally the Flash (menu) should behave in this way:
http://www.fairtradehk.org/english/involved-partners.html

But with Floatbox, words are missing unless you rollover them:
http://www.fairtradehk.org/english/involved-events.php/2009/04/08/fair-trade-break-e.html

Any idea?

Do you mean the horizonatal menu across the top of the pages? I can't reproduce any problem with those. They appear the same with no missing words on both pages in Firefox, IE8 and Chrome for me.

Thanks for your reply.

I have the problem on several PCs, end up like:

<admin: large image of menu not showing removed because it messed up forum layout>

Wow. That wide image sure screws up the forum layout.

It's not that I don't believe you. It's just that the problem doesn't occur with any browser I try it on. (Now it's your turn to believe me )

I can't imagine anything in floatbox that could modify how the flash plugin displays its content as a result of the mere inclusion of the floatbox files on the page. One trick that sometimes works for me when flash mis-behaves is to change the wmode it is being displayed as. I notice your menu has wmode=transparent. What happens if you use wmode=window?

Sorry, I can't reproduce the problem you're having with your menus, nor can I offer much in the way of suggestions as to how to get them working for you.

By the way, I've tried it from IE6, IE7 and IE8 on 3 different machines, two XP and one Vista. The menu is fine for me in each case.

@pcytsang

You might consider typing more information describing in detail what your exact problem is. I lack clairvoyance and can't intuitively decipher your problem, or understand your posts very well. I'm a guest here and not very conversant with Floatbox, but I do know enough about Flash to be dangerous.

Quote

I'm experiencing weird behavior on my Flash content when using Floatbox.

What behavior?
Weird is not a descriptive word. I can be weird quite often. But that doesn't tell you much, huh?

Quote

But with Floatbox, words are missing unless you rollover them:

Again,
Which word(s)?
Where on your page?
In the top menu, sidebar or middle of page?

In the Flash content, text content or Floatbox content? I surfed around your page and clicked on several links and saw no use of Floatbox being used on the first URL link. A "View Page Source" Ctrl-F search of your code showed no classes for "floatbox".

In addition to typing more information about your specific problem, you might want to post your Browser and Browser Version information. Not sure if you are using Firefox? If you are using Firefox be aware that it is very difficult to clear the cache of Flash content. It's a long standing bug in FF. So, if you have made changes to Flash content you may not readily see the changes. I work around this by actually calling the .swf file directly in the Browser once you modify a Flash file. Example:
Call: http://www.mydomain.com/myflashfile.swf
instead of
Calling: http://www.mydomain.com/myflashwebpage.html
(where myflashfile.swf file is embedded in "myflashwebpage.html")
Nine times out of ten, when I have issues with Flash and not being able to see correct images, it is because of cache issues.

But then all my banter here about Flash issues may be "weird", wasteful guess-work because you truly need to spend more time describing your problem more thoroughly.

Type away..........


Sidebar here:
When embedding Flash content, you may consider using the alternate SWFobject method instead of the "embed" method. The older "embed" method may be quick and easy, but it is not the way forward with Adobe and Flash. More info and a very easy to use "wizard" here:
http://code.google.com/p/swfobject/

I can shine a little light here. The image that was posted but that I removed showed the second linked page in IE with no horizontal menu across the top of the page. The report is that the flash menu displays its "words" only after mouse-over when floatbox is included on the page, but displays fine prior to mouseover when floatbox is not included on the page.

admin wrote

I can shine a little light here. The image that was posted but that I removed showed the second linked page in IE with no horizontal menu across the top of the page. The report is that the flash menu displays its "words" only after mouse-over when floatbox is included on the page, but displays fine prior to mouseover when floatbox is not included on the page.

Ah. Got it. I didn't even visit the second link, because I saw no code for floatbox in the first URL link. I made assumptions that the second page would not have floatbox code. Apologies to pcytsang.


@pcytsang
Here's what I see using Firefox Vers 3.0.7 visiting this page:
http://www.fairtradehk.org/english/involved-events.php/2009/04/08/fair-trade-break-e.html

The Flash menu bar has seven text rollover buttons starting with About Us and ends with Resources. The text is white before mouseover and the background blue shows through the Flash menu due to <param name="wmode" value="transparent" />. On mouseover, the text turns black and move upwards slightly by about 5-10 pixels. The highlighted (visited) page shows "Get Involved" and features a rectangular background, linear gradient that is black at bottom with a lighter opacity at the top near the top edge of the browser window.

The only link I see assigned to Floatbox is the "Register online" Href near the bottom of the page in the main column. This link works a treat. The registration form pops up in a Floatbox enabled window with an HTML page. Looks fine.

@admin
I did notice that the Flash Menu content disappears and is not visible through the opacitized .png background overlay of Floatbox.

<div id="fbOverlay" class="fbOverlay_white" style="z-index: 90001; opacity: 0.55;"/>

Click the "Register online" link and then use the main browser scrollbar (not the Floatbox scrollbar) to scroll up and see the Flash menu content under the Floatbox background overlay. You will see that the content is not visible. Is this a Z-index issue with fbOverlay, or perhaps a bit setting issue saving the transparent PNG overlay in Photoshop? Low opacity or transparent 24 bit, or 32 bit .pngs should show underlying content.

The same thing occurs with my Flash example in the other thread. I noticed it when I got Floatbox running. Not a huge deal, but would be nice if the content showed. Particularly if your entire background page was flash content.

Anyway, maybe this is what pcytsang meant?

No, that's not what he meant. The horizontal menu shows nothing for him on page load before floatbox is opened.

Here's the poop on "disappearing" flash under the overlay. (Incidentally, there is no png involved in the overlay. It's just a div with a background colour displayed with opacity.)

Floatbox includes an option called hideFlash. When true (which is the default) visibility of all flash objects on the host page is set to "hidden" when floatbox is running and returned to "visible" when fb exits. This is because for flash with wmode=window (the default for wmode) it will always appear on top of everything, including the floatbox content. Some folks refer to this a "bleed-through". The reason for the bleed-through is that wmode=window gives the flash object its own display window (hwnd) above and independent of the browser window. No amount of z-index increase of the browser content can get the browser content above the flash object.

You can turn off hideFlash if your flash object(s) use a wmode of "transparent" or "opaque". In this case, flash does not allocate a separate display window for its content, it stays in stacking order with the page, and will display beneath floatbox with the rest of the host page.

But I fear we've hi-jacked pcytsang's original thread and I haven't addressed his invisible menu problem, which I still can't reproduce or explain.

Sorry for creating those misunderstanding.

Thanks for those who understand my English.

Anyway, by trial and error I found that 100% width of the Flash object is causing the problem.

Thanks!