displaying a series of youtube embeds that can be hidden/displayed
My goal is to show a series of embedded youtube videos on one page but allowing the user to hide or show any youtube video by clicking a button associated with a specific youtube video on the page. I made a form that submits the youtube embed code to a mysql database and I created a php file to retrieve every embed code using a for loop. For each iteration of the for loop, a youtube video will pop up with a corresponding button which will allow the user to hide or show the youtube video.
It works when there is only one entry in the mysql table but does not work when more youtube embed codes are uploaded. For example, when there are two youtube embed codes uploaded, two buttons are created, but when I click either of the two buttons, it will only show or hide the first youtube embed. None of the buttons will show the second youtube video.
here is the code with some edits:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<t开发者_如何学运维itle>hide/show iframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<style type="text/css">
<!--
#frDocViewer {
width:70%;
height:50%;
display:none;
}
-->
</style>
<script type="text/javascript">
<!--
function HideFrame() {
var fr = document.getElementById ("frDocViewer");
if(fr.style.display=="block") {
fr.style.display="none";
} else {
fr.style.display="block";
}
}
//-->
</script>
</head>
<body>
<?php
mysql_connect ("","","") or die(mysql_error());
mysql_select_db ("") or die(mysql_error());
$lastid = mysql_query ("SELECT * FROM embed ORDER BY id DESC LIMIT 1");
$lastid = mysql_fetch_assoc($lastid);
$lastid = $lastid['id'];
for ($count=1; $count<= $lastid ; $count++) {
$iframe = mysql_query ("SELECT * FROM embed WHERE id=$count ");
$iframe = mysql_fetch_assoc($iframe);
$iframe = $iframe['url'];
echo "
<image src='utube.gif' onclick='HideFrame()' />
<div id='frDocViewer'>
$iframe
</div>
";
}
?>
</body>
</html>
Because each div has the same ID. You need to create unique ID's for each DIV to show or hide ie. frDocViewer1, frDocViewer2 etc
Use your $count variable to echo it's value onto the ID as it will increment by 1 for each iteration of the loop.
echo "
<image src='utube.gif' onclick='HideFrame()' />
<div id='frDocViewer_{$count}'>
$iframe
</div>
";
Then you just need to make sure that you have corresponding Javascript for each of those DIV's. I would send the id into the javascript function using your onclick tag.
for ($count=1; $count<= $lastid ; $count++) {
$iframe = mysql_query ("SELECT * FROM embed WHERE id=$count ");
$iframe = mysql_fetch_assoc($iframe);
$iframe = $iframe['url'];
echo "
<image src='utube.gif' onclick='HideFrame({$count})' />
<div id='frDocViewer_{$count}' class='frDocViewer'>
$iframe
</div>
";
}
And then have the javascript code as something like:
var old_element = null;
function HideFrame(id) {
var fr = document.getElementById("frDocViewer_" + id);
if(fr != old_element)
{
fr.style.display = "block"
if(old_element != null) old_element.style.display = "hide";
old_element = fr;
}
}
Then finally you need to change your CSS to make frDocViewer a class rather than a unique style. Notice above in the PHP echo string I added in the new class attribute to the DIV
<style type="text/css">
.frDocViewer {
width:70%;
height:50%;
display:none;
}
</style>
PS: This code might not actually compile, it's just a rough guide.
I think the problem is with this line:
<div id='frDocViewer'>
IDs are supposed to be unique across the entire page, but you're creating a new element with the same ID on each iteration of your loop. I haven't tested this, but my assumption is that when your JavaScript executes to hide/show that ID, it's only picking up the first ID by that name that it finds.
You'll need to change your code to give a unique ID to each iteration, and pass a reference to that element when you call your HideFrame() function. The function can then operate on that specific ID.
hmm...where to start....
if you getElementById where your id is frDocViewer AND frDocViewer is used by every video there will be problems.
how about something like
<div onclick='HideFrame(this)' >
<image src='utube.gif'/>
....
</div>
function HideFrame(el) {
...
}
Not at all tested, but you NEED to go for something more GENERIC then hard coding an id....in my opinion
加载中,请稍侯......
精彩评论