Joomla Javascript Problem

[Cliphead]

My personal joomla based site has a custom module showing an image from a webcam. The module has some javascript that refreshes the image in that module every ten seconds and works perfectly.

The problem with adding a second webcam module is it uses the same javascript code so overrides the first cam and two identical images are shown instead of two different images.

How to change the code to differentiate between the two modules?

The code I'm using;

<div align="center"><img src="mypath/cam_1.jpg" name="refresh" height="240" width="320" />
<script type="text/javascript">
var t = 10 // interval in seconds
image = "mypath/cam_1.jpg" //name of the image
function Start() {
tmp = new Date();
tmp = "?"+tmp.getTime()
document.images["refresh"].src = image+tmp
setTimeout("Start()", t*1000)
}
Start();
</script>
</div>

The second webcam module code is identical except for the image which is named cam_2.jpg

You can see what's happening if you click on the site link below.

[AtW]

You called two images with the same name "refresh", make one "refresh1" and the other "refresh2" or something, change javascript accordingly.

Also consider using semicolons at the end of all statements:

tmp = "?"+tmp.getTime();
document.images["refresh"].src = image+tmp;
setTimeout("Start()", t*1000);

[Sysman]

I can see 2 different webcam piccies on your site now. If I do an open new window on each image and inspect the url they are like this:

cam_1.jpg?1283612973061
cam_2.jpg

[AtW]

I can see 2 different webcam piccies on your site now. If I do an open new window on each image and inspect the url they are like this:

cam_1.jpg?1283612973061
cam_2.jpg

Look at HTML -
<div align="center"><img src="/cam/cam_1.jpg" name="refresh1" height="240" width="320" />

It appears I was right, as usual.

[Cliphead]

Look at HTML -
<div align="center"><img src="/cam/cam_1.jpg" name="refresh1" height="240" width="320" />

It appears I was right, as usual.

I renamed cam 1 to;

<div align="center"><img src="/cam/cam_1.jpg" name="refresh1" height="240" width="320" />

and cam 2 to;

<div align="center"><img src="/cam/cam_2.jpg" name="refresh2" height="240" width="320" />

On refreshing the page I get the correct two images for ten seconds then it reverts to the two identical images.

[AtW]

Can you add proper semicolons to your code, this may or may not have effect, but let's just be proper and end all statements with ;

Also make correct path image = "cam/cam_2.jpg" - should be: image = /"cam/cam_2.jpg";

Also add to IMG tags IDs, ie: ID="refresh1" and ID="refresh2", not sure it would help but give it a go - it should have worked by now with the changes you made.

[Jaws]

Difficult to know exactly without seeing your current code but perhaps changing it to:

<div align="center"><img src="mypath/cam_1.jpg" name="refresh" height="240" width="320" />
<script type="text/javascript">
var t = 10; // interval in seconds
image1 = "mypath/cam_1.jpg"; //name of the image
image2 = "mypath/cam_2.jpg";
function Start() {
tmp = new Date();
tmp = "?"+tmp.getTime()
document.images["refresh1"].src = image1+tmp;
document.images["refresh2"].src = image2+tmp;

setTimeout("Start()", t*1000)
}
Start();
</script>
</div>

[Cliphead]

Getting the two images now but only cam 2 refreshes.

[Cliphead]

Difficult to know exactly without seeing your current code but perhaps changing it to:

<div align="center"><img src="mypath/cam_1.jpg" name="refresh" height="240" width="320" />
<script type="text/javascript">
var t = 10; // interval in seconds
image1 = "mypath/cam_1.jpg"; //name of the image
image2 = "mypath/cam_2.jpg";
function Start() {
tmp = new Date();
tmp = "?"+tmp.getTime()
document.images["refresh1"].src = image1+tmp;
document.images["refresh2"].src = image2+tmp;

setTimeout("Start()", t*1000)
}
Start();
</script>
</div>

The exact code I'm using I posted above the only difference being the code is duplicated in two separate Joomla modules.

[Cliphead]

Works fine with one cam. Thanks all for the help.