Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Refreshing Just Images on Page 1

Status
Not open for further replies.
Einstein47

Einstein47

Programmer
Nov 29, 2001
737
US
Hey all,

I have a page where I display the traffic cameras on the highway for my commute. I wanted to see all the cameras at one time. The page works, however the images refresh every 2 min (120 sec).

So I added a count-down timer and when the timer hits zero I refresh the whole page. This works, but isn't very elegant.

I would like to just refresh the traffic camera images, but I don't know if that is even possible. Here is a link to my page and the code so you can see what I currently have. If you can offer any suggestions on how to just refresh the images, I would be very thankful.

Legacy Traffic Cams

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title> Legacy Parkway Cameras</title>
<script type="text/javascript">
    var timer = 120;
    var diff = 2;
    function countdown() {
        if (timer > 0) {
            document.getElementById('counter').innerHTML = timer+" seconds to reload.";
            timer -= diff;
            setTimeout('countdown()',diff*1000);
        }
        else {
            document.location.reload();
        }
    }
    function startTimer() {
        document.getElementById('counter').innerHTML = timer+" seconds to reload.";
        timer -= diff;
        setTimeout('countdown()',diff*1000);
    }

</script>
<style type="text/css">
    #main { width: 930px; }
    #counter {
        text-align: center;
        border: solid 1px red;
        border-bottom: 0;
        background-color: #eeccaa;
    }
    #container {
        height:640px;
        overflow: auto;
        border: solid 1px red;
    }
    .cell { text-align: center; float: left; margin: 2px; }

</style>

</head>
<body onload="startTimer()">
<h1>Legacy Parkway Cameras</h1>
<div id="main">
<div id="counter">&nbsp;</div>

<div id="container">
<div class="cell">200 N., Farmington<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14773.jpeg"[/URL] width= "300" height="225"><br></div>
<div class="cell">250 S., Farmington<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14772.jpeg"[/URL] width="300" height="225"> <br></div>
<div class="cell">Glover Lane, Farmington<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14771.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">1550 S., Farmington<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14770.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">1900 N., Centerville<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14769.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">800 N., Centerville<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14767.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">Parrish Lane, Centerville<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14765.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">Parrish Lane, Centerville<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14766.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">900 W., Centerville<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14764.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">2200 N., West Bountiful<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14763.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">Pages Lane, West Bountiful<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14762.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">1200 N., Woods Cross<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14761.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">400 N., Woods Cross<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14760.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">1900 S., Woods Cross<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14758.jpeg"[/URL] width="300" height="225"> <br></div>
<div class="cell">2425 S., Woods Cross<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14757.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">900 North, North Salt Lake<br><img src=
    "[URL unfurl="true"]http://www.utahcommuterlink.com/1_devices/aux14756.jpeg"[/URL] width="300" height="225"><br> </div>
<div class="cell">500 North, North Salt Lake<br><img src=
    "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14755.jpeg"[/URL] width="300" height="225"><br></div>
<div class="cell">Center St., North Salt Lake<br><img src=
    "[URL unfurl="true"]http://www.utahcommuterlink.com/1_devices/aux14754.jpeg"[/URL] width="300" height="225"><br></div>
</div>
</div>

</body>
</html>


Any ideas would be appreciated.

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“
 
Sort by date Sort by votes
It is definitely possible. One important question I have is: Do the names of the images change at all?
 
Upvote 0 Downvote
No the image names are fixed - I could set up an ID attribute on each <IMG> tag if that would be easier. But since there are no other images on this page, I was thinking of setting up a loop for all IMG elements in the DOM, but I have NO CLUE how to do that.

Or am I barking up the wrong tree?

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“
 
Upvote 0 Downvote
I think I got the code to work, but I am not able to test it. The images have not changed in over 6 mins. Do you know if there is an issue with this?
 
Upvote 0 Downvote
I don't control these images - let me check and see if their server is either glitching or caching the images.

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“
 
