javascript and swf object help - Ajax??

I've tried a few things but nothing seems to work, i'm starting to think this isnt possible.

I basically am looking to have the user click on the video number, then have the video load in its own section on the page. I'm currently using iframes as a work around and have been trying to read up on Ajax as another way around it. Problem is, i think using iframes i'm losing important keywords that would usually be right on the page. i initially created the ifram because everytime a user clicked a video number, it had to reload the whole page. plus i rather not use iframes at all if I didn't have to.

Can someone take a look at the code below? Any help is appreciated as usual...

original page I'd like to implement this is at www.dontsnooze.com

I'm testing this code below at www.dontsnooze.com/test

Code doesn't work currently:

Expand|Select|Wrap|Line Numbers

  
<HTML>

<HEAD>
 
<script type="text/JavaScript">

function flashSwitch(flashid, video) {

document.getElementById(flashid).value = "AmosFlash.swf";

document.getElementById(flashid).src = "AmosFlash.swf";

}

</script></HEAD>

<TITLE>Ajax Video Switch Test</TITLE>
 
<BODY>

<center>

<table border=0 cellspacing=20>
 
<object id="ajaxtest" width="550" height="400">

<param id="ajaxtest" name="ajaxtest" value="StickFigureAnimated.swf">

<embed id="ajaxtest" name="ajaxtest" src="StickFigureAnimated.swf" width="550" height="400">

</embed>

</object>

<P>

<input type="submit" value="TRYME" onclick="flashSwitch('ajaxtest','AmosFlash.swf')" >
 
</td>

</tr>

</table>

</center>

</body>

</html>

Jan 26 '09 #1

Subscribe Post Reply

5579

gits

5,390

Expert Mod 4TB

you cannot use the same id for different nodes ... just make them unique, and let your function take care of those different ids - then it works. and where is the code related to ajax? ... it's just plain JavaScript-setting of the resource for the object-tag, no ajax is used/needed here.

kind regards

Jan 26 '09 #2

wizdom

Thank you for the response I really appreciate it....

I'll give changing the ID's a shot and post the results....

I'm not very familiar with ajax at all but thats what a few people keep running by me. I should have just came here first....

@gits

Jan 26 '09 #3

wizdom

