<div> Tags And Hiding/showing Them

[OJB]

Hey all

 

I have been working a script for my forum which allows me to use an IFRAME within a DIV tag which can be hidden or shown upon pressing an appropriate button.

 

I.e.. if you press "show frame" the iframe pops up

if you press "hide frame" the iframe gets hidden

 

 

i have managed that successfully using javascript and a few lines of code too

 

however, within my iframe is an MP3 streaming website... so when the iframe is shown the streaming commences and you can hear the song playing

 

in firefox when the iframe is hidden the streaming stops

 

 

however in IE this is not the case... even though the div containing the iframe is hidden the content continues to be played.

 

i really wanted it to work so that when the iframe was hidden the content didnt play and when it was opened the content did play....

 

Does anyone know how I can do this....

 

I have pasted the .js file and the code i have used below (please forgive my terrible html and javascript coding)

 

The code:

><script type="text/javascript" language="JavaScript" src="http://www.*******.com/sclickscript.js"></script>

<form><center>
<input type="button" onClick="ShowTrackHi('sclickwindowhi')" value="Play Hifi">
<input type="button" onClick="CloseTrackHi('sclickwindowhi')" value="Stop Hifi">
<input type="button" onClick="ShowTrackLo('sclickwindowlo')" value="Play Lofi">
<input type="button" onClick="CloseTrackLo('sclickwindowlo')" value="Stop Lofi">
</center></form>

<div id="sclickwindowhi" align="center" style="display: none;">
<iframe id="hifiplay" style="border:0px solid black" width=500 height=365 
src="http://www.*****.com/single_player.cfm?songid=******&cache=******&q=hi"></iframe>
</div>

<div id="sclickwindowlo" align="center" style="display: none;">	
<iframe id="lofiplay" style="border:0px solid black" width=500 height=365 
src="http://www.*****.com/single_player.cfm?songid=******>&cache=******&q=lo"></iframe>
</div>

 

The javascript file:

>function ShowTrackHi(tid1) 
{ 	
document.getElementById(tid1).style.display = "";


}

function CloseTrackHi(tid1) 
{ 
document.getElementById(tid1).style.display = "none";

	
}

function ShowTrackLo(tid1) 
{ 
document.getElementById(tid1).style.display = "";

}

function CloseTrackLo(tid1) 
{ 
document.getElementById(tid1).style.display = "none";

}

 

 

All the streaming works correctly, the iframe shows up and disappears fine, its just in IE the mp3 continues to stream even when the iframe is hidden... can anyone suggest how to overcome this?

 

Cheers,

OJB

[TCH-Bruce]

That could be because of the way IE handles web standards. It doesn't.

[OJB]

yea IE is a bit of a pest hahah

 

 

Well, my brother is a web developer so i recruited him to the cause and he has fixed the problem for me, by basically approaching it from a different angle

 

All seems to be working now but i appreciate you taking the time for me bruce

[TCH-JimE]

Could you explain OJB how your brother went about doing this from another angle, there may be other customers wanting to know how it was done?

 

Many thanks

 

JimE

[OJB]

sure...

 

Well my approach was to preload the div tags with the iframe content, but this caused issues because I could not get the content to stop playing. I then came across the div .innerHTML function i suppose where you can modify the contents of the div when you want... however using my method above plus this innerHTML (to fill the div with nothing, i.e. get the content to stop playing) As i had preloaded all the content the div would remain empty once I had used innerhtml to fill it with nothing

 

[really sorry if i am explaining this poorly]

 

anyway, my brother decided not to preload any of the iframe stuff into the div, instead he decided that upon calling the PlayHiTrack and PlayLoTrack functions he would use the innerhtml to fill the div with the IFRAME when the function was called.

 

So essentially everytime the button to play was clicked, using innerHTML the div tags were filled with the iframe and hence the content would commence playing (please note the div was also unhidden upon clicking the play button)

 

Then the close button did what i mentioned earlier it flushed out the div tag by filling it with nothing, this cause the content to stop playing and the div was hidden

 

I can paste the code if this is helpful to people? Sorry if i explained this terribly haha

 

The main code:

><script language="JavaScript" type="text/javascript" src="sclickscript.js">
</script>
<form name ="frmsclick">
<center>
<input type="button" value="Play Hi-Fi" name="hifi" onClick="playAudioHi(******)">
<input type="button" value="Play Lo-Fi" name="lofi" onClick="playAudioLo(******)">
<input type="button" value="Stop Audio" name="Stop" onClick="stopAudio(******)">
</form>
</center>

<div id="******" align="center" style="display: none;"></div>

 

the javascript

>/*Music player JS for embedding specific tracks + info. Code by Hygor*/ 

var passVar;

function playAudioHi(passVar){
document.getElementById(passVar).style.display = "";
document.getElementById(passVar).innerHTML ="<iframe style=\"border:0px solid black\" width=500 height=365 "+
"src=\"http://www.******.com/single_player.cfm?songid=" + passVar + "&cache=******&q=hi\"></iframe>";
}

function playAudioLo(passVar){
document.getElementById(passVar).style.display = "";
document.getElementById(passVar).innerHTML ="<iframe style=\"border:0px solid black\" width=500 height=365 "+
"src=\"http://www.******.com/single_player.cfm?songid=" + passVar + "&cache=******&q=lo\"></iframe>";
}

function stopAudio(passVar){
document.getElementById(passVar).style.display = "none";
document.getElementById(passVar).innerHTML =	"";
}

Edited October 5, 2006 by OJB

[TCH-Bruce]

Thanks for they update and glad you found a solution that worked for you.

[TCH-JimE]

Thanks for the update, its always good to learn something new

 

Hopefully this may help other users in the future

 

JimE