[RESOLVED] Execute Javascript Web Screensaver After Inactivity

This site is best viewed in a modern browser with JavaScript enabled.

[RESOLVED] Execute Javascript Web Screensaver After Inactivity

itguy

Hello all,

At my workplace we have a kiosk that runs a web page full screen that is interactive with a touch screen. I need to implement a Javascript screensaver but can't work out how to execute the screensaver after the web page is inactive for a period of time.
An example of the effect i'm using can be found here

http://adventuresinsoftware.com/kenburns.html (explanation and js/css code at http://adventuresinsoftware.com/blog/?p=209)

This runs perfectly and looks great but isn't coded as a "screensaver" meant to display while idle, so I need to figure that part out.

Basically I have an html file that runs and plays flash content but would like it to call upon a javascript file upon inactivity and then go back to normal when the user does anything... is this possible/easy enough?

Thanks in advance for any help...pretty new to Javascript and my attempts are not working out! :/

ReFreezed

One solution is to use [FONT=courier new]setTimeout[/FONT] to start the screen saver after a while, let's say 5 minutes, and if the user touches the screen before the timeout has ended you cancel and restart the timeout. You can listen for the mousemove event on the window to find out when the pointer moves (which I assume it does when the touch screen is touched).

However, I'm not sure how a Flash container affects events on the webpage. The mousemove event might not fire when pointing over the container - I can't answer that. :/

vwphillips

modify two functions

function startSlideshow(images, backDivName, frontDivName){
	imageList = images;

backDiv = document.getElementById(backDivName);
frontDiv = document.getElementById(frontDivName);
 [COLOR="#FF0000"]frontDiv.style.visibility=backDiv.style.visibility='hidden';
 // step();
}[/COLOR]

function stepTail(animationIndex)
{
	if (frontBurns)
	{
		var time = animationIndex / ((secondsPerImage + secondsPerFade) * stepsPerSecond);
		frontBurns.apply(frontImage, time);
	}

if (backBurns)
{
	var time = (animationIndex + secondsPerImage * stepsPerSecond) / ((secondsPerImage + secondsPerFade) * stepsPerSecond);
	if (time > 1)
		backBurns = 0;
	else
		backBurns.apply(backImage, time);
}

++timeIndex;

[COLOR="#FF0000"]stepTail.to[/COLOR]=window.setTimeout(step, 1000 / stepsPerSecond);
}

the screen saver

function ScreenSaver(){
 frontDiv.style.visibility=backDiv.style.visibility='hidden';
 clearTimeout(stepTail.to);
 clearTimeout(ScreenSaver.to);
 ScreenSaver.to=setTimeout(function(){
  step();
  frontDiv.style.visibility=backDiv.style.visibility='visible';
 },2000); // change the time as required
}

document.onmousemove=ScreenSaver

itguy

Thanks for the replies! And vwphillips, those changes worked perfectly I appreciate the help. Problem solved.