www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Execute Javascript Web Screensaver After Inactivity

  1. #1
    Join Date
    Jan 2013
    Posts
    2

    resolved [RESOLVED] Execute Javascript Web Screensaver After Inactivity

    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! :/

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    One solution is to use setTimeout 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. :/
    New to web development or in need of a good reference? Check out the Mozilla Developer Network or W3Schools.

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,684
    modify two functions

    Code:
    function startSlideshow(images, backDivName, frontDivName){
    	imageList = images;
    
    	backDiv = document.getElementById(backDivName);
    	frontDiv = document.getElementById(frontDivName);
     frontDiv.style.visibility=backDiv.style.visibility='hidden';
     // step();
    }
    
    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;
    
    	stepTail.to=window.setTimeout(step, 1000 / stepsPerSecond);
    }
    the screen saver

    Code:
    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
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Jan 2013
    Posts
    2
    Thanks for the replies! And vwphillips, those changes worked perfectly I appreciate the help. Problem solved.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles