Форум

pavas · #1 (**permalink**) 18.07.2012, 15:44

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

zlodeeev · #2 (**permalink**) 18.07.2012, 15:47

Код в студию!

pavas · #3 (**permalink**) 18.07.2012, 16:25

Вот код:

Код:

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

zlodeeev · #4 (**permalink**) 18.07.2012, 16:34

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

pavas · #5 (**permalink**) 18.07.2012, 17:05

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

Deff · #6 (**permalink**) 18.07.2012, 18:07

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

pavas · #7 (**permalink**) 18.07.2012, 18:22

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

Форум

Справочник

Discord чат

Курсы javascript