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.
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
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
- have the flash with a position:absolute;
- listen to the event of the tab system
- 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
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