JavaScript Menu hiding behind the FusionCharts object

[Vamsi]

Hi All,

I have a problem like my JavaScript menu is hiding behind the FusionCharts object. Pls help its very urgent.

Thanks in advance.

Vamsi

[Pallav]

FusionCharts is a set of Flash movies, and as kind of plugins, are rendered in a special way by the browsers (a method known as "windowed"), making them the topmost objects in a page. At this moment there's no way to display any kind of HTML element (tables, images, paragraphs, etc..) above plugins.  <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

Macromedia has a solution for Internet Explorer for Windows and all Mozilla-based browsers:

To allow DHTML objects appear over a Flash movie just add this parameter:

WMode=Transparent

to the Flash <object> tag.

 

It should look like this: 

<param name="WMode" value="Transparent">

In order to support Mozilla-based browsers and other browsers, such as Safari, you should also include the wmode parameter in the <embed> tag, like this: 

<embed wmode="transparent" .......></embed>

If you're using FusionCharts.js (JavaScript class), you can use the attached JS file.

FusionChartsWMode.zip

[taragdes]

I am having the same issue, however I am using ASP.NET/C# and rendering the chart's Flash tags with the FusionCharts.RenderChart method. How do I compensate for this problem in this case and set the WMODE for the chart? Thank you!!

[Pallav]

Replace the existing FusionCharts.js file with the new one (link above). That alone should take care of it.

You would NOT need to change anything in your .NET code.

[taragdes]

Pallav (5/2/2007)

---

Replace the existing FusionCharts.js file with the new one (link above). That alone should take care of it.

 

 

 

You would NOT need to change anything in your .NET code.

 

 

 

Thank you for your reply.

[tonyHarris]

Hi,

  I'm using the CalendarExtender from the AjaxControlToolKit and it appears behind the flash chart.  I replaced the FusionCharts.js with the one recommended to fix this problem but it still persists.  Any other suggestions or tips?

[FusionCharts Support]

Hi,

It might be that when the final HTML is renderded to the user agent (Browser) the chart's HTML is renderdered after the HTML of the Menu. Could you please check if there is some option in the Ajax Toolkit's property to set its style property or it's style's z-index property? If you get option to set style please set : z-index:9999 or set the z-index to 9999?

[tonyHarris]

I changed the z-index of the calendar extender using this css class:

<

style type="text/css">

.calStyle

{

z-index: 9999;

}

</style>

And the calendar extender background turned transparent and was still behind the flash chart.

[tonyHarris]

I also checked the .js param list that is written to the HTML page once the chart is rendered and these are the only params that are set:

<param name="allowScriptAccess" value="always" />

<param name="movie" value="../FusionCharts/FCF_Column3D.swf?ChartNoDataText=There is no data in the date range chosen, please choose another date range."/>

<param name="FlashVars" value="&chartWidth=600&chartHeight=300&debugMode=0&dataXML=<graph></graph>" />

<param name="quality" value="high" />

Should the <param name="wmode" value="transparent" /> tags be in there?  I have them in the FusionCharts.js file I'm using.

EDIT* I noticed that the .js file works when I use the FusionCharts.RenderChart() rather than the FusionCharts.RenderChartHTML().  But I have to use the FusionCharts.RenderChartHTML() function because I'm using an UpdatePanel.

EDIT* Problem fixed, I updated the .dll to the newest version and used the RenderChartHTML() function with the additional parameter for transparency.  Works like a charm now.

Edited April 30, 2008 by Guest

[nnxcoder]

I am using a modal window which pops up over charts. But the modal window disappears behind the charts. Any clue what needs to be done?

 

 

 

Thanks,

 

 

 

--Narasimha

[FusionCharts Support]

Hi,

Please try setting the chart's wmode to transparent and also check the z-index of the modal window.

[juss3pp3]

where I can find the last dll?

[FusionCharts Support]

Hi,

 

Could you please download the latest pack from www.fusioncharts.com/download.asp ? This pack contains the DLL in Code folder?

[LIdya]

wew.. This is brilliant! Thanks a lot

[Guest Basundhara Ghosal]

Hi,

Glad that your issue is resolved.

Keep smiling and keep FusionCharting.

[sunilkrverma]

 

FusionCharts is a set of Flash movies, and as kind of plugins, are rendered in a special way by the browsers (a method known as "windowed"), making them the topmost objects in a page. At this moment there's no way to display any kind of HTML element (tables, images, paragraphs, etc..) above plugins.

 

 

Macromedia has a solution for Internet Explorer for Windows and all Mozilla-based browsers:

 

 

To allow DHTML objects appear over a Flash movie just add this parameter:

 

 

 

 

WMode=Transparent

to the Flash <object> tag.

 

It should look like this:

<param name="WMode" value="Transparent">

In order to support Mozilla-based browsers and other browsers, such as Safari, you should also include the wmode parameter in the <embed> tag, like this:

<embed wmode="transparent" .......></embed>

 

If you're using FusionCharts.js (JavaScript class), you can use the attached JS file.

 

 

 

 

 

Hi

 

Is using the attached JS file still the only solution to work around this while using FusionCharts.js?

 

Thanks

Sunil

[edelcom]

If you're using FusionCharts.js (JavaScript class), you can use the attached JS file.

 

Hi, just want to tell you that this works perfectly ! Thanks very much.

 

Do you have something similar for FusionMaps ?

My charts at stapijst.be all now are scrolling behind my top banner, but my maps aren't.

See one of the pages at this site : page with Charts and Maps.

 

Thanks in advance for any advice you might provide.

[Guest Sumedh]

Hi,

 

Could you please, try to set z-index property for the map container?

 

z-index property specifies the stack order of an element.

 

#JavaScriptMenu

{

z-index: 1000; ----------------------------> (setting positive z-index)

}

 

#mapContainer

{

background: #FFFFFF;

z-index: -1; ----------------------> (setting negative z-index ).

}

 

Hope this helps.

[edelcom]

Hi,

 

Could you please, try to set z-index property for the map container?

 

I will try this, but if it behaves as the FusionCharts, this will not work.

I tried the z-index before I went looking on your site for a solution ( and found the above new Javascript file ).

 

This new Javascript file solves the problem, but the FusionMaps on the pages are still ABOVE anything else ( mostly my fixed header ).

 

You can see this here : http://www.staplijst.be/wandelingen-per-provincie.asp

 

Mind you: this is a page without the z-index for the FusionMaps ! I will try and change this at the end of the day ( it's now 9 AM here ).

[Guest Sumedh]

Hi,

 

For this issue, you can try using setTranparent method.

 

This method will set your map background as transparent in the HTML page.

 

The latest FusionMaps.js has the capability to get over with this issue.

 

Ref. Code:

 

mapObj.setTransparent(true);

Hope this helps

[edelcom]

Hi,

 

For this issue, you can try using setTranparent method.

 

This method will set your map background as transparent in the HTML page.

 

The latest FusionMaps.js has the capability to get over with this issue.

 

Ref. Code:

 

mapObj.setTransparent(true);

Hope this helps

 

Hi,

 

Would you please be so kind to attach the Javascript file you mention in this post ?

 

I have downloaded the latest version 3.1.1 from the site, replace my fusionmaps.js with the new version, but while the modified fusioncharts seems to work, the fusionmaps.js does not.

 

Thanks in advance,

Erik

[FusionCharts Support]

Hi,

 

Please find the attached sample showing the use of setTransparent. The zip contains the required js file.

Using_setTransparent_FusionMaps31.zip