Posts Tagged ‘CSS’

How to show/hide SWF in Firefox without reloading

Thursday, October 8th, 2009

It’s a bug in Firefox that when you hide and then show SWF (Flex or Flash) again, it will be reloaded.

So, this is workaround.

Firstly, do not use “display: none” CSS to hide the div that contains Flash. Use “visibility: hidden ” instead.

What about layout? Yes, it may be a problem due to “visibility: hidden” just hide the div but still reserve space for it.

Therefore, we will fix it by additional CSS which is “width: 0px; height: 0px;”.

There is one side effect, the browser scroll bar will be longer than content  (I’m not sure why, but you may fix it by JavaScript. It’s out of my scope, so please let me know if any).

Conclusion, in case of we have to show/hide SWF and serious about reloading, we will use “visibility: hidden; width: 0px; height: 0px;” instead of “display: none”

In my case, I use jQuery Tabs.  So, I will fix CSS class from

.ui-tabs .ui-tabs-hide { display: none !important; }

to be

.ui-tabs .ui-tabs-hide { visibility: hidden; width: 0px; height: 0px; }

References:
http://pipwerks.com/lab/swfobject/hide-swf/2.0/index.html
http://stackoverflow.com/questions/298342/firefox-restarts-flash-movie-if-enclosing-div-properties-change

Thanks @tvchampion and @dogdoy for help.

CSS Properties: Display vs. Visibility

Wednesday, May 2nd, 2007

ที่มา: http://www.devx.com/tips/Tip/13638

It’s fairly easy to confuse the Cascading Style Sheets (CSS) properties display and visibility, because it would seem that they do much the same thing. However, the two properties are in fact quite different. The visibility property determines whether a given element is visible or not (visibility=”visible|hidden”). However, when visibility is set to hidden, the element being hidden still occupies its same place in the layout of the page.