Refresh Images

@j0n0Sep 30.2008 — #try this - im also presuming u not using php

give all your pics an id: id=pic1, id=pic2, etc

put an invisible iframe with id in your body tag

<iframe id=X style=display:none></iframe>

in the body tag put:

<body onload="setTimeout('getPix()',5000)"> // where 5000 = 5 seconds

// so update will occur every 5 secs

in the head put:

<script>

function getPix()

{

document.getElementById("X").src="thePageWithNewPix.html"

}

</script>

on thePageWithNewPix.html

have NOTHING (no other tags) but this

<script>

var P=window.parent.document

P.getElementById("pic1").src="theNewImage1.jpg"

P.getElementById("pic2").src="theNewImage2.jpg"

P.getElementById("pic3").src="theNewImage3.jpg"

P.getElementById("pic4").src="theNewImage4.jpg"

P.getElementById("pic5").src="theNewImage5.jpg"

</script>

i havnt tested this but should work

Just a suggestion on your site - when i went there all the pics where at your time - in the middle of the night! Thanks for the black jpgs. Instead: leave some of the images at last daylight until next day....

@johnuauthorSep 30.2008 — #Will this code just reload or refresh the six images or will it require a new page?

I do not want to bring up a new page, just want to reload the images and leave the stream cam run without interference.

Thanks for your time and help.

@j0n0Oct 01.2008 — #Ill will do what you want - the iframe will get the updates without changing the current page - the js will look into the parent - find the images and change their src= to the new images

@johnuauthorOct 01.2008 — #Hello J0n0,

Thank you for your help. I am having a problem getting my webcam page to call or update the new images. I have this in my webcam page:

<script>

function getPix()

{

document.getElementById("oldfaith2").src="refresh.htm"

document.getElementById("mammothcam2").src="refresh.htm"

document.getElementById("electric-peak").src="refresh.htm"

document.getElementById("washburn").src="refresh.htm"

document.getElementById("yell").src="refresh.htm"

document.getElementById("mammoth").src="refresh.htm"

}

</script>

</head>

<body background="images/lighttex.gif" onload="setTimeout('getPix()',5000)">

<iframe id="oldfaith2" style=display:none></iframe>

<iframe id="mammothcam2" style=display:none></iframe>

<iframe id="electric-peak" style=display:none></iframe>

<iframe id="washburn" style=display:none></iframe>

<iframe id="yell" style=display:none></iframe>

<iframe id="mammoth" style=display:none></iframe>

I am not sure how to assign the images an ID or how to call them on my webcam page??

<td width="800"><a href="http://www.nps.gov/archive/yell/oldfaithfulcam.htm"><img src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/oldfaith2.jpg" alt="Old Faithful WebCam - NPS" height="600" width="800" border="0" /></a></td>

Also, do I need an iframe for each image?

***** refresh.htm *****

I have this on the refresh.htm page (NOTHING ELSE):

<script>

var P=window.parent.document

P.getElementById("oldfaith2").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/oldfaith2.jpg"

P.getElementById("mammothcam2").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/mammothcam2.jpg"

P.getElementById("electric-peak").src="http://www.coolworks.com/webcams/electric-peak.jpg"

P.getElementById("washburn").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/washburn.jpg"

P.getElementById("yell").src="http://www.nature.nps.gov/air/WebCams/parks/yellcam/yell.jpg"

P.getElementById("mammoth").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/mammoth.jpg"

</script>

No other tags at all. Is that correct?

Thanks again for your time and help!

@j0n0Oct 01.2008 — #ok dude

firstly : only one iframe - the code i gave you only calls one iframe and the id must be X

The refresh part looks ok

Let me break it down a bit:

when the page loads the script in the body tag activates and 5 seconds later if fires

- it then locates the iframe by id=X

changes the src or the iframe that immediately goes back to the server

to get the page with the new images (thePageWithNewPix.html).

When this comes back the script on thePageWithNewPix.html fires

- it looks from within the iframe to the parent (your original webcam page),

to find the images by way of the id you have set

and changes the src of the images....

how are you updating thePageWithNewPix.html?

@johnuauthorOct 01.2008 — #Thanks! I am "beginning" to understand what you are saying.

