UI Tabs and Media Plugin Issue
Hi
I am having an issue trying to get two great plugins to work together
with Firefox 1.5. I have tested on IE6 and everything is OK. Due to
the restrictive security policies of my client I am unable to test on
other browsers currently!!
The basic story is that I have three tabs. Tab One intros the page,
tab two uses the media plugin to display a PDF, tab three shows
another pdf - different to the one in tab two.
Works great in IE6!! But in FF1.5 I get an empty iframe. If I turn
tabs off the PDFs load up no problem. Looking at Firebug though it
knows Media plugin has done its job (the iframe is created and the
embed eklement) but nothing is being displayed other than the iframe
border. Any ideas?
I will attach the code below. I have tested to make sure everything is
configured properly - everything is good. And as I say, it works fine
in IE6.
Driving me nuts.
Any help would be greatly appreciated.
Regards
PJ
Here is the code:
<div id="example" class="flora">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
Welcome.....
</div>
<div id="fragment-2">
<a class="media" href="one.pdf">PDF One</a>
</div>
<div id="fragment-3">
<a class="media" href="two.pdf">PDF Two</a></div>
</div>
</div>
The JS is as follows:
$('.media').media({width:200, height:500});
$("#example > ul").tabs({ fxSlide: false, fxFade: true, fxSpeed:
'slow' });