So first I tried changing each ID individually and testing, then i tried putting an ID for each (pasted below), the video is not changing onclick. I actually tried a number of combinations. I guess my problem is (and thats if what I'm trying to do is even possible) i'm not sure where to put the ID. In the object tab? or in the param or embed tags? not sure........Any help/suggestions appreciated..heres some code I tried:

One of the first few attempts:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>
 
<!-- Switch Video script start -->

<script type="text/JavaScript">

function flashSwitch(flashid1,flashid2) {

document.getElementById(flashid1).value = "AmosFlash.swf";

document.getElementById(flashid2).src = "AmosFlash.swf";

}

</script>

<!-- end switch video script -->

<link rel="stylesheet" type="text/css" href="../ds-style.css">

</HEAD>

<TITLE>Ajax Video Switch Test</TITLE>

<BODY>

<center>

<table border=0 cellspacing=20><tr><td><center>

<object width="550" height="400">

<param id="flashtest1" value="StickFigureAnimated.swf">

<embed id="flashtest2" src="StickFigureAnimated.swf" width="550" height="400">

</embed>

</object>

<P>

<input type="submit" value="SWITCH VIDEO WITHOUT REFRESH" onclick="flashSwitch('flashtest1','flashtest2');">
 
</center>

</td>

</tr>

</table>

</center>

</body>

</html>

Another attempt with an ID for each:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<!-- Switch Video script start -->

<script type="text/JavaScript">

function flashSwitch(flashid1, flashid2, flashid3, flashid4, flashid5, video) {

document.getElementById(flashid1).value = "AmosFlash.swf";

document.getElementById(flashid1).src = "AmosFlash.swf";

document.getElementById(flashid2).value = "AmosFlash.swf";

document.getElementById(flashid2).src = "AmosFlash.swf";

document.getElementById(flashid3).value = "AmosFlash.swf";

document.getElementById(flashid3).src = "AmosFlash.swf";

document.getElementById(flashid4).value = "AmosFlash.swf";

document.getElementById(flashid4).src = "AmosFlash.swf";

document.getElementById(flashid5).value = "AmosFlash.swf";

document.getElementById(flashid5).src = "AmosFlash.swf";

}

</script>

<!-- end switch video script -->

<link rel="stylesheet" type="text/css" href="../ds-style.css">

</HEAD>

<TITLE>Ajax Video Switch Test</TITLE>

<BODY>

<center>

<table border=0 cellspacing=20><tr><td><center>

<object id="flashtest1" width="550" height="400">

<param id="flashtest2" name="flashtest3" value="StickFigureAnimated.swf">

<embed id="flashtest4" name="flashtest5" src="StickFigureAnimated.swf" width="550" height="400">

</embed>

</object>

<P>

<input type="submit" value="SWITCH VIDEO WITHOUT REFRESH" onclick="flashSwitch('flashtest1','flashtest2','flashtest3','flashtest4','flashtest5','AmosFlash.swf');">

</center>

</td>

</tr>

</table>

</center>

</body>

</html>

@gits

Jan 27 '09 #4

gits

5,390

Expert Mod 4TB

you just need ids for the param and the embed nodes ... currently an error occurs since flashid3 is no id ...

kind regards

Jan 27 '09 #5

wizdom

@gits

I thought I did that on my first example but it's not working....can you tell me why this one doesn't work?

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<!-- Switch Video script start -->

<script type="text/JavaScript">

function flashSwitch(flashid1,flashid2) {

document.getElementById(flashid1).value = "AmosFlash.swf";

document.getElementById(flashid2).src = "AmosFlash.swf";

}

</script>

<!-- end switch video script -->

<link rel="stylesheet" type="text/css" href="../ds-style.css">

</HEAD>

<TITLE>Ajax Video Switch Test</TITLE>

<BODY>

<center>

<table border=0 cellspacing=20><tr><td><center>

<object width="550" height="400">

<param id="flashtest1" value="StickFigureAnimated.swf">

<embed id="flashtest2" src="StickFigureAnimated.swf" width="550" height="400">

</embed>

</object>

<P>

<input type="submit" value="SWITCH VIDEO WITHOUT REFRESH" onclick="flashSwitch('flashtest1','flashtest2');">

</center>

</td>

</tr>

</table>

</center>

</body>

</html>

This is now at www.dontsnooze.com/test I'm using firefox to test it.

Jan 28 '09 #6

gits

5,390

Expert Mod 4TB

with my firefox 3.0.5 the link you posted just works as expected? have a look at your error-console ... does any errors occur there? and be sure to clear the cache before testing ... just to avoid that as an issue ...

Jan 28 '09 #7

wizdom

@gits

The link I posted is that exact code that i posted in my last post.

I want to be able to click the button, and then the video should change without reloading the whole page....right now, the video is not changing.

Firefox is not giving me any errors for the current code. i did have multiple erros from my first few attempts....
Now, with that said, I'm thinking i need to use 'ajax' for this.... but Ajax is brand new to me, matter of fact, it's still in the store waiting for me to pick it up.....So i'm not sure if thats what I need to do.... but let me know if you have any suggestions

thanks again

FYI, both swf files are in the same folder as the index.php file.

AmosFlash.swf and StickFigureAnimated.swf

Jan 28 '09 #8

gits

5,390

Expert Mod 4TB

as far as i could see it works in FF and not in IE (i used 6) ... currently i don't have time to have a look but it seems that the script couldn't retrieve the nodes by id?

Jan 28 '09 #9

acoder

16,027

Expert Mod 8TB

For quick, easy, cross-browser Flash integration, try out swfobject.

Jan 28 '09 #10

wizdom

I also checked and notice i'm using firefox 2.0.0.20 (using that at work) at home I use the latest IE. I'm Dl'ing FF 3.0.5 now. I will also check out swfobject from acoder because ultimately I would like this to work across all (or most) platforms

Jan 29 '09 #11

wizdom

Ok it does work in FF 3.0 for me. i will be looking into that swfobject deal.....Thanks. Thanks again acoder also =] you may notice i am using some of the stuff you showed me with my other issue.

