Howto: Hide flash

When using flash and lightbox (and lookalikes) it’s a common issue that the flash movie which should be under the lightbox pops out of there (often in weird places and not 100%)

So, an elegant way to solve this in Javascript would be to have the flash moved or disappeared.

Hide it (display none)

Using simple javascript one can hide the flash (or the div where the flash resides in) to have it re-displayed when necessary.

document.getElementById('div_flash').style.display = 'none' // hide
document.getElementById('div_flash').style.display = 'block' // show

And the same but in jQuery:

$('#div_flash').css('display', 'none') // hide
$('#div_flash').css('display', 'block') // show

However, in certain cases of movies, this will reload the movie (like what I encountered using the amCharts flash movie). Using this method to hide / show the movie is not prefered then.

Move it (margin-top or similar)

The other method, which prevents reloading the flash movie for certain cases, would be to move the flash movie.

It’s best to take in account whether or not it’s ok to have a scroll appear. Mostly this is not wanted so I’ll just use negative margins that seems to prevent the scroll to appear (at least in firefox):

document.getElementById('div_flash').style.marginTop = '-99999px' // hide
document.getElementById('div_flash').style.marginTop = '0' // show

And the jQuery equivalent:

$('#div_flash').css('margin-top', '-99999px') // hide
$('#div_flash').css('margin-top', '0') // show

It’s not required to work with margin-top, but it’s best to work with either margin-top or margin-left, because margin-bottom and margin-right (with negative values) will probably generate a scrollbar.