Hi,
I am having a few issues with a site at the moment which is at www.thecellists.co.uk
The problem is that when you click the small video icon at the bottom right of the home page, it is supposed to seamlessly fade in a div holding the video (which it does do some of the time). Sometimes the background of the body tag goes a strange pattern of white and the original color, but I cant see why its only happening some of the time.
I have taken a screenshot for you to see and put it up at www.thecellists.co.uk/bgproblem.png
the Javascript is:
function bigvideohome() //brings video to the front and makes it visible
{
$('#container').animate({opacity:'.2'}, {duration:500});
setTimeout(function(){$('#container').css("z-index","-1")},500);
setTimeout(function(){$('#bigvideodiv').css("z-index","1")},500);
setTimeout(function(){$('#bigvideodiv').animate({opacity:'1'}, {duration:500})},500);
}
function exitvideo() {
var video = document.getElementById("homevideo");
if(video.paused == true){
$('#bigvideodiv').animate({opacity:'0'}, {duration:500});
setTimeout(function(){$('#bigvideodiv').css("z-index","-1")},500);
setTimeout(function(){$('#container').css("z-index","1")},500);
setTimeout(function(){$('#container').animate({opacity:'1'}, {duration:500})},500);
}
else{
video.pause();
video.currentTime = 0;
$('#bigvideodiv').animate({opacity:'0'}, {duration:500});
setTimeout(function(){$('#bigvideodiv').css("z-index","-1")},500);
setTimeout(function(){$('#container').css("z-index","1")},500);
setTimeout(function(){$('#container').animate({opacity:'1'}, {duration:500})},500);
}
}
the CSS relevant is :
#bigvideodiv {
position:absolute;
width:862px;
height:490px;
left:50%;
top:100px;
margin-left:-432px;
opacity:0;
border-style:solid;
border-width:1px;
border-color:#FFFFFF;
z-index:-1;
}
#homevideo {
position:relative;
left:5px;
top:5px;
z-index:5;
}
#exitbigvideo {
position:absolute;
left:50%;
margin-left:-30px;
top:-25px;
z-index:10;
}
and the html relevant is :
<?php
include("includes/checkos.php")
?>
<!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>The Cellists - Music for Weddings, Corporate Events and Functions</title>
<!--attached files-->
<?php
include("includes/attachedfiles.html")
?>
<?php
include("includes/connect.php")
?>
</head>
<body>
<!--Container Div--> <!--All elements except the big video are held inside this-->
<div id="container">
<!--Header Div-->
<?php
include("includes/header.html")
?>
<!--Nav Div-->
<?php
include("includes/nav/navhome.html")
?>
<!--Content Space Div-->
<div id="contentspace">
<!--EDITABLE REGION START-->
<img src="images/homeimage.png" id="homeimage" border="0" />
<div id="hometext">
<!--get variable containing content from the database-->
<?php
if(!$cxn)
{
die("couldnt connect to the database");
}
else
{
//concerts
$query = "SELECT * FROM home";
$result = mysqli_query($cxn,$query) or die("cant connect");
$row = mysqli_fetch_assoc($result);
$content = $row['content'];
echo nl2br("$content");
}
?>
</div>
<a href="#" onclick="bigvideohome();"><img src="images/videopic.png" id="videopic" border="0" /></a>
<!--EDITABLE REGION END-->
</div>
<!--Footer Div-->
<?php
include("includes/footer.html")
?>
<!--replist view and download Div-->
<?php
include("includes/replist.html")
?>
<!--Close container div-->
</div>
<!--create div that holds the hidden big video outside of the container-->
<div id="bigvideodiv">
<!--replacement image
<img id="videoreplacement" src="images/videoreplacement.jpg" border="0" height="619" width="1100" />
-->
<a href="#" onclick="exitvideo();"><img id="exitbigvideo" src="images/exitbigvideo.png" border="0" height="60" width="60" /></a>
<video id='homevideo' controls poster='video/home.jpg' width='852' height='480' title='the cellists'>
<source src='video/home.mp4' type='video/mp4'/>
<source src='video/home.webm' type='video/webm'/>
<source src='video/home.ogv' type='video/ogg'/>
</video>
</div>
</body>
</html>
Thanks for any help you can give
Fraser