Jan 29 '09 #12

wizdom

@acoder
Tried swfobject and its perfect. Took me a few to get a basic understanding and I also used JSON (JavaScript Object Notation) - found a really nice demo from google here: http://gdata.ops.demo.googlepages.co...n_codelab.html

Posting it because it was hard to find (unless you knew to search for JSON, which I didn't)

With the javascript stuff I learned from here I was able to tweak the code a bit to get it how I wanted it, with the exception of one thing...

I'm looking for a code example of how to make one of those menu bars such as what youtube does at the end of a played video... the auto scrolling rollover horizontal menu (of videos) on mousehover type deal...I figure I could write code for a simple one tho where you just click next and the next few video menu's load, but just throwing that out there if anyone knows of one off hand.

Thanks again I am grateful =))

results are at www.dontsnooze.com, you can view source to see the swfObject usage and the script i'm using

Jan 31 '09 #13

acoder

16,027

Expert Mod 8TB

If you right-click, you'll notice that it's part of the Flash file. You could do something similar with JavaScript though.

Jan 31 '09 #14

wizdom

@acoder
Yes, I know the youtube version is part of the flash, I just used that as an example because it's well known.

I'm playing with the code a bit and have it down to this:

http://www.dontsnooze.com/test

Obviously one long table. I guess what i'll do now is work on getting it at least to a point where it displays the first 5 videos or so, then you will be able to click and show the next 5 videos, while hiding the last....im thinking using innerHTML and as usual I'll post the results if I get it right =}

Any suggestions are helpful!

Jan 31 '09 #15

wizdom

Took me a lot of time and reading up but I finally got it. I'm not too proud of the very dirty looking code, but it does work pretty well. I went with a "click to see last 5 or previous 5" option ... the code got pretty detailed and long and drawn out so pasting may not help anyone...but the function is in action at dontsnooze.com and you can view source if interested, or send a pst ... but its basically just an overhaul of the google code demo I posted above (if someone does want me to post I can)

I'm sure theres a number of places where I can fine tune it...I had so many errors trying to get it working that I tried to keep a lot seperated...that plus my noobness heh

Thanks again for the help.. think i'm learning more here than at work/school lol.

Feb 1 '09 #16

acoder

16,027

Expert Mod 8TB

Yes, there could be a few improvements, e.g. there's no need to set the cursor to a pointer for links, it moves by setting it to bold on hover.

Feb 2 '09 #17

wizdom

Yes I'm very glad you noticed that.

I've recently made a style sheet in an effort to try to remove some of the elements in that link string. After removing that pointer style line from the links, the video thumbnail lost the pointer on hover.

With that said, I cleaned up the code as best as I could so it doesn't look as bad.

I'm not sure when you checked, but i made a few changes. And now I feel it may be necessary to paste the code so we can be on the same page, and especially since there are a couple pieces I don't understand.....

amosyoutubescript.ds (as of 2/2/09)

Expand|Select|Wrap|Line Numbers

 
function loadVideo(playerUrl, autoplay, longtitle) {

swfobject.embedSWF(playerUrl + '&rel=1&border=0&fs=1&autoplay=' + (autoplay?1:0), 'player', '550', '400', '9.0.0', false, false, {allowfullscreen: 'true'});
 
  document.getElementById('longtitle').innerHTML = longtitle;

   }

function barSwitch(barNumber){

document.getElementById('videoBarContainer').innerHTML = barNumber;

}

  var totalBarNumber=0;

  var videoBar = new Array();

  var videoBarNumber = 0;

  var videoUrl = new Array();

  var longtitle = new Array();

  var thumbnailUrl = new Array();

  var entry = new Array();

  var title = new Array();

  var videosPerBar = 5;

  var totalVideos=0;

