Hiding an iframe & still keeping it active...

I've done this little page where a mp3player is "folded" out when you hit show, and goes away when you hit hide.

However. When the player is hidden playback stops, and reloads when shown again. How can I work around this?


<script type="text/javascript">
<!--
function Show_MP3() {
var fr = document.getElementById ("mp3player_frame");
fr.style.display="block";
}
function Hide_MP3() {
var fr = document.getElementById ("mp3player_frame");
fr.style.display="none";
}
//-->
</script>


<div id="mp3player" align="center" style="bottom:0px; right:20px; position:fixed; z-index:1; border:0px;">
<font class="f5">MP3 Player: </font>
<a href="javascript:Show_MP3()" class="a6">Show</a>
<font class="f5"> | </font>
<a href="javascript:Hide_MP3()" class="a6">Hide</a>
<br />
<iframe id="mp3player_frame" src="mp3player.php" width="160px" height="132px" scrolling="no">
</iframe>
</div>

Hmm, don’t know exactly but how about using visibility: hidden instead of display: none?

var fr = document.getElementById ("mp3player_frame");
fr.style.visibility="visible";
}
function Hide_MP3() {
var fr = document.getElementById ("mp3player_frame");fr.style.visibility="hidden";

That worked, however. it still takes up space. my menu for showing/hiding is above the player and it looks much nicer when the space is gone too.

Edit:
RE-did it by putting the player above the menu. look great now and works great :)

You can set its position to absolute, though. That will take it out of the regular flow of elements, hence not taking up any space on the page.

yeah. but that would mean that the menu would be at the bottom all of time. Like it is now. When shown I want it to take up space, but when hidden not to take up space, but still be active.

but like I said, I went the way of putting the player above the menu and used visibility instead. works great :)