Anyone know why when I click the #stopbar the #player doesn’t disapear? I can click the .thumb and get the #player to show up, but getting it to go away doesn’t work.
Here’s a link to it in action: http://neroedge.shiftarch.com/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>NeroEdge</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ids = new Array("U61s9-SzrtQ","Volvo","BMW");
var photoNum = 0;
var maxPhotos = 4;
var maxDisplay = 4; //must be able to /2
function getTempVar(i){
var temp = i;
if(temp < 0) temp += maxPhotos;
if(temp >= maxPhotos) temp -= maxPhotos;
return temp;
}
function getGallery(){
$("#gallery").empty();
var temp = photoNum - (maxDisplay/2);
for(var i = 0; i < maxDisplay; i += 1){
temp += 1;
var v = getTempVar(temp);
$("#gallery").append("<img class=\"thumb\" src=\"/images/gallery/thumb/"+v+".png\" alt=\""+ids[v]+"\" />");
}
}
getGallery();
$("#leftbutton").click(function(){
photoNum -= 1;
if(photoNum < 0) photoNum = maxPhotos - 1;
getGallery();
});
$("#rightbutton").click(function(){
photoNum += 1;
if(photoNum >= maxPhotos) photoNum = 0;
getGallery();
});
$(".thumb").click(function(){
$("#player").css("display","block");
$("#player").css("position","absolute");
$("#player").css("top", (($(window).height()/2) - 240) + $(window).scrollTop() + "px");
$("#player").css("left", (($(window).width()/2) - 360) + $(window).scrollLeft() + "px");
$("#player").html("<div id=\"stopbar\">Press this to close video</div><iframe width=\"640\" height=\"480\" src=\"http://www.youtube.com/embed/"+$(this).attr("alt")+"\" frameborder=\"0\" allowfullscreen></iframe>");
});
$("#stopbar").click(function(){
$("#player").css("display","none");
$("#player").css("position","absolute");
$("#player").css("top", "0px");
$("#player").css("left", "0px");
$("#player").html("<div id=\"stopbar\">Press this to close video</div>");
});
});
</script>
</head>
<body>
<div id="player">
<div id="stopbar">Press this to close video</div>
</div>
<div id="wrap">
<div id="banner">
<img src="images/banner.png" alt="NeroEdge" />
</div>
<div id="main">
<div id="navibar">
<div id="title">NeroEdge - By William Starkovich</div>
<div id="tester">Become a Tester</div>
</div>
<br />
<div id="bigcolumn">
<div id="gallerywrap">
<a href="#" id="leftbutton"><img id="lbutton" src="/images/gallery/left.png" alt="Left Button" /></a>
<div id="gallery">Gallery not loaded.</div>
<a href="#" id="rightbutton"><img id="rbutton" src="/images/gallery/right.png" alt="Right Button" /></a>
</div>
<br />
<br />
<br />
<br />
<hr style="width: 80%; color: #00ffff;"/>
You can use
.live()instead of.click()on the#stopbar. You add the html for the#stopbarafter the page has rendered, which is why it won’t work.