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.
+3
A:
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?
Chris M
2009-12-01 12:16:33
+5
A:
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.
Alex Bagnolini
2009-12-01 12:17:37
+1
A:
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')
Oswaldo Oxlahun
2010-02-19 18:20:33