...

View Full Version : Dynamically create ID for table-rows



aaronhockey_09
01-25-2012, 10:37 PM
Hi there, so i am working on a website, and on it there is a video with youtube api.

I need to hide all Table-rows that are not during each 5 second time frame.
So for example, when it is at 0:36, it will hide all TR's besides the TR that has to do with the video between 0:35 and 0:40.

Each TR displays a start time, content, and end time.

Here is what the tables currently look like.

<table width="600" class="table" >
<tr class="item-titles">
<td width="75" class="none">Start</td>
<td width="400">Caption</td>
<td width="75">End</td>
</tr>



<tr>
<td class="none"><a href="javascript:player.seekTo(0, false)">0</a></td>
<td><a href="javascript:player.seekTo(0, false)"></a></td>
<td><a href="javascript:player.seekTo(5, false)">5</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(5, false)">5</a></td>
<td><a href="javascript:player.seekTo(5, false)"></a></td>
<td><a href="javascript:player.seekTo(10, false)">10</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(10, false)">10</a></td>
<td><a href="javascript:player.seekTo(10, false)"></a></td>
<td><a href="javascript:player.seekTo(15, false)">15</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(15, false)">15</a></td>
<td><a href="javascript:player.seekTo(15, false)"></a></td>
<td><a href="javascript:player.seekTo(20, false)">20</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(20, false)">20</a></td>
<td><a href="javascript:player.seekTo(20, false)"></a></td>
<td><a href="javascript:player.seekTo(25, false)">25</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(25, false)">25</a></td>
<td><a href="javascript:player.seekTo(25, false)"></a></td>
<td><a href="javascript:player.seekTo(30, false)">30</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(30, false)">30</a></td>
<td><a href="javascript:player.seekTo(30, false)"></a></td>
<td><a href="javascript:player.seekTo(35, false)">35</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(35, false)">35</a></td>
<td><a href="javascript:player.seekTo(35, false)"></a></td>
<td><a href="javascript:player.seekTo(40, false)">40</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(40, false)">40</a></td>
<td><a href="javascript:player.seekTo(40, false)"></a></td>
<td><a href="javascript:player.seekTo(45, false)">45</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(45, false)">45</a></td>
<td><a href="javascript:player.seekTo(45, false)"></a></td>
<td><a href="javascript:player.seekTo(50, false)">50</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(50, false)">50</a></td>
<td><a href="javascript:player.seekTo(50, false)"></a></td>
<td><a href="javascript:player.seekTo(55, false)">55</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(55, false)">55</a></td>
<td><a href="javascript:player.seekTo(55, false)"></a></td>
<td><a href="javascript:player.seekTo(60, false)">60</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(60, false)">60</a></td>
<td><a href="javascript:player.seekTo(60, false)"></a></td>
<td><a href="javascript:player.seekTo(65, false)">65</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(65, false)">65</a></td>
<td><a href="javascript:player.seekTo(65, false)"></a></td>
<td><a href="javascript:player.seekTo(70, false)">70</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(70, false)">70</a></td>
<td><a href="javascript:player.seekTo(70, false)"></a></td>
<td><a href="javascript:player.seekTo(75, false)">75</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(75, false)">75</a></td>
<td><a href="javascript:player.seekTo(75, false)"></a></td>
<td><a href="javascript:player.seekTo(80, false)">80</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(80, false)">80</a></td>
<td><a href="javascript:player.seekTo(80, false)"></a></td>
<td><a href="javascript:player.seekTo(85, false)">85</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(85, false)">85</a></td>
<td><a href="javascript:player.seekTo(85, false)"></a></td>
<td><a href="javascript:player.seekTo(90, false)">90</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(90, false)">90</a></td>
<td><a href="javascript:player.seekTo(90, false)"></a></td>
<td><a href="javascript:player.seekTo(95, false)">95</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(95, false)">95</a></td>
<td><a href="javascript:player.seekTo(95, false)"></a></td>
<td><a href="javascript:player.seekTo(100, false)">100</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(100, false)">100</a></td>
<td><a href="javascript:player.seekTo(100, false)"></a></td>
<td><a href="javascript:player.seekTo(105, false)">105</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(105, false)">105</a></td>
<td><a href="javascript:player.seekTo(105, false)"></a></td>
<td><a href="javascript:player.seekTo(110, false)">110</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(110, false)">110</a></td>
<td><a href="javascript:player.seekTo(110, false)"></a></td>
<td><a href="javascript:player.seekTo(115, false)">115</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(115, false)">115</a></td>
<td><a href="javascript:player.seekTo(115, false)"></a></td>
<td><a href="javascript:player.seekTo(120, false)">120</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(120, false)">120</a></td>
<td><a href="javascript:player.seekTo(120, false)"></a></td>
<td><a href="javascript:player.seekTo(125, false)">125</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(125, false)">125</a></td>
<td><a href="javascript:player.seekTo(125, false)"></a></td>
<td><a href="javascript:player.seekTo(130, false)">130</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(130, false)">130</a></td>
<td><a href="javascript:player.seekTo(130, false)"></a></td>
<td><a href="javascript:player.seekTo(135, false)">135</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(135, false)">135</a></td>
<td><a href="javascript:player.seekTo(135, false)"></a></td>
<td><a href="javascript:player.seekTo(140, false)">140</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(140, false)">140</a></td>
<td><a href="javascript:player.seekTo(140, false)"></a></td>
<td><a href="javascript:player.seekTo(145, false)">145</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(145, false)">145</a></td>
<td><a href="javascript:player.seekTo(145, false)"></a></td>
<td><a href="javascript:player.seekTo(150, false)">150</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(150, false)">150</a></td>
<td><a href="javascript:player.seekTo(150, false)"></a></td>
<td><a href="javascript:player.seekTo(155, false)">155</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(155, false)">155</a></td>
<td><a href="javascript:player.seekTo(155, false)"></a></td>
<td><a href="javascript:player.seekTo(160, false)">160</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(160, false)">160</a></td>
<td><a href="javascript:player.seekTo(160, false)"></a></td>
<td><a href="javascript:player.seekTo(165, false)">165</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(165, false)">165</a></td>
<td><a href="javascript:player.seekTo(165, false)"></a></td>
<td><a href="javascript:player.seekTo(170, false)">170</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(170, false)">170</a></td>
<td><a href="javascript:player.seekTo(170, false)"></a></td>
<td><a href="javascript:player.seekTo(175, false)">175</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(175, false)">175</a></td>
<td><a href="javascript:player.seekTo(175, false)"></a></td>
<td><a href="javascript:player.seekTo(180, false)">180</td>
</tr>



