CODEWITHSUNDEEP
javascriptjqueryflashhtml
Hellnar
Hellnar

Reputation: 64853

jquery hide a div that contains flash without resetting it

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 right before modal gets triggered and reappears after closing the modal, works well but each .hide() and .show() the flash movie gets resetted while all I want is to hide (without removing the movie) and displaying it once it is triggered to .show that modal div.

Upvotes: 5

Views: 9289

Answers (3)

user277207
user277207

Reputation:

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')

Upvotes: 10

Alex Bagnolini
Alex Bagnolini

Reputation: 22402

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.

Upvotes: 8

Chris M
Chris M

Reputation: 242

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?

Upvotes: 5

Related Questions