2
Jun/09
3

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:

<object type="application/x-shockwave-flash" ...>
    ...
    <param name="wmode" value="opaque" />
    <embed ... wmode="opaque"></embed>
</object>

“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.

// sets WMODE to "opaque".
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!

Comments (3) Trackbacks (0)
  1. Shamasis Bhattacharya
    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.

    :)

  2. bluefeet
    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!

  3. sissi
    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

Leave a comment

No trackbacks yet.