views:

527

answers:

3

Hi guys,

I'm making a website using the jQuery UI Tabs plugin which is great. However, one of my "hidden" tabs contains an .swf. Firefox only plays this .swf when that tab has been "opened" - which again is great. IE however plays this .swf while it is hidden, so when the user clicks on the tab, they see no animation in IE as it has already finished. How to make IE only play the swf when the tab has been opened?

Thanks in advance.

A: 

Only assign the scr of the embed once the tab is clicked. That way onced clicked it loads the animation.

var flashURL = "http://url.com";
$( "#tab1" ).click(function(){
    $("#tab1 > embed").attr( "src", flashURL );
});
The embed tag is not used under IE when embedding flash movies, so this "solution" would simply not work. jQuery would not find any embed tag under #tab1.
Lior Cohen
Also, by using ('#tab1 > embed') you are assuming that the embed tag is a direct child of the #tab1 element, which it might not be. Regardless of whether this approach works or not, the query itself is not entirely correct.
Lior Cohen
A: 

I'd use swfobject in this case.

$("#tab1").click(function() {    
    swfobject.embedSWF("some.swf", "someid", "445", "250", "9.0.0");
    return false;
});
ScottE
The problem with that is that the swf will have to load after the tab is selected, so there could be a significant delay before the animation is shown.
micmcg
Hi Scott,Thanks. I have tried using your method but I'm not sure how to apply it. Do I put this in the header and remove the reference to it in the html?
lorenzium
Oh, and it's only a small flash file so loading won't be an issue. However, someone may want to look into a solution for larger files...
lorenzium
Yes, just download the swfobject js file and put it in the header, before the jquery core. All you need is an element with an id of "someid" in the tab where you want the animation to play. A common technique is to use <span id="someid">Flash is required...</span>
ScottE
Thanks Scott, that was it. Worked a charm. I had a little difficulty in setting params but got it figured in the end. For those of you wanting to know how to get transparency or something working, try:<code>$(document).ready(function(){ $(".btn").click(function() { var flashvars = {}; swfobject.embedSWF("images/movie.swf", "flash-id", "630", "120", "9.0.0", null, flashvars, {wmode: 'transparent'}); return false;});});</code>
lorenzium
+1  A: 

Why not have the animation start manually rather than automatically and then call a start function in the swf using javascript when the tab is shown?

micmcg
Hi micmcg - I would love to - but have no idea how! Any guidance would be very much appreciated.
lorenzium
Flash isn't my strong point, but you want to be looking at implementing an externalInterface function - http://blog.deconcept.com/2005/08/16/external-interface/ in the swf which starts the animation. You then use javascript to call the function when the tab click handler fires.
micmcg