Jun/093
Flash Bleeding Through
If you use mint.com you’ll notice that whenever a modal dialog is displayed they hide the flash content. This is because the flash normally bleeds through any HTML. Even if the flash has a z-index of -1000 and a div has a z-index of 1000, the flash will still appear on top of the div. There is an easy workaround for this with the WMODE parameter:
“The WMODE parameter can be ‘window’ (default), ‘opaque’, or ‘transparent’. Using a WMODE value of ‘opaque’ or ‘transparent’ will prevent a Flash movie from playing in the topmost layer and allow you to adjust the layering of the movie within other layers of the HTML document.” – Adobe Technote
In my testing this works great in Firefox 3 and IE 7.
Since we use FusionCharts at $work I had to figure out how to make the fusioncharts javascript set WMODE. This is very easy by calling a method on the chart object. Make sure you do this before you render the graph.
chart.setTransparent();
// sets WMODE to "transparent".
chart.setTransparent(1);
A thread on the fusion charts forums goes in to more detail about this.
Edit: Turns out that if you set a fusionchart to use wmode transparent or opaque, all of the mouseover events don’t work, such as displaying the exact value of a point in the chart when the mouse goes over it. Boo!
Leave a comment
No trackbacks yet.

7:57 am on July 23rd, 2009
Hello,
Your suggestion of setting window-mode to opaque or transparent really does the trick. It is helpful to many web developers using FusionCharts or any other flash content in conjunction with jQuery Modal Window or any other Overlay Packages.
However, which version of FusionCharts did you use to check that ‘all of the mouseover events don’t work”?
We tested with the current version (v3.1.1) of FusionCharts v3 on Firefox 2, Firefox 3, Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Chrome, Safari 3 Windows and Safari 4 Windows.
The results did not reflect the above-mentioned issue. The charts behave similarly in all window modes.
Check out a sample application to demonstrate one chart in three different wMode values, having an overlay html division with the cursor position tracked within it. Everything works fine there.
The sample application has been attached to the forum thread mentioned in your post.
:)
10:16 am on July 23rd, 2009
We’re using 3.1.1 as well. I’ll take another look at it again then and update this post if I can get the mouseovers working.
Thanks!
7:06 am on May 12th, 2010
Hey
I got a similar issue…..when i switch on wmode=transparent it fixes overlay-shine-tru-issues and z-index troubles but the hover on the flash chart gets unreliable.
Means: Sometimes you get the hover, sometimes not. It is different each time you load the page and there seems to be no pattern.
However, when you click on the chart to “focus” the chart the hovers work.
Very strange…
PS: I am using FUSIONCHARTS pro v3
Apart from that I think FusionCharts is great but I think the vendor should get this little bug fixed. It’s also a bit embarrasing to sell code that was last updated in 2008.
Cheers
Sissi