Content not fading with containing element

Question

I am using the update content feature of spry in conjunction
with a spry fade in/out effect which works very well aside from in
a couple of instances. Firstly, I have a div that has its content
replaced, before it is replaced it fades out, but the .swf file
inside the content does not fade out with the rest of the content.
Secondly I have the same issue with the spry tabbed panels.
The rest of the content fades in or out fine but the tabs
themselves do not.
In both cases either the tabs or the .swf file stay at 100%
opacity until the rest of the content has been replaced.
Any help would be be greatly appreciated.

Answer 1

quote:
Originally posted by:
kinblas
The flash problem is due to the fact that the flash plugin
uses a native window by default ... this window is on top of the
browser's canvas where your page is drawn. To get it to fade with
the rest of the content, you're going to have to tell Flash to draw
into the same window that contains the browser canvas. Follow the
instructions here:
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15523
I'd have to see your code that is fading your tabbed panels
as well as your tabbed panel markup ... got url? ... are you fading
the top-level element of the entire tabbed panel widget? Or are you
fading just the panel content?
--== Kin ==--
No URL at present Im afraid as its currently on an internal
only server. However its pretty easy to understand. There is a
single div containing the tabbed panel set, it is this outer div
that I am calling new content in to and fading out the old, so yes,
its fading the outer most div that contains the tabbed panel set.
This is the link that is clicked for example:
<a href="#" class="menu"
onclick="fade_content('content','../../v_content/v_products/lan.htm');
return false;">Wireless LAN</a>
This is the script that is used:
function fade_content(ele,url){
Spry.Effect.DoFade('content',{ duration: 500, from: 100, to:
0, finish: function() {
Spry.Utils.updateContent(ele, url, function() {
Spry.Effect.DoFade('content',{ duration: 500, from: 0, to:
100 });
This is the Div that is being replaced/faded:
<div id="content">
<script type="text/javascript">
<!--
Spry.Utils.updateContent('content','../../v_content/v_company/about_qolcom.htm');
//-->
</script>
</div>
and finally an example of the content that is being called in
to the content div would be something like this:
<table width="100%" border="0" cellspacing="0"
cellpadding="0" class="table_no_format" height="332">
<tr>
<td valign="top" align="left">
<h2>Contact QoLcom</h2>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Head
Office</li>
<li class="TabbedPanelsTab" tabindex="0">Stirling
Office</li>
<li class="TabbedPanelsTab" tabindex="0">Support
Team</li>
<li class="TabbedPanelsTab" tabindex="0">Invoice
&amp; Payments</li>
<li class="TabbedPanelsTab" tabindex="0">Registered
Office</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<h2>Head Office</h2>
QoLcom Limited
<br />
Unit 3 King John House
<br />
Kingsclere Park
<br />
Kingsclere
<br />
Newbury
<br />
Berkshire
<br />
RG20 4SW
<br />
United Kingdom
<br />
<br />
T: [phone]
<br />
<br />
F: [phone]
<br />
<br />
E: <a
href="mailto:[email protected]">[email protected]</a>
<br />
    <a
href="mailto:[email protected]">[email protected]</a>
<br />
    <a
href="mailto:[email protected]">[email protected]</a>
<br />
    <a
href="mailto:[email protected]">[email protected]</a>
</div>
<div class="TabbedPanelsContent">
<h2>Stirling Office</h2>
QoLcom Limited
<br />
Springfield House
<br />
Laurelhill Business Park
<br />
Stirling
<br />
FK7 9JQ
<br />
Scotland
<br />
<br />
T: [phone]
<br />
<br />
F: [phone]
</div>
<div class="TabbedPanelsContent">
<h2>Support Team</h2>
If you need to contact our Support Team please submit a
support request to <a
href="mailto:[email protected]">[email protected]</a>
<br />
<br />
Alternatively, you can telephone the support team on
[phone] between 9.00am and 5.30pm Monday to Friday.
</div>
<div class="TabbedPanelsContent">
<h2>Invoice &amp; Payments</h2>
QoLcom Limited
<br />
Unit 3 King John House
<br />
Kingsclere Park
<br />
Kingsclere
<br />
Newbury
<br />
Berkshire
<br />
RG20 4SW
<br />
United Kingdom
<br />
<br />
T: [phone]
<br />
<br />
F: [phone]
<br />
<br />
E: <a
href="mailto:[email protected]">[email protected]</a>
</div>
<div class="TabbedPanelsContent">
<h2>Registered Office</h2>
QoLcom Limited
<br />
c/o Dove, Marsh &amp; Jones
<br />
1 Andromeda House
<br />
Calleva Park
<br />
Aldermaston
<br />
Reading
<br />
Berkshire
<br />
RG7 8AP
<br />
United Kingdom
<br />
<br />
<strong>Note:</strong> These are our
accountant’s offices. Only use this address for the purposes
of sending legal notices.
<br />
<br />
Our operational company address can be found on the Head
Office tab of this page.
</div>
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
CSS is pretty much untouched and the js file hasnt been
changed.
TIA