Javascript-форум - Slide panel с аудиоплеером

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Slide panel с аудиоплеером (https://javascript.ru/forum/jquery/29949-slide-panel-s-audiopleerom.html)

Slide panel с аудиоплеером

Пытаюсь сделать слайд-панель с аудиоплеером, но при закрытии панели плеер тоже прекращает работу. Возможно ли сделать так, чтобы он продолжал работать и при скрытой панели?

Код в студию!

Вот код:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Slide Panel</title>



<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

<script type="text/javascript" src="http://poddon-prof.ru/_swf/swfobject.js"></script>

<script type="text/javascript">

$(document).ready(function(){



        $(".btn-slide").click(function(){

                $("#panel").slideToggle("slow");

                $(this).toggleClass("active"); return false;

        });

        

         

});

</script>



<style type="text/css">

body {

        margin: 0 auto;

        padding: 0;

        width: 570px;

        font: 75%/120% Arial, Helvetica, sans-serif;

}

a:focus {

        outline: none;

}

#panel {

        background: #000000;

        text-align: center;

        padding: 30px 30px 30px 30px; 

        display: none;

}

.slide {

        margin: 0;

        padding: 0;

        border-top: solid 4px #422410;

        background: #754c24;

}

.btn-slide {

        background: #754c24;

        text-align: center;

        width: 144px;

        height: 31px;

        padding: 10px 10px 0 0;

        margin: 0 auto;

        display: block;

        font: bold 120%/100% Arial, Helvetica, sans-serif;

        color: #fff;

        text-decoration: none;

}

.active {

        background-position: right 12px;

}

</style>

</head>



<body>



<div id="panel">

    <div id="audioplayer529"></div><script type="text/javascript">var flashvars = {"st":"http://poddon-prof.ru/_swf/audio13-947.txt","pl":"http://poddon-prof.ru/_swf/playlist_audio13-529.txt"};var params = {bgcolor:"#000000",  allowScriptAccess:"always",id:"audioplayer529"}; new swfobject.embedSWF("http://poddon-prof.ru/_swf/uppod.swf", "audioplayer529", "329", "103", "9.0.115.0", false, flashvars, params);</script>

</div>



<p class="slide"><a href="#" class="btn-slide">Плеер</a></p>



</body>

</html>

Ну тут просто toggle - делает display:none - т.е. "удаляет" элемент со страницы, а значит и плеер каждый раз инициализируется заново. Если будешь делать не display: none, а например height:0px + overflow:hidden, то плеер останется играть.

Спасибо, но почему-то не работает (

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slide Panel</title>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="http://poddon-prof.ru/_swf/swfobject.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$(".btn-slide").click(function(){
		$(this).toggleClass("active");
		if($(this).hasClass("active")){$("#panel").animate({"margin-top": "0px"}, "slow");
		} else {$("#panel").animate({"margin-top": "-165px"}, "slow");}
	  return false;
	});
	
	 
});
</script>

<style type="text/css">
body {
	margin: 0 auto;
	padding: 0;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
	outline: none;
}
#panel {
	background: #000000;
	margin-top:-165px;
	text-align: center;
	padding:30px; 

}
.slide {
	margin: 0;
	padding: 0;
	border-top: solid 4px #422410;
	background: #754c24;
}
.btn-slide {
	background: #754c24;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
.active {
	background-position: right 12px;
}
</style>
</head>

<body>

<div id="panel">
    <div id="audioplayer529">><script type="text/javascript">var flashvars = {"st":"http://poddon-prof.ru/_swf/audio13-947.txt","pl":"http://poddon-prof.ru/_swf/playlist_audio13-529.txt"};var params = {bgcolor:"#000000",  allowScriptAccess:"always",id:"audioplayer529"}; new swfobject.embedSWF("http://poddon-prof.ru/_swf/uppod.swf", "audioplayer529", "329", "103", "9.0.115.0", false, flashvars, params);</script>
</div></div>

<p class="slide"><a href="#" class="btn-slide">Плеер</a></p>

</body>
</html>

Спасибо, всё работает! Супер )