jquery flash object show hide

Question

i am trying to show/hide a flash object based on click of button, but the code is not working
//to hide
$('object').css({visibility: 'hidden'});
//to show
$('object').css({visibility: 'visible'});


i dont want to use .show() and .hide() as they will also remove the area of flash content.

Answer 1

From what I've seen, this is not possible (especially cross-browser). Even using hide/show doesn't work in IE6/7. The only solution I've seen work is to remove the object from the DOM / append it back to the DOM.

Answer 2

$('object')
.wrap('<div class="fl-wrapper">') // Wrap the flash object in a div.
.parent().css({'overflow':'hidden'}) // Set the wrapper to overflow hidden.
.children().css({'margin-left':-99999});  // Set flash object to be out of box.

Then to toggle it back, you can:

$('object').css('margin-left',0);

I only tested this in Firefox. For other browsers you may also need to set the wrapper div's height and width to be equal to the object's height and width.