jquery hide a div that contains flash without resetting it

Question

Greetings, I have written a modal using jquery UI and it appears at the front of a flash movie thus the html inside the modal becomes corrupt, I tried to hide the movie righ

Answer 1

Tested in FF/linux, FF/WinXp, IE/WinXp, Safari/WinXp:

• put your flash container DIV into a new DIV with overflow:hidden.

basic:

• to hide flash-div: $('#id_div_with_swf').css("left","-2000px");
• to show flash-div: $('#id_div_with_swf').css("left","0px");

or, show and hide with animation effects:

• to hide flash-div: $('#id_div_with_swf').animate({ left: "-2000px"},1000);
• to show flash-div: $('#id_div_with_swf').animate({ left: "0"},1000);

html example:

<div style="width:200px; height:100px; overflow:hidden;">
<div id="id_div_with_swf" style="width:200px; height:100px; position:relative; left:0px; top:0px;">
<!-- flash here -->
</div>
</div>

---

you can't get a cross-browser working solution with .css('visibility', 'visible'/'hidden')

Answer 2

Working solution:

Use $('#myvideo').css('visibility', 'hidden') to hide and
$('#myvideo').css('visibility', 'visible') to show the div containing the video.

Just tested it with firebug.

EDIT: Please note, this is different from .hide() and .show(), as they use the display css, instead of visibility.

Answer 3

Perhaps move the movie div off the screen. Set it's Left position to be -1000 or something like that?

Then replace when the other div has disappeared?