Upvote 0 Downvote
All the images I see have a timestamp of 12:35 pm - is that what you see too?

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“
 
Upvote 0 Downvote
I went to the "official" site commuterlink.utah.gov and the images displaying there are also of the 12:35 pm timeframe.

So, please let me know what you came up with - I'm intrigued.

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“
 
Upvote 0 Downvote
Try this:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
    <title> Legacy Parkway Cameras</title>
    <style type="text/css">
		#main { width: 930px; }
		#counter {
			text-align: center;
			border: solid 1px red;
			border-bottom: 0;
			background-color: #eeccaa;
		}
		#container {
			height:640px;
			overflow: auto;
			border: solid 1px red;
		}
		.cell { text-align: center; float: left; margin: 2px; }
	
	</style>
</head>
<body onload="startTimer()">
<h1>Legacy Parkway Cameras</h1>
<div id="main">
<div id="counter">&nbsp;</div>

<div id="container">
    <div class="cell">200 N., Farmington<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14773.jpeg"[/URL] width= "300" height="225"><br></div>
    <div class="cell">250 S., Farmington<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14772.jpeg"[/URL] width="300" height="225"> <br></div>
    <div class="cell">Glover Lane, Farmington<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14771.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">1550 S., Farmington<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14770.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">1900 N., Centerville<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14769.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">800 N., Centerville<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14767.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">Parrish Lane, Centerville<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14765.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">Parrish Lane, Centerville<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14766.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">900 W., Centerville<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14764.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">2200 N., West Bountiful<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14763.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">Pages Lane, West Bountiful<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14762.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">1200 N., Woods Cross<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14761.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">400 N., Woods Cross<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14760.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">1900 S., Woods Cross<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14758.jpeg"[/URL] width="300" height="225"> <br></div>
    <div class="cell">2425 S., Woods Cross<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14757.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">900 North, North Salt Lake<br><img src=
        "[URL unfurl="true"]http://www.utahcommuterlink.com/1_devices/aux14756.jpeg"[/URL] width="300" height="225"><br> </div>
    <div class="cell">500 North, North Salt Lake<br><img src=
        "[URL unfurl="true"]http://commuterlink.utah.gov/1_devices/aux14755.jpeg"[/URL] width="300" height="225"><br></div>
    <div class="cell">Center St., North Salt Lake<br><img src=
        "[URL unfurl="true"]http://www.utahcommuterlink.com/1_devices/aux14754.jpeg"[/URL] width="300" height="225"><br></div>
    </div>
</div>

<script type="text/javascript">
	function refreshImages() {
		//alert("Refreshing images");
		var images = document.images;
		
		for(var i=0; i< images.length; i++) {
			images[i].src = images[i].src + "?";
		}
	}

    var timer = 120;
    var diff = 2;
    function countdown() {
        if (timer > 0) {
            document.getElementById('counter').innerHTML = timer+" seconds to reload.";
            timer -= diff;
            setTimeout('countdown()',diff*1000);
        }
        else {
			refreshImages();
			timer = 120;
			startTimer();
        }
    }
    function startTimer() {
        document.getElementById('counter').innerHTML = timer+" seconds to reload.";
        timer -= diff;
        setTimeout('countdown()',diff*1000);
    }

</script>

</body>
</html>
 
Upvote 0 Downvote
That did it - thank you very muchly!!!!! [auto]

Einstein47 (Starbase47.com)
“PI is like love - simple, natural, irrational, endless, and very important“
 
Upvote 0 Downvote
Glad to help! :)

Also, as an observation, the images seem to be refreshed every 4 minutes (240 seconds) instead of every 2 mins (120 seconds).
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
374
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
274
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
284
JScannell
JScannell
penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
146
penguinspeaks
penguinspeaks
chillay
  • Locked
  • Question
Add Control + F feature to a Web Page
Replies
3
Views
120
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top