<tr>
<td class="none"><a href="javascript:player.seekTo(180, false)">180</a></td>
<td><a href="javascript:player.seekTo(180, false)"></a></td>
<td><a href="javascript:player.seekTo(185, false)">185</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(185, false)">185</a></td>
<td><a href="javascript:player.seekTo(185, false)"></a></td>
<td><a href="javascript:player.seekTo(190, false)">190</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(190, false)">190</a></td>
<td><a href="javascript:player.seekTo(190, false)"></a></td>
<td><a href="javascript:player.seekTo(195, false)">195</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(195, false)">195</a></td>
<td><a href="javascript:player.seekTo(195, false)"></a></td>
<td><a href="javascript:player.seekTo(200, false)">200</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(200, false)">200</a></td>
<td><a href="javascript:player.seekTo(200, false)"></a></td>
<td><a href="javascript:player.seekTo(205, false)">205</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(205, false)">205</a></td>
<td><a href="javascript:player.seekTo(205, false)"></a></td>
<td><a href="javascript:player.seekTo(210, false)">210</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(210, false)">210</a></td>
<td><a href="javascript:player.seekTo(210, false)"></a></td>
<td><a href="javascript:player.seekTo(215, false)">215</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(215, false)">215</a></td>
<td><a href="javascript:player.seekTo(215, false)"></a></td>
<td><a href="javascript:player.seekTo(220, false)">220</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(220, false)">220</a></td>
<td><a href="javascript:player.seekTo(220, false)"></a></td>
<td><a href="javascript:player.seekTo(225, false)">225</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(225, false)">225</a></td>
<td><a href="javascript:player.seekTo(225, false)"></a></td>
<td><a href="javascript:player.seekTo(230, false)">230</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(230, false)">230</a></td>
<td><a href="javascript:player.seekTo(230, false)"></a></td>
<td><a href="javascript:player.seekTo(235, false)">235</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(235, false)">235</a></td>
<td><a href="javascript:player.seekTo(235, false)"></a></td>
<td><a href="javascript:player.seekTo(240, false)">240</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(240, false)">240</a></td>
<td><a href="javascript:player.seekTo(240, false)"></a></td>
<td><a href="javascript:player.seekTo(245, false)">245</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(245, false)">245</a></td>
<td><a href="javascript:player.seekTo(245, false)"></a></td>
<td><a href="javascript:player.seekTo(250, false)">250</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(250, false)">250</a></td>
<td><a href="javascript:player.seekTo(250, false)"></a></td>
<td><a href="javascript:player.seekTo(255, false)">255</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(255, false)">255</a></td>
<td><a href="javascript:player.seekTo(255, false)"></a></td>
<td><a href="javascript:player.seekTo(260, false)">260</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(260, false)">260</a></td>
<td><a href="javascript:player.seekTo(260, false)"></a></td>
<td><a href="javascript:player.seekTo(265, false)">265</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(265, false)">265</a></td>
<td><a href="javascript:player.seekTo(265, false)"></a></td>
<td><a href="javascript:player.seekTo(270, false)">270</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(270, false)">270</a></td>
<td><a href="javascript:player.seekTo(270, false)"></a></td>
<td><a href="javascript:player.seekTo(275, false)">275</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(275, false)">275</a></td>
<td><a href="javascript:player.seekTo(275, false)"></a></td>
<td><a href="javascript:player.seekTo(280, false)">280</td>
</tr>