I am still not clear on how to do this on my webcam page: "give all your pics an id: id=pic1, id=pic2, etc"? Is this done as a list or in each image tag:

</td>

<td width="800"><a href="http://www.nps.gov/archive/yell/oldfaithfulcam.htm"><img src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/oldfaith2.jpg" [U]id="oldfaith2"[/U] alt="Old Faithful WebCam - NPS" height="600" width="800" border="0" /></a></td>

*****

As to your question: how are you updating thePageWithNewPix.html?

There are six different webpages with six different images. They are updated with the meta refresh tags.

@j0n0Oct 01.2008 — #ok

your img id (example) looks ok

- the ids must be on the images and not as a list anywhere

@j0n0Oct 01.2008 — #remember that thePageWithNewPix.html has no other code so thePageWithNewPix.html will need to be updated some way every 5 seconds

But for now lets just get the updating part right, then worry about the thePageWithNewPix.html page

@johnuauthorOct 01.2008 — #Ok, here is what I have on the webcam page:

<script>

function getPix()

{

document.getElementById("X").src="refresh.htm"

}

</script>

</head>

<body background="images/lighttex.gif" onload="setTimeout('getPix()',5000)">

<iframe id="X" style=display:none></iframe>

<td width="800"><a href="http://www.nps.gov/archive/yell/oldfaithfulcam.htm"><img src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/oldfaith2.jpg" id="oldfaith2" alt="Old Faithful WebCam - NPS" height="600" width="800" border="0" /></a></td>

On the refresh.htm (thePageWithNewPix.html) I have:

<script>

var P=window.parent.document

P.getElementById("oldfaith2").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/oldfaith2.jpg"

P.getElementById("mammothcam2").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/mammothcam2.jpg"

P.getElementById("electric-peak").src="http://www.coolworks.com/webcams/electric-peak.jpg"

P.getElementById("washburn").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/washburn.jpg"

P.getElementById("yell").src="http://www.nature.nps.gov/air/WebCams/parks/yellcam/yell.jpg"

P.getElementById("mammoth").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/mammoth.jpg"

</script>

I have this out on the net at: http://www.the-great-outdoors.net/yellowstonewebcamswide2.htm

Nothing is updating...???

@j0n0Oct 01.2008 — #taking a look

@j0n0Oct 01.2008 — #ok - heres the problem

go to: http://www.dbweb4.co.za/help.html

and wait 5 seconds

Your refresh page is no found

also I made a mistake by using setTimeout - i should have used :

setInterval('getPix()',5000)[/QUOTE]

@j0n0Oct 01.2008 — #ok - now i have made that example update images from my server - so the code works

http://www.dbweb4.co.za/help.html

@johnuauthorOct 01.2008 — #I have changed the interval line.

The refresh.htm page is at:

http://www.the-great-outdoors.net/refresh.htm

@j0n0Oct 01.2008 — #ok do this remove the style=display:none[/QUOTE] from the iframe and see what happens in there then get back to me

your update page looks ok

if you looked at http://www.dbweb4.co.za/help.html youll see it works

@j0n0Oct 01.2008 — #and hurry - im getting really drunk here

@johnuauthorOct 01.2008 — #I have made the iframe change and uploaded the changes.

It looks like it is trying to refresh the images but it is not doing it.

I see at message on the bottom bar: "waiting for: http://www.the-great-outdoors.net/refresh.htm

We are getting close, just about there!

@j0n0Oct 01.2008 — #ok - where is this page so i can muck with it

@johnuauthorOct 01.2008 — #http://www.the-great-outdoors.net/yellowstonewebcamswide2.htm

@j0n0Oct 01.2008 — #ok it seems to be working.

hmm

is your update page bringing the right / latest images?

im getting no js errors so I think thats it...youre updating with the same images (or what)

@johnuauthorOct 01.2008 — #The refresh.htm should pull whatever image in on the webcam page (as you can see when it first loads up)...

It looks like it is pulling the image but maybe does not know where to put it? Maybe the image id tag is not written right or needs something else?

The Old Faithful image updates every 30 seconds, the others every minute...

But it seems you can wait forever and none of the images are updating...???

@j0n0Oct 01.2008 — #well we are updating every 5 seconds so you got to wait a while until new pics show up - however: change the time to 30000 (30 secs)

