Hey all,
I've got this issue where I can't get the JW player to behave properly when it's placed within an absolutely positioned <div>. I'm using a background that I designed and sliced in photoshop, and when I try to embed the player in a slice that I designated for it, all hell breaks loose. The player doesn't conform to the width and height parameters that have been set, and it doesn't even get placed in the right <div>. Here's my code, it worked before over a static background with relatively positioned elements, which is why I'm at a loss here:
<html>
<head>
</head>
<style>
<!--
html, body{
height:100%;
color:#dbaa70;
font-family: Verdana;
font-size: 13.3px;
font-weight:bold;
}
#webmdeeLogo{
position:absolute;
left:0px;
top:0px;
}
#part2 {
position:absolute;
left:243px;
top:0px;
background:url(images/sikhpod/b_02.jpg);
width:189px;
height:254px;
}
#sikhpodLogo{
position:absolute;
top:0px;
left:432px;
}
#part4{
position:absolute;
width:330px;
height:254px;
top:0px;
left:770px;
background:url(images/sikhpod/b_04.jpg);
}
#part5{
position:absolute;
top:125px;
left:432px;
width:338px;
height:129px;
background:url(images/sikhpod/b_05.jpg);
}
#part6{
position:absolute;
top:254px;
left:0px;
width:360px;
height:92px;
background:url(images/sikhpod/b_06.jpg);
}
#songTitle{
position:absolute;
top:254px;
left:360px;
width:486px;
height:92px;
background:url(images/sikhpod/b_07.jpg);
}
#part8{
position:absolute;
top:254px;
left:846px;
width:254px;
height:92px;
background:url(images/sikhpod/b_08.jpg);
}
#part9{
position:absolute;
top:346px;
left:0px;
width:360px;
height:754px;
background:url(images/sikhpod/b_09.jpg);
}
#player{
position:absolute;
top:346px;
left:360px;
width:740px;
height:470px;
background:url(images/sikhpod/b_10.jpg);
}
#part11{
position:absolute;
top:816px;
left:360px;
width:486px;
height:284px;
background:url(images/sikhpod/b_11.jpg);
}
#part12{
position:absolute;
top:816px;
left:846px;
width:254px;
height:284px;
background:url(images/sikhpod/b_12.jpg);
}
#outside_container {
position:absolute;
top:0px;
left:0px;
background:url(background_slice.jpg) repeat-x #000000;
}
#nowPlaying{
color:#dbaa70;
font-family: Verdana;
font-weight:bold;
font-size:32px;
text-align:center;
}
#wrapper {
width:600px;
height:300px;
overflow:hidden;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars =
{
//'skin': 'snel.swf',
'id': 'player',
'file': '<?php echo "Users/$user/";?>playlist.xml',
'playlistsize': '300',
'playlist': 'right',
'autostart': 'true',
'repeat': 'list',
'playlist.thumbs': 'false',
'stretching': 'uniform',
'controlbar': 'over'
};
var params =
{
'wmode': 'opaque',
'allowfullscreen': 'true',
'allowscriptaccess': 'always'
};
var attributes =
{
'id': 'player',
'name': 'player'
};
swfobject.embedSWF("player.swf", "playerDiv", "600", "300", "9.0.124", false, flashvars, params, attributes);
</script>
<script type="text/javascript">
var player = null;
var playlist = null;
var originalPlaylist = null;
var restart = null;
function playerReady(obj)
{
player = gid(obj.id);
originalPlaylist = player.getPlaylist();
displayFirstItem();
};
function init() {
//Window resizing issues
var browserH = document.body.clientHeight;
document.getElementById('outside_container').style.width = document.body.clientWidth+"px";
if (browserH < 1100)
document.getElementById('outside_container').style.height = "1100px";
else
document.getElementById('outside_container').style.height = browserH + "px";
}
function showlist(theWidth) {
document.getElementById("wrapper").style.width=theWidth+"px";
};
function displayFirstItem()
{
try
{
playlist = player.getPlaylist();
}
catch(e)
{
setTimeout("displayFirstItem()", 1000);
}
player.addModelListener('STATE', 'stateMonitor');
player.addControllerListener('ITEM', 'itemMonitor');
player.addViewListener('LINK', 'linkClicked');
itemMonitor({index:player.getConfig()['item']});
};
function stateMonitor(obj)
{
if((obj.newstate == 'PAUSED') && (restart))
{
restart = false;
player.sendEvent('PLAY', 'true');
}
};
function itemMonitor(obj)
{
gid('nowPlaying').innerHTML = 'Now Playing: <span>' + player.getPlaylist()[obj.index].title + '</span>';
};
function gid(name)
{
return document.getElementById(name);
};
function setToPlay() {
gid('player').sendEvent('PLAY', 'true');
}
function linkClicked(obj) {
restart = true;
}
</script>
<body onload="init()">
<div id="outside_container">
<div id="webmdeeLogo">
<a href="http://www.webmdee.com/"><img src="images/sikhpod/b_01.jpg" border="0"/></a>
</div>
<div id="part2">
</div>
<div id="sikhpodLogo">
<a href="http://www.webmdee.com/sikhpod/generator.html"><img src="images/sikhpod/b_03.jpg" border="0"/></a>
</div>
<div id="part4">
</div>
<div id="part5">
</div>
<div id="part6">
</div>
<div id="songTitle">
<div id="nowPlaying">
</div>
</div>
<div id="part8">
</div>
<div id="part9">
</div>
<div id="player">
<div id='wrapper'>
<div id="playerDiv">
</div>
</div>
<div id="part11">
</div>
<div id="part12">
</div>
</div>
</body>
</html>
Can anybody help me out with this? I'm stuck.
Thanks,
Mark
You have to set the z-index in your CSS. The player should be on a higher z-index than the background.