www.webdeveloper.com
Results 1 to 2 of 2

Thread: problem with background color when animating div z-index and opacity

  1. #1
    Join Date
    Nov 2012
    Posts
    1

    problem with background color when animating div z-index and opacity

    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:

    Code:
    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 :

    Code:
    #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 :




    Code:
    <?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

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    In what browser does this happen for you? It looks fine for me in Chrome, Firefox and IE.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles