progress bar and draggable playhead seemingly not working Created Nov 3, 2009

Hello,

After tweaking the layout of the controllbar through the css, I noticed that my progress bar and playhead aren't functioning. I think this might have to do with the face that I changed some of those elements position (i.e. changing from left: number, to right: number)?

Here is a live example (please ignore the rest of the page, as well as the temporary links to other videos)http://pomona.edu/dev/home/index-8.asp

Could anyone point me in a direction that would get these working again? Here is the html and script content. Thanks.

<a href="md.f4v" style="display:block;width:622px;height:350px;padding:0;margin:0;" id="fPlayer">
<img src="/dev/images/internal/home/spock.jpg" alt="Splash image for player" />
</a>

<div id="fCContainer" style="display:none;" class="fc"></div>

<div class="fPClips explorations">
<a href="/" class="first">first video</a>
<a href="/">second video</a>
<a href="/">third video</a></div>

<script>window.onload = function() { $f("fPlayer", "flowplayer.commercial-3.1.5.swf", { key: '#$8ac3e001c7b14853256' , plugins: {controls: null}, clip: {scaling: "fit"} }).controls("fCContainer", {duration: 25}).playlist("div.fPClips", {loop:true}); }; $('#fPlayer').parent().hover( function() { $('#fCContainer').fadeIn(200); }, function() { $('#fCContainer').fadeOut(200); });
</script>

As well as my CSS:

/* -------- flash controls -------- */
/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */
div.fc {
	position:relative;
	height:32px;
	margin: -42px 10px 0 10px;
	/* black background with a gradient */
	width:602px;
	-moz-border-radius: 5px;
	z-index: 150;}

/* play/pause button */
div.fc a.play, div.fc a.pause { 
	position:absolute;
	width: 32px;
	height: 32px;
	display:block;
	text-indent:-9999em;
	background:url(fp-bg.png) no-repeat 0 0;
	cursor:pointer;
	margin-right: 1px; 
	z-index: 100;}

div.fc a.play:hover {
	background-position: -32px 0;	
}

/* pause state */
div.fc a.pause { 
	background-position: -64px 0;
}

div.fc a.pause:hover {
	background-position: -96px 0;	
}

/* the timeline (or "scrubber")  */
div.fc div.track {  
	left:32px;
	position:absolute;
	cursor:pointer;
	background: #7f7f7e;
	filter: alpha(opacity=70);
	opacity:0.7;
	right: 134px;
	margin-left:1px;
	height:32px;	
	}

/* the draggable playhead */
div.fc div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#4ff;
	opacity:0.3;
	filter: alpha(opacity=30);	
	width:3px;
	height:32px;
	border-right:1px solid #444;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.fc div.progress, div.fc div.buffer {	
	position:absolute;
	background-color:red;
	filter: alpha(opacity=10);
	opacity:0.1;
	width:0px;
	height:32px;
}

div.fc div.buffer {
	background-color:#fff;
	opacity:0.1;
	filter: alpha(opacity=10);
}

/* time display */
div.fc div.time {
	position:absolute;		
	width:100px;
	right:33px;
	height: 32px;
	line-height: 32px;
	text-align:center;
	background: url(fp-bg.png) -128px 0;
	/* font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial; */	
	font-size: 75%;
	color:#d9dbd9; 
}

/* total duration in time display */
div.fc div.time strong {
	font-weight:normal;
	color:#303030;
}

/* mute / unmute buttons */
div.fc a.mute, div.fc a.unmute {
	position:absolute;
	right:0;
	width:32px;
	height:32px;
	text-align:center;
	line-height: 32px;
	cursor:pointer;
	text-indent:-9999em;
	background: green;
}

div.fc a.mute:hover {
	background-position:5px -367px;	
}

/* unmute state */
div.fc a.unmute {
	background-position:5px -235px;	
}

div.fc a.unmute:hover {
	background-position:5px -279px;	
}