function showMyVideos2(data) {

  var feed = data.feed;

  var entries = feed.entry || [];

  totalVideos = entries.length;

  totalBarNumber = Math.floor(totalVideos / videosPerBar);

  if (totalVideos % videosPerBar != 0) { totalBarNumber++; } 

 for (var p = 0; p < entries.length; p++) {

    thumbnailUrl[p] = entries[p].media$group.media$thumbnail[0].url;

    videoUrl[p] = entries[p].media$group.media$content[0].url;

    entry[p] = entries[p];

    title[p] = entry[p].title.$t.substr(0, 20).replace(/'/gi, "’");
 
    if (p==0) { var firstTitle = entry[p].title.$t.replace(/'/gi, "’");} 

    longtitle[p] = entry[p].title.$t.replace(/'/gi, "’");

 }
 
 for (var i = 0;i < totalVideos;i+=videosPerBar) {

 if (videoBarNumber == 0 && totalVideos < videosPerBar) {

 videoBar[videoBarNumber] = '<table><tr><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[i] + '\', true , \'' + longtitle[i] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[i] + ' " src="' + thumbnailUrl[i] + '" width="65" height="47"/><br><span class="textColorChange">' + title[i] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+1)] + '\', true , \'' + longtitle[(i+1)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+1)] + ' " src="' + thumbnailUrl[(i+1)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+1)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+2)] + '\', true , \'' + longtitle[(i+2)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+2)] + ' " src="' + thumbnailUrl[(i+2)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+2)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+3)] + '\', true , \'' + longtitle[(i+3)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+3)] + '" src="' + thumbnailUrl[(i+3)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+3)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+4)] + '\', true , \'' + longtitle[(i+4)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+4)] + ' " src="' + thumbnailUrl[(i+4)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+4)] + '...</span></a></CENTER></td></tr></table>';

 }

 if (videoBarNumber == 0 && totalVideos > videosPerBar) {

 videoBar[videoBarNumber] = '<table><tr><td><center><a onmouseover="this.style.cursor=\'pointer\'" onclick="barSwitch(videoBar[' + (totalBarNumber-1) + '])"><span class="goGreen">«</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[i] + '\', true , \'' + longtitle[i] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[i] + ' " src="' + thumbnailUrl[i] + '" width="65" height="47"/><br><span class="textColorChange">' + title[i] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+1)] + '\', true , \'' + longtitle[(i+1)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+1)] + ' " src="' + thumbnailUrl[(i+1)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+1)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+2)] + '\', true , \'' + longtitle[(i+2)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+2)] + ' " src="' + thumbnailUrl[(i+2)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+2)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+3)] + '\', true , \'' + longtitle[(i+3)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+3)] + '" src="' + thumbnailUrl[(i+3)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+3)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+4)] + '\', true , \'' + longtitle[(i+4)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+4)] + ' " src="' + thumbnailUrl[(i+4)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+4)] + '...</span></a></CENTER></td><td><center><a onmouseover="this.style.cursor=\'pointer\'" onclick="barSwitch(videoBar[' + (videoBarNumber+1) + '])"><span class="goGreen">»</span></a></CENTER></td></tr></table>';

 }

 if (videoBarNumber != 0 && ((totalVideos - i) > videosPerBar)) {

 videoBar[videoBarNumber] = '<table><tr><td><center><a onmouseover="this.style.cursor=\'pointer\'" onclick="barSwitch(videoBar[' + (videoBarNumber-1) + '])"><span class="goGreen">«</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[i] + '\', true , \'' + longtitle[i] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[i] + ' " src="' + thumbnailUrl[i] + '" width="65" height="47"/><br><span class="textColorChange">' + title[i] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+1)] + '\', true , \'' + longtitle[(i+1)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+1)] + ' " src="' + thumbnailUrl[(i+1)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+1)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+2)] + '\', true , \'' + longtitle[(i+2)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+2)] + ' " src="' + thumbnailUrl[(i+2)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+2)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+3)] + '\', true , \'' + longtitle[(i+3)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+3)] + '" src="' + thumbnailUrl[(i+3)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+3)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+4)] + '\', true , \'' + longtitle[(i+4)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+4)] + ' " src="' + thumbnailUrl[(i+4)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+4)] + '...</span></a></CENTER></td><td><center><a onmouseover="this.style.cursor=\'pointer\'" onclick="barSwitch(videoBar['+ (videoBarNumber+1) + '])"><span class="goGreen">»</span></a></CENTER></td></tr></table>';

        }
 
   if ((videoBarNumber == (totalBarNumber-1)) && i != 0) {

    videoBar[videoBarNumber] = '<table><tr><td><center><a onmouseover="this.style.cursor=\'pointer\'" onclick="barSwitch(videoBar[' + (videoBarNumber-1) + '])"><span class="goGreen">«</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(totalVideos-4)] + '\', true , \'' + longtitle[(totalVideos-4)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(totalVideos-4)] + ' " src="' + thumbnailUrl[(totalVideos-4)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(totalVideos-4)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(totalVideos-3)] + '\', true , \'' + longtitle[(totalVideos-3)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(totalVideos-3)] + ' " src="' + thumbnailUrl[(totalVideos-3)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(totalVideos-4)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(totalVideos-3)] + '\', true , \'' + longtitle[(totalVideos-3)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(totalVideos-3)] + ' " src="' + thumbnailUrl[(totalVideos-3)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(totalVideos-3)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(totalVideos-2)] + '\', true , \'' + longtitle[(totalVideos-2)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(totalVideos-2)] + '" src="' + thumbnailUrl[(totalVideos-2)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(totalVideos-2)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(totalVideos-1)] + '\', true , \'' + longtitle[(totalVideos-1)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(totalVideos-1)] + '" src="' + thumbnailUrl[(totalVideos-1)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(totalVideos-1)] + '...</span></a></CENTER></td><td><center><a onmouseover="this.style.cursor=\'pointer\'" onclick="barSwitch(videoBar[0])"><span class="goGreen">»</span></a></CENTER></td></tr></table>';

 }

 videoBarNumber++;

 }

 if (totalVideos > 0) {

    loadVideo(entries[0].media$group.media$content[0].url, false, firstTitle);

    barSwitch(videoBar[0]);

 }

}

