if you go to http://fnaa.info/dev/ you will see a bunch of images come up on the left side. Find a video (or sort by videos) and click on the module to open the video. Then Close the video (the x in the top right). and open and close the module again and you will see the bug. Every time you click the module from that point on the video will reload. So when the module is closed the video will still play. Obviously this is not what i want. I really have NO idea why this is happening. So if anybody here could throw any idea's out there that would be great. I'll post all relevant code and just let me know if you need any more info. Thanks!
Javascript that controls the modules.
Code: Select all
$(document).ready(function() {
$(".left").find(".module").each(function(){
//Variables
var info = $(this).find(".info");
var pid = $(this).find(".player").attr("id");
var cid = $(this).find(".hulu").attr("id");
var article = $(this).find(".article");
var control = $(this).find(".hulu");
var close = $(this).find(".close_module");
var text = $(this).find(".text");
var h = $(this).height() - 12;
var module_type = $(this).find(".module_type").html();
//Sets the height of the module and overlay to 200
$(this).height(200);
info.height(200);
//Fades in & out the overlay
$(this).hover(
function(){
info.fadeIn("fast");
control.fadeIn("fast", "swing");
if($('.open').length){
close.fadeIn("fast");
}
},
function(){
info.fadeOut("fast");
control.fadeOut("fast", "swing");
if($('.open').length){
close.fadeOut("fast");
}
}
);
//Module click function
function openModule(){
//Open
$(this).parent().animate({height: h }, 500, "swing");
info.animate({ height: h }, 500, "swing");
//Sets the cursor to default
info.css("cursor", "default");
close.fadeIn("fast");
//Article specific actions
if(article.length){
article.css("overflow", "auto");
article.animate({height: h - 130}, 'slow', 'swing', function(){
article.jScrollPane({showArrows:true});
});
if($.browser.msie){
$(".jScrollPaneContainer").css("height", h - 130);
}
}
//Expand photo and video text
if(text.length){
text.animate({height: h - 137}, 'fast', 'swing');
}
//Removes the "closed" class
$(this).parent().toggleClass("closed");
$(this).parent().toggleClass("open");
//Unbinds the click function when the module is open
info.unbind('click', openModule);
//Video specific actions
if(module_type == "video"){
video(pid, cid);
}
}
info.bind('click', openModule);
//Close module function
function closeModule(){
//Closes the module and info windows
info.animate({ height: 200 }, 500, "swing");
$(this).parent().animate({height: 200 }, 500, "swing");
//Add's the pointer back
info.css("cursor", "pointer");
//Article specific actions
if(article.length){
article.css("overflow", 'hidden');
article.animate({height: 69}, 100, 'swing');
article.jScrollPane({showArrows:false, maintainPosition: false});
if($.browser.msie){
$(".jScrollPaneContainer").css("height", "69px");
}
}
//Retract photo and video text
if(OSName == "Windows" && $.browser.mozilla){
if(text.length){
text.animate({height: 76}, 'fast', 'swing');
}
} else {
if(text.length){
text.animate({height: 69}, 'fast', 'swing');
}
}
//Add's the closed class back
info.parent().toggleClass("closed");
info.parent().toggleClass("open");
//Add's the click function back
info.bind('click', openModule);
//Removes the close button
close.fadeOut("fast");
//Video specific actions
if(module_type == "video"){
$f().unload();
control.empty();
}
}
close.bind("click", closeModule);
});//each
//Video options and controls
function video(pid, cid){
$f(pid, {src: 'lib/swf/flowplayer-3.1.0.swf', wmode: 'transparent'}, {
clip: { autoPlay: true, autoBuffering: true },
plugins: { controls: null },
play: { opacity: 0 }
}).controls(cid, {duration: 0});
$f(pid).play($(this).find(".player").attr("href"));
}
});//ready
And here is the php that displays everything.
Code: Select all
<?php
//Content selectors
if(isset($_GET['year'])):
$year = $_GET['year'];
$stories_sql = mysql_query(" SELECT * FROM $p->page_table WHERE year = '$year' ORDER BY id DESC LIMIT $p->res, $p->per_page");
elseif(isset($_GET['category'])):
$category = $_GET['category'];
if($category == 'Entertainment Management '):
$category = 'Entertainment Management & Production';
elseif($category == "Music "):
$category = 'Music & Jazz';
elseif($category == "Textile Arts "):
$category = 'Textile Arts & Costuming';
endif;
$stories_sql = mysql_query(" SELECT * FROM $p->page_table WHERE category = '$category' ORDER BY id DESC LIMIT $p->res, $p->per_page");
elseif(isset($_GET['type'])):
$type = $_GET['type'];
$stories_sql = mysql_query(" SELECT * FROM $p->page_table WHERE type = '$type' ORDER BY id DESC LIMIT $p->res, $p->per_page");
elseif(isset($_GET['search'])):
$search = $_GET['search'];
require 'search_refine.php';
$stories_sql = mysql_query(" SELECT * FROM $p->page_table WHERE
title LIKE '%$search%' OR
content like '%$search%' OR
category like '%$search%' OR
type like '%$search%' OR
year like '%$search%'
ORDER BY id DESC LIMIT $p->res, $p->per_page");
elseif(isset($_GET['article'])):
$article = $_GET['article'];
$stories_sql = mysql_query(" SELECT * FROM $p->page_table WHERE id = '$article' ORDER BY id DESC LIMIT $p->res, $p->per_page");
else:
$stories_sql = mysql_query(" SELECT * FROM $p->page_table ORDER BY id DESC LIMIT $p->res, $p->per_page");
endif;
//If there are no results, show this message
if(mysql_num_rows($stories_sql) == '0'):
print '<br /><br /><h3 class="error">Currently, there are no stories in this section.</h3>';
print '
<script type="text/javascript">
$(".pagination").hide();
</script>
';
endif;
//The Loop
$i = 0;
while($row = mysql_fetch_assoc($stories_sql)):
extract($row);
//Sets the right color code
if($category == "Entertainment Management & Production"):
$color = 'green';
elseif($category == "Media Arts"):
$color = 'orange';
elseif($category == "Motion Picture Arts"):
$color = 'blue';
elseif($category == "Music & Jazz"):
$color = 'purple';
elseif($category == "Performing Arts"):
$color = 'pink';
elseif($category == "Textile Arts & Costuming"):
$color = 'yellow';
elseif($category == "Visual Arts"):
$color = 'red';
else:
endif;
//Gets the width and height of the main image for javascript
list($width, $height) = getimagesize('../../cms/lib/uploads/image/stories/'.$img);
print '<div class="module closed" id="mod'.$id.'"><a class="close_module">X</a>';
$media_sql = mysql_query(" SELECT * FROM media WHERE story_id = '$id' ORDER BY id DESC ");
$media_row = mysql_fetch_assoc($media_sql);
//If video module
if($type == 'video'):
print'
<div class="module_type" style="display:none;">video</div>
<a href="cms/lib/uploads/media/'.$media_row['file'].'" class="player" id="player'.$i.'">
<img src="cms/lib/uploads/image/stories/'.$img.'" alt="" height="'.$height.'" />
</a>
<div class="info">
<h2>'.$title.'</h2>
<div class="text">
'.$content.'
</div>
<div class="category '.$color.'">'.$category.'</div>
<div class="type">'.$type.'</div>
</div>
<div class="hulu" id="hulu'.$i.'"></div>
</div>
';
//If article module
elseif($type == 'article'):
print '<div class="module_type" style="display:none;">article</div>';
print'<img src="cms/lib/uploads/image/stories/'.$img.'" alt="" height="'.$height.'" />';
if(mysql_num_rows($media_sql) == '1'):
print'<img src="cms/lib/uploads/image/articles/'.$media_row['file'].'" alt="" height="'.$height.'" />';
endif;
print' <div class="info">
<h2>'.$title.'</h2>
<div class="article">
<div>'.$content.'</div>
</div>
<div class="category '.$color.'">'.$category.'</div>
<div class="type">'.$type.'</div>
</div>
</div>
';
//If photo module
elseif($type == 'photo'):
print '<div class="module_type" style="display:none;">photo</div>';
print '<img src="cms/lib/uploads/image/stories/'.$img.'" alt="" height="'.$height.'" />';
while($media_row = mysql_fetch_assoc($media_sql)):
list($width, $height) = getimagesize('../../cms/lib/uploads/image/stories/'.$media_row['file']);
print '<img src="cms/lib/uploads/image/stories/'.$media_row['file'].'" alt="" height="'.$height.'" />';
endwhile;
print'
<div class="info">
<h2>'.$title.'</h2>
<div class="text">
'.$content.'
</div>
<div class="category '.$color.'">'.$category.'</div>
<div class="type">'.$type.'</div>
</div>
</div>
';
endif;
$i++;
endwhile;
?>