Start Building Professional
Web Apps Today

Flash contents inside a tab


I dynamically create chart contents for fusionchart and insert into a div which is inside a tab. Following is the code generated using Ajax call. When I inspect the element inside the tab, I can see the Flash contents. But I do not see the chart.
The same code works well if I create the chart outside tab.

Is there anything I should do to show the flash contents inside tab?


<div id="tab10_pie1" align="center" style="width: 300px; height: 200px;">
<embed id="embed_tab10_pie1" height="200" width="300" flashvars="chartWidth=300&chartHeight=200&debugMode=0&DOMId=embed_tab10_pie1&
registerWithJS=0&scaleMode=noScale&lang=EN&dataXML=<graph caption='Pie Chart' nameTBDistance='20' decimalPrecision='0' showPercentageValues='0'
showNames='1' numberPrefix='$' showValues='1' showPercentageInLabel='0' pieYScale='45' pieBorderAlpha='100' animation='1' shadowXShift='4'
shadowYShift='4' shadowAlpha='40' pieFillAlpha='95' pieBorderColor='FFFFFF'> <set value='25' name='Item A' color='AFD8F8' />
<set value='17' name='Item B' color='F6BD0F' link='JavaScript:disp(%22Item B-17%22);' /> <set value='23' name='Item C' color='8BBA00'
link='JavaScript:disp(%22Item C-23%22);' isSliced='1' /> <set value='65' name='Item D' color='A66EDD' link='JavaScript:disp(%22Item D-65%22);' />
<set value='22' name='Item E' color='F984A1' link='JavaScript:disp(%22Item E-22%22);' /> </graph> "
allowscriptaccess="always" quality="high" name="embed_tab10_pie1" src="/gbmims/Charts/FCF_Pie2D.swf" type="application/x-shockwave-flash"/>
</div>

There is a known issue with some kind of flash components, to workaround it,adding next command may be helpful

tabbar.enableForceHiding(true)

I saw this solution in your knowledgebase. Not sure where do I use this.? Do I put this command as init parameter where I define my tab or just I add this command in my javascript before I call  flash object or after calling flash?

Any help is appreciated (Any example code will be helpful)

Just add this line after tabbar initialization 
var tb = new dhtmlXTabBar(...
tb.enableForceHiding(true);

In case of init from HTML markup

<div class='dhtmlxTabBar' enableForceHiding='true' ...

I have a top level Tab like this

<div id="a0_tabbar" class="dhtmlxTabBar" tabstyle="modern"     tabheight="25"     imgpath="/ccb/js/dhtmlxTabbar/codebase/imgs/"          
    style="width: 100%; height: 600px; overflow-x:hidden;" mode="top"     offset="8"     margin=-1      
    oninit="a0_tabbar.setTabActive('a1_tabbar',true);"    >

This tab contents is another tab like the following where I added your suggestion

<div id="a2_tabbar" class="dhtmlxTabBar" tabstyle="modern"     tabheight="25"     imgpath="/ccb/js/dhtmlxTabbar/codebase/imgs/"          
    style="width: 100%; height: 100%; overflow-x:hidden;" mode="top"     offset="8"     margin=-1      enableForceHiding='true'
    oninit=""    name='Mid Market Dashboard' >


Following is the DIV which contains the Flash charts below the Grid

<div id="tab210" style='width: 100%;height:460px;margin:10px 0px 0px 0px;;overflow:hidden;' name="10-Mktg Leads & Lead" enableForceHiding='true' >
    <table width='100%' cellspacing=5 style='background-color:#ffffff;' border=0>
            <tr style='background-color:#e0e0e0;'>
                <td  nowrap><span id='ptitle210'></span></td>
                <td align=center style='width:6em;cursor:pointer;'   ></td>
                <td align=right style='width:1em;height:100%;vertical-align: middle;text-align:center;'><img src='/gbmims/jsp/icon-information-blue.gif' onmouseout="UnTip()" onmouseover="TagToTip('helpTab210', BALLOON, true, BALLOONSTEMOFFSET,-5, PADDING, 8,BORDERCOLOR,'#dd00aa')"></td>

            </tr>
    </table>
    <div id='gridBox210' style='width:100%;height:200px;'></div>
    <table border=1>
        <tr>
            <td><div id='tab10_pie1'  style='width:300px;height:200px;'></div></td>
            <td><div id='tab10_pie2'  style='width:300px;height:200px;'></div></td>
        </tr>
    </table>

</div>

Still I do not see fusion charts in Firefox
I can see the fusion charts in IE
I can add this embed html in Printview and there also I can see the chart

There is something in Firefox and DHX Tabs combination that does not allow the chart to show up

Please try to add enableForceHiding='true' to the top-level tabbar as well.

>>There is something in Firefox and DHX Tabs combination that does not allow the chart to show up
Problem caused by using flash content inside container with visibility:hidden style ( which used by tabbar, for hidden tabs ), such combination prevent correct flash initialization in case of FF

I do not see even the Grid which is supposed to be above charts. The whole content is blank now