javascript and swf object help - Ajax??

**gits** · Jan 26 '09, 12:07 PM

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

**wizdom** · Jan 26 '09, 11:26 PM

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....

Originally posted by gits

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

**wizdom** · Jan 27 '09, 12:23 AM

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..he res some code I tried:

One of the first few attempts:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]http://www.w3.org/TR/html4/strict.dtd[/URL]">
<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:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]http://www.w3.org/TR/html4/strict.dtd[/URL]">
<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>

Originally posted by gits

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

**gits** · Jan 27 '09, 09:05 AM

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

kind regards

**wizdom** · Jan 28 '09, 12:05 AM

Originally posted by gits

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

kind regards

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

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]http://www.w3.org/TR/html4/strict.dtd[/URL]">
<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.

**gits** · Jan 28 '09, 12:17 AM

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 ...

**wizdom** · Jan 28 '09, 03:38 AM

Originally posted by gits

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 ...

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 StickFigureAnim ated.swf

**gits** · Jan 28 '09, 09:51 AM

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?

**acoder** · Jan 28 '09, 10:37 AM

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

**wizdom** · Jan 29 '09, 12:55 AM

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

**wizdom** · Jan 29 '09, 03:02 AM

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.

**wizdom** · Jan 31 '09, 12:10 AM

Originally posted by acoder

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

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

**acoder** · Jan 31 '09, 03:39 PM

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

**wizdom** · Jan 31 '09, 08:33 PM

Originally posted by acoder

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

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:

Page not found – Don't Snooze Productions

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!

javascript and swf object help - Ajax??

javascript and swf object help - Ajax??

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment