View Full Version : Hiding an iframe & still keeping it active...

07-19-2007, 11:32 AM
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");
function Hide_MP3() {
var fr = document.getElementById ("mp3player_frame");

<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">

07-19-2007, 11:39 AM
Hmm, donít know exactly but how about using visibility: hidden instead of display: none?

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

07-19-2007, 11:44 AM
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.

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

07-19-2007, 12:42 PM
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.

07-19-2007, 07:01 PM
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 :)