Click to visit our sponsors!

homeGeek CultureWebstoreeCards!Forums!Joy of Tech!AY2K!webcam

  The Geek Culture Forums
  Ask a Geek!
  Javascript Reload Help

Post New Topic  Post A Reply
profile | register | preferences | faq | search

UBBFriend: Email This Page to Someone! next newest topic | next oldest topic
Author Topic:   Javascript Reload Help
Tyler Durden
Super Geek

Posts: 212
From: Fight Club Dallas
Registered: Jul 2002

posted August 19, 2002 00:53     Click Here to See the Profile for Tyler Durden   Click Here to Email Tyler Durden     Edit/Delete Message   Reply w/Quote
trying to make it so the page will reload in 5, 10, 15 second intervals as specified by the user... for webcam use obviously... am I overlooking something? I haven't touched javascript in a while and I left my book 200 miles away

edit: I want this because I change the interval on the image depending on what's on camera... if its on me, the update should be 5 seconds or whatever... if I'm gone and I'm watching stuff outside my window, it should be higher...

code:
<html>
<head>
<title>Webcam</title>
<style>
<!--
h1 {font-family: sans-serif;
color: #FFFFFF}

p {font-family : sans-serif;
color: #FFFFFF}
//-->
</style>
<script>
<!--

function rp(time)
{
var i=time*1000
location.reload(); // reloads the page automatically
setTimeout("rp(time)",i);
// runs the function again after specified time
}

//-->
</script>
</head>
<body bgcolor="#000000">
<center>
<h1>WEBCAM</h1>
<img src="image.jpg">

<p>This page will auto reload in:<br />
<a href="javascript:rp(5)">5</a> ::
<a href="javascript:rp(10)">10</a> ::
<a href="javascript:rp(15)">15</a>
</p>

</center>
</body>
</html>


-- Jack's Puzzled Mind

------------------
GASOLINE: For Youth on the Move

IP: Logged

uilleann
Highlie

Posts: 721
From: St Albans, Herts, England
Registered: Apr 2002

posted August 19, 2002 04:11     Click Here to See the Profile for uilleann   Click Here to Email uilleann     Edit/Delete Message   Reply w/Quote
setTimeout() works by storing the instruction provided by the first argument, and executing it after the amount of time in the second argument elapses. The problem in your code is that the variable time is an actual argument of the function, which does not exist outside of the function and is not known to the timer system.

The solution is to make the value of the time variable a part of the argument string, thus:
 setTimeout("rp(" + time + ");", i);
If time is 2, then setTimeout is instructed to call "rp(2);" after 2 seconds.

Further information on setTimeout can be found on WebMonkey.

I'm a bit suprised that the JavaScript keeps running even through a page reload. Furthermore, another issue that you might hit is image caching, where the image will refuse to reload at all thanks to the browser caching it. To force the image to always reload, try:

code:

<script>
function rp (time) {
var i = time * 1000;
var uniq = new Date();
uniq = uniq.getTime(); // Generate unique string of the current time
document.images.camImage.src = "cam.jpg?" + uniq;
// Gives the image a unique URL that will force a reload,
// e.g. cam.jpg?123456;
// For this to work, give the image a name="camImage" property.
setTimeout("rp(" + time + ");",i);
}
</script>

Alas, with slower connections, the image will spend more time in the reloading state than actually visible (it will keep being cleared as the new one starts to load). With some help from http://www.nickshanks.com/cams/ , you could try this manically weird code which, I hope, will leave the old image on the screen until the new one is downloaded, so that you actually get a chance to see each one, without having to resort to long refresh times just to see the image. Again, the image needs a name="camImage" property. Nick Shanks' site's actual code allows the image to be updated as fast as is possible with the current connection; neat code.

code:

<script>
newImage = new Image(); // Stores the image off-screen until loaded
newImage.onload = showImg; // Triggers the image to be shown when loaded, by calling the showImg function
var time = 0; // Save the time setting for later

function rp (pTime) {
time = pTime; // Store time in global variable
var uniq = new Date();
uniq = uniq.getTime(); // Generate time string
newImage.src = "cam.jpg?" + uniq; // generate unique URL
// The unique time URL parameter in the path ensures that the
// browser always goes for a new image and ignores the cached copy
}

function showImg () {
// Put the image on the page
document.images.camImage.src = newImage.src;
// Set the timer for the reload function, which will be time
// seconds after the image was last reloaded, so it won't fall
// behind on slow connections
setTimeout("rp(" + time + ");", time * 1000); //
}
</script>


Give us a shout if it doesn't work :) (I don't have an updating cam to hand to test it on)

- uilleann's manic coding madness

IP: Logged

Tyler Durden
Super Geek

Posts: 212
From: Fight Club Dallas
Registered: Jul 2002

posted August 19, 2002 13:56     Click Here to See the Profile for Tyler Durden   Click Here to Email Tyler Durden     Edit/Delete Message   Reply w/Quote
Thanks... attempting to implement now...

-- Jack's pico index.html

------------------
GASOLINE: For Youth on the Move

IP: Logged

Lex
Alpha Geek

Posts: 261
From: University of Florida
Registered: Jul 2001

posted August 20, 2002 11:53     Click Here to See the Profile for Lex   Click Here to Email Lex     Edit/Delete Message   Reply w/Quote
Wouldn't it be simpler to use the good old fashion meta refresh tag? Three versions of the page, one for each delay length, with links at the bottom to change which page you are viewing.

But I'm old fashion and anti-JS.

IP: Logged

Tyler Durden
Super Geek

Posts: 212
From: Fight Club Dallas
Registered: Jul 2002

posted August 20, 2002 18:22     Click Here to See the Profile for Tyler Durden   Click Here to Email Tyler Durden     Edit/Delete Message   Reply w/Quote
quote:
Originally posted by Lex:
Wouldn't it be simpler to use the good old fashion meta refresh tag? Three versions of the page, one for each delay length, with links at the bottom to change which page you are viewing.

I might actually do that... I can't seem to get it to refresh more than twice...

-- Jack's Last Resort

------------------
GASOLINE: For Youth on the Move

IP: Logged

uilleann
Highlie

Posts: 721
From: St Albans, Herts, England
Registered: Apr 2002

posted August 24, 2002 01:09     Click Here to See the Profile for uilleann   Click Here to Email uilleann     Edit/Delete Message   Reply w/Quote
Lex:
Why? Because it looks stupid every time the entire page reloads just to update the image :) Someone had me help him with a cam page, a while back, and I got it working with code similar to the above where it reloads the image and not the page.

It's actually very simple in the end, although it looks complicated.

- uilleann

IP: Logged

Lex
Alpha Geek

Posts: 261
From: University of Florida
Registered: Jul 2001

posted August 24, 2002 07:03     Click Here to See the Profile for Lex   Click Here to Email Lex     Edit/Delete Message   Reply w/Quote
quote:
Originally posted by uilleann:

It's actually very simple in the end, although it looks complicated.

- uilleann


Yeah, but it won't work with lynx... nevermind

IP: Logged

All times are Pacific Time

next newest topic | next oldest topic

Administrative Options: Close Topic | Archive/Move | Delete Topic
Post New Topic  Post A Reply
Hop to:

Contact Us | Geek Culture Home Page

© 2002 Geek Culture® All Rights Reserved.

Powered by Infopop www.infopop.com © 2000
Ultimate Bulletin Board 5.47e

homeGeek CultureWebstoreeCards!Forums!Joy of Tech!AY2K!webcam