Please help - force webpage refresh?

[t12]

Hi all,

Any help with this would be so appreciated. My html knowledge is limited but I've got a basic enough grasp to have created pages before. But now I'm stuck.

I want to give a live presentation that involves my audience watching a webpage with images on it. When I get to a specific point in my presentation, I'd like an image to change without the need for my audience to do anything.

I have tried adding <META HTTP-EQUIV="refresh" CONTENT="15"> and then simply FTPing a new image with the same file name to the server so that it refreshes with the new image.

This would work fine, but it means that the graphics constantly flash as they refresh and what's more, I have streaming video on my page that is struggling to keep up and keeps 'falling over'.

So my question is... is there any way I can force this pesky image to change without refreshing the entire page? Is there some code I can use that will mean that when I FTP a replacement image (possibly of the same name) to the server the server will force the webpage to change it live?

I'm getting desperate. Any help or advise would be very much appreciated.

[rtrethewey]

If your programming skills are limited, I'd suggest using an <iframe> to display the image within the webpage that displays your video and everything else. That way, the external document that displays the image (and nothing else) can have the <meta> refresh tag and only that single image will be reloaded from the server.

If you're comfortable with JavaScript and a server-side scripting language, a more elegant approach would be to have a JavaScript function periodically use AJAX to call a script on your server that would check to see if the image has been changed and, if so, reload the image from that update. Good luck!

[t12]

Thanks for your reply rtrethewey - it is appreciated.

I have tried the <meta> refresh route - but as I;d imagine you already know, it's a little messy and the image of course constantly flickers if refreshing and without a change. A little distracting to say the least!

I have heard of AJAX and believe this may be the best way forward but haven't the knowledge or skills to implement really. I'm guessing I'd need something on the server and then some code pasted into the page itself?

[t12]

Actually rtrethewey, so you don't waste your time writing, I have found a solution (of sorts) using:

<script type="text/javascript">
var reimg
window.onload=function () {
reimg=document.getElementById('re')
setInterval(function () {
reimg.src=reimg.src.replace(/\?.*/,function () {
return '?'+new Date()
})
},5)
}
</script>

<img src="" id="re">

But again, many thanks for your reply and help.

Kind regards.

[sunnybrook]

@t12

The piece of code you posted is great. The problem I have with it is that although my image is larger than I display it and it reduces to fit in Firefox, only part of the image is shown in IE.

Any ideas?

[rtrethewey]

If your image isn't displaying properly, it's due to the HTML/CSS on the page, not any JavaScript. Post the code in the HTML section.

[sunnybrook]

Thanks.

It is a hodge podge of code as it is a free site that I use for testing....

http://dobrina.bravehost.com

It uses the same code as posted by t12 (with a substantially higher delay) and the image is displayed using (a bit of overkill to try and resolve the problem).......

<P align="center">
<iframe frameborder=0 marginwidth=0 marginheight=0 border=0 width="360" height="270" 
style="overflow:hidden;border:0;margin:0;width:360px;height:270px;max-width:100%;max-height:100%" 
src="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg?" id="re" scrolling="no" 
allowtransparency="true">If you can see this, your browser doesn't understand IFRAME. 
However, we'll still <A HREF="http://icons.wunderground.com/webcamramdisk/g/l/Gluepack/1/current.jpg">
link</A> you to the file.</iframe>
</P>