How to stop SWF inside of a jQuery UI tab from rel

Question

I have a SWF movie inside of a jQuery UI tab, and the problem I'm having is that the SWF gets reloaded everytime I click away from the tab onto another tab, and then click back. I can inspect the DOM and see that the div containing the SWF is still in the DOM when I click away, so I don't know why this it seems to reload it when I click back to the tab.

I added the following CSS rules to try to prevent the display being set to: none, but the Flash movie is still reloading:

.ui-tabs .ui-tabs-hide {
    display: block !important;
    position: absolute;
    left: -10000px;
}

Update: It turns out this is related to the following Firefox bug which has been around since 2001 / Firefox 0.9. I still don't have a good workaround however.

Answer 1

Some browsers (firefox for example) are reloading flash movies as soon as you do a hide/show (display: none;) on them. This is what is happening with the tab system. The only solution I know of is to

1. have the flash with a position:absolute;
2. listen to the event of the tab system
3. make sure the flash is moved in and out the screen view when the tab is shown/hidden

This can become tricky if you want a multi-flash, generic solution..

I hope this will help you

Answer 2

The solution mentioned earlier works in Chrome but not in Firefox for whatever reason (I am quite sure it was working some time ago). I found yet another solution :

first you need a generic rule to "hide" the content without using display:none;

/** hide the tab without using display:none; **/
.ui-tabs .ui-tabs-hide {    
display: block !important;
height: 0!important;
width: 0!important;
border:none!important;
visibility:hidden!important;

}

/** make sure your swf does not have leftover height when hidden **/
.ui-tabs .ui-tabs-hide object,
.ui-tabs .ui-tabs-hide embed {
    height: 0;
    width: 0;
}

It works for me. Tell me if if works for you ! Jerome WAGNER

Answer 3

Just as an update for the accepted answer. In newer versions of jQuery UI, the classes have changed.

.ui-tabs .ui-tabs-hide

in the css now needs to be replaced with:

.ui-tabs .ui-tabs-panel[aria-hidden="true"]

Hope that helps