<tr>
<td class="none"><a href="javascript:player.seekTo(280, false)">280</a></td>
<td><a href="javascript:player.seekTo(280, false)"></a></td>
<td><a href="javascript:player.seekTo(285, false)">285</td>
</tr>


</table>

And you can see the page at

http://134.117.226.43:8000/check_subs/Carleton_University/test101/91/

any help ?

xelawho
01-26-2012, 03:17 AM
just a couple of changes :D

around line 122 of your original code, add these variables and change your existing functions like this:



var oldtime;
var int;

function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PAUSED) {
stopped(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.PLAYING) {
rollover(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.ENDED) {
clearInterval(int)
}

}



function stopped(cur_time) {
alert('Inside stopped() ' + cur_time);
var i=0;
var t_start = document.getElementById('starttime');
var cont = document.getElementById('content');
var t_end = document.getElementById('endtime');
clearInterval(int)
}

function rollover(cur_time) {
int=setInterval(timer,100)
alert('Inside rollover() ' + all_chunklets_text[1]);
}


then right at the bottom of your body section, add this:



<script>
rows=document.getElementById("mytable").getElementsByTagName("tr")
for ( x = 2; x < rows.length; x++ ){
rows[x].style.display="none"
}

function timer() {
time=parseInt(player.getCurrentTime())
if (time%5==0&&oldtime!=time){
rows[1].innerHTML=rows[(time/5)+1].innerHTML
oldtime=time
}
}
</script>


I think that's it - let me know if something goes pear-shaped

Old Pedant
01-26-2012, 04:01 AM
- let me know if something goes pear-shaped

Hmmmm....like my body?

aaronhockey_09
01-26-2012, 05:38 AM
Hello, and thank you for the reply.
I added your code and added the id to my table.
And it seems like its working, except for one thing.
The video seems to be hidden.

xelawho
01-26-2012, 12:11 PM
yes, it seems that you have deleted your onPlayerReady function. That entire first script block should look like this:



<script>
//Load player api asynchronously. Inspired by http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '215',
width: '300',
videoId: '0L_iOnLNt9M',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
player.seekTo(0, false)
player.pauseVideo();
}