I want to be able to reference the line numbers so I will post this and ask Q's in another post... I apologize if its spam

Feb 2 '09 #18

wizdom

As I stated b4, I used the code from the google code link and editted most of it, just about all of it. So there are a few things I didn't understand...

Expand|Select|Wrap|Line Numbers

Line 20: var feed = data.feed;

variable 'feed' is created, then the "data" that was pulled in is passed thru the variable just created?, or will be passed thru??

I'm not undertanding the line.

Expand|Select|Wrap|Line Numbers

Line 21: var entries = feed.entry || [];

if feed.entry doesn't exist then create a blank array? entries[] ?

And I have the same question as the previous, whats the ".variable" mean at the end of the variable declaration?

And now for the hard part (for me that is)....

From line :43

Expand|Select|Wrap|Line Numbers

  
 videoBar[videoBarNumber] = '<table><tr><td><center><a onmouseover="this.style.cursor=\'pointer\'" onclick="barSwitch(videoBar[' + (videoBarNumber-1) + '])"><span class="goGreen">«</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[i] + '\', true , \'' + longtitle[i] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[i] + ' " src="' + thumbnailUrl[i] + '" width="65" height="47"/><br><span class="textColorChange">' + title[i] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+1)] + '\', true , \'' + longtitle[(i+1)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+1)] + ' " src="' + thumbnailUrl[(i+1)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+1)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+2)] + '\', true , \'' + longtitle[(i+2)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+2)] + ' " src="' + thumbnailUrl[(i+2)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+2)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+3)] + '\', true , \'' + longtitle[(i+3)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+3)] + '" src="' + thumbnailUrl[(i+3)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+3)] + '...</span></a></CENTER></td><td><center><a onmouseover=\'this.style.cursor="pointer"\' onclick="loadVideo(\'' + videoUrl[(i+4)] + '\', true , \'' + longtitle[(i+4)] + '\')"><span class="textColorChange"><img TITLE="' + longtitle[(i+4)] + ' " src="' + thumbnailUrl[(i+4)] + '" width="65" height="47"/><br><span class="textColorChange">' + title[(i+4)] + '...</span></a></CENTER></td><td><center><a onmouseover="this.style.cursor=\'pointer\'" onclick="barSwitch(videoBar['+ (videoBarNumber+1) + '])"><span class="goGreen">»</span></a></CENTER></td></tr></table>';