and if you need to get refreshed images on the refesh (iframe) page:

do it the way you normally do with <meta refreh=whatever / what what

then, only load those images in [B][COLOR="Red"][U][I]the same order[/I][/U][/COLOR][/B] as your id calls (and no other pics on the page - or html required)

then put this in the body tag:

onload="do_da_update()"[/QUOTE]

in the head

<script>

function do_da_update()

{

var img=document.getElementsByTagName("IMG")

var P=window.parent.document

P.getElementById("oldfaith2").src=img[0].src

P.getElementById("mammothcam2").src=img[1].src

P.getElementById("electric-peak").src=img[2].src

P.getElementById("washburn").src=img[3].src

P.getElementById("yell").src=img[4].src

P.getElementById("mammoth").src=img[5].src

}

</script>[/QUOTE]

@johnuauthorOct 02.2008 — #I have updated the time to 30 seconds.

I have updated the refresh.htm to:

<html>

<head>

<script>

function do_da_update()

{

var img=document.getElementsByTagName("img")

var P=window.parent.document

P.getElementById("oldfaith2").src=img[0].src

P.getElementById("mammothcam2").src=img[1].src

P.getElementById("electric-peak").src=img[2].src

P.getElementById("washburn").src=img[3].src

P.getElementById("yell").src=img[4].src

P.getElementById("mammoth").src=img[5].src

}

</script>

<script>

var P=window.parent.document

P.getElementById("oldfaith2").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/oldfaith2.jpg"

P.getElementById("mammothcam2").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/mammothcam2.jpg"

P.getElementById("electric-peak").src="http://www.coolworks.com/webcams/electric-peak.jpg"

P.getElementById("washburn").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/washburn.jpg"

P.getElementById("yell").src="http://www.nature.nps.gov/air/WebCams/parks/yellcam/yell.jpg"

P.getElementById("mammoth").src="http://ns.www.nps.gov.edgesuite.net/yell/photosmultimedia/images/webcams/mammoth.jpg"

</script>

</head>

<body>

onload="do_da_update()"

</body>

</html>

*****

Still no images are refreshing...???

@johnuauthorOct 02.2008 — #When you ran your test page, you were uploading or refreshing images on your server.

These images are not on my server. They are on the governments server back in Washington, DC.

So, in order to test this, we would have to refresh an image from an external server. That is why I have to have the full path to the images on the "refresh.htm" page.

I don't know if that helps, but it seems that we are close but no cigar...

@j0n0Oct 02.2008 — #OK

Firstly - you are setting up the code all wrong.

I am also aware that the (example page) images are on my server and not on the us goverment's - what i was attempting to demonstrate is that the javascript does what its supposed to.

THIS IS VERY IMPORTANT

Therefore: you should look in the source code of that test page (that works - despite the images) and copy the relevant code into your page. It follows that this will GUARANTEE that at least 2/3 of your problem will be solved. (Also remember to get the return page code out of the iframe).

Then all that is left - is for you to update those images (on the return page) by whatever means you normally use.

Do the above and reply (im being very patient arnt I?)

@johnuauthorOct 02.2008 — #Good Morning J0n0,

I have changed the code back to the way it was. It is trying to refresh the images. I will look at it and see if I can figure out why the webcam images are not updating.

Thank you for your time and help, you are being very patience!

@j0n0Oct 02.2008 — #I have decided to resovle this come-what-may.

The solution is at hand - the js works - the update part is you next challenge.

I will not abandon you...help is only worth a damn if its enduring

@johnuauthorOct 02.2008 — #Ok, thanks!

We are closer.

I now have the page picking up the images. When you first go to the page or refresh the page, the images are blank until it runs the script. The script runs and downloads all the pics just like clock work.

The only problem is, that tries to keep running the script but does not download any more pics. It is a one time shot.

I added the two meta tag for nocache and that did not help.

So, I am still working on it... check it when you have a chance and any thoughts?

@j0n0Oct 03.2008 — #Why are there no pictures when first load?

Your next problem is the images - the script is still running and loading images that are fed via refresh.htm.

However you would normally collect the new images - is the method you must employ on refresh.htm - if you can - try and change the names of the jpgs by using the time as a name olfaithful_2008_10_11_12_10_32.jpg - this will solve the cache issue.

