Reply to: Joomla Javascript Problem

[Cliphead]

Back on topic: the following code will auto-refresh any images in the page that have a name attribute whose value is "refresh" followed by zero or more digits, such as "refresh", "refresh1", "refresh99999".

Notes:

• All images to be refreshed must have a different name.
  
  
• All images lacking a name, or with a name not matching the pattern, will be left alone.
  
  
• If no images are found with a suitable name, the refresh timer won't be started.
  
  
• The code creates no global variables, and will neither interfere with nor be interfered with by any other code on the page, unless that code is also trying to change the src attribute of the same images.
  
  
• The code only needs to be included once, and must be after all the images. The best place is immediately before the </body> tag.
  
  
• It automatically picks up the original path/name of the image from the HTML, so even if you change the source of one of the images it will still work.
  
  
• You can change the refresh interval at the line near the top with a comment about it.
  
  
• If you want it on multiple pages, it's best to put it in an external file and use <script src="image-refresh.js"></script>.
  
  
• I've put up a demo page which refreshes two separate images every two seconds whilst leaving another untouched; the images just show the date and time that the browser asked for them.
  
  
• It's been tested on Safari 5 Mac, Firefox 3.6 Mac, and IE6 XP, but it should be OK anywhere - in fact, it should even work on Netscape Navigator 3

(function() {
    // Demo: http://www.nickfitz.co.uk/examples/javascript/image-refresh/image-refresh.html
    var config = {
            refreshInterval: 10, // This is the refresh interval in seconds
            imageMatcher: /^refresh\d*$/
    },
    refreshImages = [],
    images,
    refreshImagesLength;
    
    images = document.getElementsByTagName("img");
    for (var i = 0, l = images.length; i < l; i++) {
        if (images[i].name.match(config.imageMatcher)) {
            refreshImages.push({img: images[i], src: images[i].src});
        }
    }
    refreshImagesLength = refreshImages.length;
    if (refreshImagesLength) {
        setInterval(function() {
            for (var i = 0; i < refreshImagesLength; i++) {
                refreshImages[i].img.src = refreshImages[i].src + "?" + new Date().getTime();
            }
        }, config.refreshInterval * 1000);
    }
})();

Looks interesting but I don't have a clue how to use it in Joomla. It would be much simpler if I had code that would work within each of the two modules.

[NickFitz]

Back on topic: the following code will auto-refresh any images in the page that have a name attribute whose value is "refresh" followed by zero or more digits, such as "refresh", "refresh1", "refresh99999".

Notes:

• All images to be refreshed must have a different name.
  
  
• All images lacking a name, or with a name not matching the pattern, will be left alone.
  
  
• If no images are found with a suitable name, the refresh timer won't be started.
  
  
• The code creates no global variables, and will neither interfere with nor be interfered with by any other code on the page, unless that code is also trying to change the src attribute of the same images.
  
  
• The code only needs to be included once, and must be after all the images. The best place is immediately before the </body> tag.
  
  
• It automatically picks up the original path/name of the image from the HTML, so even if you change the source of one of the images it will still work.
  
  
• You can change the refresh interval at the line near the top with a comment about it.
  
  
• If you want it on multiple pages, it's best to put it in an external file and use <script src="image-refresh.js"></script>.
  
  
• I've put up a demo page which refreshes two separate images every two seconds whilst leaving another untouched; the images just show the date and time that the browser asked for them.
  
  
• It's been tested on Safari 5 Mac, Firefox 3.6 Mac, and IE6 XP, but it should be OK anywhere - in fact, it should even work on Netscape Navigator 3

(function() {
    // Demo: http://www.nickfitz.co.uk/examples/javascript/image-refresh/image-refresh.html
    var config = {
            refreshInterval: 10, // This is the refresh interval in seconds
            imageMatcher: /^refresh\d*$/
    },
    refreshImages = [],
    images,
    refreshImagesLength;
    
    images = document.getElementsByTagName("img");
    for (var i = 0, l = images.length; i < l; i++) {
        if (images[i].name.match(config.imageMatcher)) {
            refreshImages.push({img: images[i], src: images[i].src});
        }
    }
    refreshImagesLength = refreshImages.length;
    if (refreshImagesLength) {
        setInterval(function() {
            for (var i = 0; i < refreshImagesLength; i++) {
                refreshImages[i].img.src = refreshImages[i].src + "?" + new Date().getTime();
            }
        }, config.refreshInterval * 1000);
    }
})();

[NickFitz]

It's optional in JS

Almost right

JS will perform automatic semicolon insertion according to a precisely-specified algorithm, but if you don't know that algorithm, you can get caught out: for example, the following code will produce a syntax error because the single line without a semicolon (highlighted for your viewing pleasure) won't have a semicolon inserted automatically according to the rules:

var bar = "a";
var baz = {};
var boo = 1;
var bop = 2;
a = boo + bop
(baz).foo = bar;

Best practise is to never rely on automatic semicolon insertion, and furthermore to understand how it works so you don't get caught out by it when it does happen, such as:

function foo() {
    // stuff happens...
    return
        {
            a: "foo",
            b: 7
        };
}

where a semicolon will be inserted after "return", meaning that the function will return "undefined" rather than returning that nice object defined by the object literal we started on the next line to keep it nicely formatted.

[d000hg]

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 ;

It's optional in JS

[AtW]

Yep, was slowing the site down anyways.

Those images dont slow your site down, it's the other stuff like video etc...

[Cliphead]

You've given up?

Yep, was slowing the site down anyways.

[AtW]

You've given up?

[Cliphead]

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

[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]

Getting the two images now but only cam 2 refreshes.

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

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

[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]

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.

[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