Problems i'm having:
1: if the <A tag doesn't have an HREF element, it doesn't pick up the style, hense the main reason i had to add the seperate style for the video links and img link (thumbnail). But I haven't found another way to include text that's clickable with "on" events in the way that I would like them done.

I can't remember if i tried, but i'll give it another shot: taking the "span" and putting the whole <a> link as well as the image link in between the one span tag.

2: Line 37,40,43,47 (the links):
I get errors anytime i try to put this line on multiple lines (i'm trying to make it easier to read/edit) and then the function doesn't run. - I'm guessing it doesn't like the carriage return?

At first I couldn't figure out what was causing the problem, seemed like sometimes the function was running, and sometimes it wasn't. I ended up removing all the comments I originally had in the code, which I'm kinda kicking myself for now.

3. last but not least, more of a "what do u think" question

Would it be better to write another javascript function that takes most of the info from
"Line 37 (and similar)" ? But it would only be so the code is more readable.

and then, would adding another function add more loading time to the page than if I left it as is?

*EDIT* last last but not least, i'm not getting erros in firefox but...
The way i'm declaring the variables with that long string (line 37 and similar)... is that "acceptable" ? or am I causing a lot of memory usage on the user? or something else thats bad......
========

As you guys know I'm still a little new at javascript/css so if anything pops out to you that I can improve, any suggestions/comments are appreciated

Feb 3 '09 #19

acoder

16,027

Expert Mod 8TB

@wizdom
That's the callback function and data will be a JSON feed, so you can access properties using dot notation.

I'm not undertanding the line.

Expand|Select|Wrap|Line Numbers

Line 21: var entries = feed.entry || [];

if feed.entry doesn't exist then create a blank array? entries[] ?

Yes.

And I have the same question as the previous, whats the ".variable" mean at the end of the variable declaration?

I'm not sure which variable you're referring to here.

Problems i'm having:
1: if the <A tag doesn't have an HREF element, it doesn't pick up the style, hense the main reason i had to add the seperate style for the video links and img link (thumbnail). But I haven't found another way to include text that's clickable with "on" events in the way that I would like them done.

Include the href attribute, but make the function return false in onclick to prevent the link being followed when clicked.

2: Line 37,40,43,47 (the links):
I get errors anytime i try to put this line on multiple lines (i'm trying to make it easier to read/edit) and then the function doesn't run. - I'm guessing it doesn't like the carriage return?

Not within quotes, it doesn't. Close the quote and use + for concatenation.

3. last but not least, more of a "what do u think" question

Would it be better to write another javascript function that takes most of the info from
"Line 37 (and similar)" ? But it would only be so the code is more readable.

and then, would adding another function add more loading time to the page than if I left it as is?

You could improve things by using a function to get rid of the repitition. It may also be good practice to use the DOM rather than strings here. Since this is a relatively small application, it won't make much difference to loading time.

Feb 3 '09 #20

wizdom

@acoder
I was referring to the

.entry part of the line in:

Expand|Select|Wrap|Line Numbers

Line 21: var entries = feed.entry || [];

I understand tho that it gives me the entry from the feed of course depending on which entry you select. I guess I don't understand how they are using the "entry" function on this....but it may be something I could check out more inside the swfobject code.

It's minor in the fact that although i don't understand it in detail, I can put it to use. But once again man I really appreciate the responses. I see i have a little work cut out for me that may take me some time... I will post back my improvements tho. thanks!

Feb 5 '09 #21

acoder

16,027

Expert Mod 8TB

I doubt entry will be a function - it'll be a property of feed. Most likely a JSON array.

Feb 5 '09 #22

javascript and swf object help - Ajax??

Similar topics