<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>bluefeet &#187; FusionCharts</title>
	<atom:link href="http://blog.bluefeet.net/tag/fusioncharts/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.bluefeet.net</link>
	<description>Yet another Perl Hacker weblog</description>
	<lastBuildDate>Thu, 10 Jun 2010 15:22:38 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Flash Bleeding Through</title>
		<link>http://blog.bluefeet.net/2009/06/flash-bleeding-through/</link>
		<comments>http://blog.bluefeet.net/2009/06/flash-bleeding-through/#comments</comments>
		<pubDate>Tue, 02 Jun 2009 12:43:56 +0000</pubDate>
		<dc:creator>bluefeet</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[FusionCharts]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.bluefeet.net/?p=32</guid>
		<description><![CDATA[If you use mint.com you&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p>If you use mint.com you&#8217;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:</p>
<div class="codecolorer-container html4strict vibrant" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/object.html"><span style="color: #000000; font-weight: bold;">object</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;application/x-shockwave-flash&quot;</span> ...&gt;</span><br />
&nbsp; &nbsp; ...<br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/param.html"><span style="color: #000000; font-weight: bold;">param</span></a> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;wmode&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;opaque&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
&nbsp; &nbsp; <span style="color: #009900;">&lt;embed ... wmode<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;opaque&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span>embed&gt;</span><br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/object.html"><span style="color: #000000; font-weight: bold;">object</span></a>&gt;</span></div></div>
<p><cite>&#8220;The WMODE parameter can be &#8216;window&#8217; (default), &#8216;opaque&#8217;, or &#8216;transparent&#8217;. Using a WMODE value of &#8216;opaque&#8217; or &#8216;transparent&#8217; 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.&#8221; &#8211; <a href="http://kb2.adobe.com/cps/155/tn_15523.html">Adobe Technote</a></cite></p>
<p>In my testing this works great in Firefox 3 and IE 7.</p>
<p>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.</p>
<div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #006600; font-style: italic;">// sets WMODE to &quot;opaque&quot;.</span><br />
chart.<span style="color: #660066;">setTransparent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
<span style="color: #006600; font-style: italic;">// sets WMODE to &quot;transparent&quot;.</span><br />
chart.<span style="color: #660066;">setTransparent</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></div>
<p>A <a href="http://www.fusioncharts.com/forum/Topic3891-35-1.aspx#bm9676">thread</a> on the fusion charts forums goes in to more detail about this.</p>
<p><strong>Edit:</strong> Turns out that if you set a fusionchart to use wmode transparent or opaque, all of the mouseover events don&#8217;t work, such as displaying the exact value of a point in the chart when the mouse goes over it.  Boo!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.bluefeet.net/2009/06/flash-bleeding-through/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