var oldtime;
var int;

function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PAUSED) {
stopped(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.PLAYING) {
rollover(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.ENDED) {
clearInterval(int)
}
}

function stopped(cur_time) {
alert('Inside stopped() ' + cur_time);
var i=0;
var t_start = document.getElementById('starttime');
var cont = document.getElementById('content');
var t_end = document.getElementById('endtime');
clearInterval(int)
}

function rollover(cur_time) {
int=setInterval(timer,100)
alert('Inside rollover() ' + all_chunklets_text[1]);
}

</script>

also it occurs to me that if you change your timer function to:


function timer() {
time=parseInt(player.getCurrentTime()/5)
if (oldtime!=time){
rows[1].innerHTML=rows[time+1].innerHTML
oldtime=time
}
}


it will update the row to display instantly (or close enough) if someone drags the slider, instead of waiting for the 5 second mark to tick over, like the previous version did.

hope that helps. and Old Pedant - sorry, some solutions are beyond even my reach :D

aaronhockey_09
01-26-2012, 01:43 PM
Yes that was it :)
thanks very much for your time.
You are a gentleman and a scholar

aaronhockey_09
01-26-2012, 08:35 PM
Hey, so im trying one more thing.
I want to be able to show the time before and after the current time.
So say we have a Row in the middle that displays the current times - Lets say 10 - 15.
And then a Row above that displays 5-10
And then a row below that displays 15 - 20.

How would i be able to make all of them count up.
This is what i have, but the second row doesnt count up.


<script>
//Load player api asynchronously. Inspired by http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '215',
width: '300',
videoId: '0L_iOnLNt9M',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
player.seekTo(0, false)
player.pauseVideo();
}

var oldtime;
var int;

function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PAUSED) {
stopped(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.PLAYING) {
rollover(player.getCurrentTime());
rollover2(player.getCurrentTime());
}
if (evt.data == YT.PlayerState.ENDED) {
clearInterval(int)
}
}

function stopped(cur_time) {
var i=0;
var t_start = document.getElementById('starttime');
var cont = document.getElementById('content');
var t_end = document.getElementById('endtime');
clearInterval(int)
}

function rollover(cur_time) {
int=setInterval(timer,100)
}

function rollover2(cur_time) {
int=setInterval(timer2,100)
}

function timer() {
time=parseInt(player.getCurrentTime()/5)
if (oldtime!=time){
rows[1].innerHTML=rows[time+1].innerHTML
oldtime=time
}


}

function timer2() {
time=parseInt(player.getCurrentTime()/5)
if (oldtime!=time){
rows[2].innerHTML=rows[time+1].innerHTML
oldtime=time
}


}

</script>

and


<script>
rows=document.getElementById("main-table").getElementsByTagName("tr")
for ( x = 3; x < rows.length; x++ ){
rows[x].style.display="none"
}

function timer() {
time=parseInt(player.getCurrentTime())
if (time%5==0&&oldtime!=time){
rows[1].innerHTML=rows[(time/5)+1].innerHTML
oldtime=time
}
}

function timer2() {
time=parseInt(player.getCurrentTime())
if (time%5==0&&oldtime!=time){
rows[2].innerHTML=rows[(time/5)+1].innerHTML
oldtime=time
}
}

thanks

xelawho
01-27-2012, 04:12 AM
well, it's getting kinda hokey, but this seems to work...



<script>
var contents=[]
rows=document.getElementById("mytable").getElementsByTagName("tr")
for ( x = 1; x < rows.length; x++ ){
contents.push(rows[x].innerHTML);
if (x<5){
continue;
} else{
rows[x].style.display="none"
}
}

function timer() {
time=parseInt(player.getCurrentTime()/5)
if (oldtime!=time){
rows[2].innerHTML=contents[time]
rows[3].innerHTML=contents[time+1]
if(time+2<contents.length){
rows[4].innerHTML=contents[time+2]
}else{
rows[4].innerHTML=""
}
oldtime=time
}
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum