Pallav

JavaScript Menu hiding behind the FusionCharts object

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Guest

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Guest Basundhara Ghosal

Hi,

Glad that your issue is resolved.

Keep smiling and keep FusionCharting. :)

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now