@johnuauthorOct 03.2008 — #Because the way the webcam page is written to pull the images from the six different pages at 15 second intervals. So once the page hits the time, it pulls the images.

I will look at changing the names of the images.

Thanks!

@johnuauthorOct 04.2008 — #I have been looking for a script that will import and rename the images with no success...???

@j0n0Oct 04.2008 — #ok - it seems the thing is gonna keep expanding - but thats the way js sometimes goes - sigh

@j0n0Oct 04.2008 — #are you using -or have acces to - php, asp or any server-side language? If so, then this problem will be solved chop-chop else schlep-schlep

@johnuauthorOct 04.2008 — #I am not using any, but I am open to suggestions and can run them on my server...

@j0n0Oct 05.2008 — #well if you use php you could change the picture names and load them in the update page. See if you access to server side language...

@johnuauthorOct 05.2008 — #I have access to these server side apps:

Microsoft FrontPage 2002 Server-side Extensions

Miva Empresa

PHP 5.1.5 is the default version. PHP 3.x and PHP 4.x are also supported.

Perl 5.8.7, Python, and TcL scripting languages

Java Support

CGI Library

Database Solutions

MySQL 3.x

MySQL 4.x

MySQL 5.0.24 (the default version of MySQL installed when you execute the vinstall)

PostgreSQL 7.4.7

PostgreSQL 7.4.13

Multi-Media Applications

RealSystem Server Media streaming application

Macromedia Flash Support

Helix Streaming server

Is there something else that is needed?

@j0n0Oct 05.2008 — #OK i see taht this is going to be a problem as pics are from different servers - but i have another solution - which is simple....lightbulb

For each of your images on the normal page create an iframe of dimensions 40px larger than your images.

Create separate html pages for each pic like so

<html>

<head>

your update stuff goes here

</head>

<body style=margin:0;padding:0>

<table width=100% cellspacing=0 cellpadding=0>

<tr>

<td>

<center>

<img src=image goes here>

</center>

</td>

</tr>

</table>

</body>

</html>[/QUOTE]

Connect all your iframes to these pages.

1 - Now when the user loads the page.

2 - The iframes go and get the pictures on their pages.

3 - The images show and 30 seconds later - your meta refresh kicks and update the images.

Simple - should have thought of this one first ....

@johnuauthorOct 13.2008 — #Hello J0n0,

I have been on vacation visiting family and just got back. I have a page with the Old Faithful cam doing an update every 30 seconds:

http://www.the-great-outdoors.net/oldfaithfulpic.htm

I am not sure how to write an iframe for the image? Do I put the iframe in each table where the image loads up?

Thanks for your time and help!

@j0n0Oct 13.2008 — #OK - here what an iframe looks like - if u dont know what there about - heres a short about: they are like frames in framesets but can be placed on a page - like a window on another page.

heres the code

<iframe src=page.html marginwidth=0 marginheight=0 frameborder=0 style=height:600;width:800></iframe>
[/QUOTE]
ok - now create those pages i mentioned earlier and connected the src of each iframe to those pages

@johnuauthorOct 13.2008 — #I have the image pages online, the images are updating, but I have six frames at the top of the page that I need to hide...

http://www.the-great-outdoors.net/yellowstonewebcamswide2.htm

any suggestions?

@j0n0Oct 13.2008 — #dont hide the frames!!!!!

Place them where the original pictures where - at the same size of the images they show.

Ensure those iframes pages refresh the images as normal

@johnuauthorOct 13.2008 — #Can I place an iframe in a table so that I have the same page layout as I do now? I have been trying it with no success...

@johnuauthorOct 13.2008 — #Ok, I have all the images updating and the frames moved from the top to the proper placement on the website. I still have one empty iframe at the top...???

@johnuauthorOct 13.2008 — #Ok J0n0. I have the images updating and website looking normal.

Thanks for your time and help. I really appreciate it! You get a free tour of Yellowstone when you can make it!

http://www.the-great-outdoors.net/yellowstonewebcamswide2.htm

Refresh Images

44 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Refresh Images

44 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

44 Comments(s) _↴

Also in #JavaScript _↴