Recently, I created an AJAX web site that had to hide and show a container that had a flash object element inside of it based on the user's actions.

I first created an html block like this:

<div id="flashContainer"><br />	<object></object></div>

Then I created the following two css classes.  As you can see, by default, my flash object is shown and the flash player runs.

/* Hide by default */
div#flashContainer {
	display: block;
	visibility: visible;
}
 
div#flashContainer.hide {
	display: none;
	visibility: hidden;
}

 Now, if I programmatically add the "hide" css class to the "flashContainer" element, then the flash player will disappear.  This works correctly in all the modern browsers I tested: Firefox, Internet Explorer, Safari 3, and Opera.

The problem arises when you try to hide the "flashContainer" element again.  In Internet Explorer, if you programmatically remove the "hide" css class, then the flash player shows the *.swf file at end of it's timeline (or if it's still playing, the correct spot in the timeline).  The same JavaScript run in Firefox (or any Gecko-based browser) to remove the "hide" css class will trigger the flash player to restart the flash file.  This may be what some people want, but for this project, it was very bad.

I finally figured out how to get around this issue by just using a simple CSS work-around.  Using the example above, if I change the CSS to the following, then all browsers will hide and show the "flashContainer" element without replaying the embedded flash file.

/* Hide by default */
div#flashContainer {
	height: auto;
	overflow: hidden;
}
 
div#flashContainer.hide {
	height: 0px;
}