JS screensaver / sleep mode for website?

**davelf** · 07-26-2011, 05:00 AM

I need a screensaver / sleep mode javascript/jquery for my website.
So an image will show in a period time that i can set.
But after the user click on something or hover to an area the image will hide.

thanks in advanced

**jscheuer1** · 07-26-2011, 06:11 AM

Something like:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Sleep Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var $sleeper = $('<div style="display: none; width: 100%; height: 100%; background-color: black; position: fixed; top: 0; left: 0;">' +
		'<img src="imSleeping.jpg" style="width: 100%; height: 100%; display: block;" width="100%" height="100%" alt="Click or Press Key to Return Image" title="Click or Press Key to Return"></div>')
		.appendTo(document.body), timer;
	if($sleeper.offset().top){
		$sleeper.css({position: 'absolute'});
	}
	$(document).bind('mousemove click keydown', function(){
		clearTimeout(timer);
		preparetosleep();
		if($sleeper.css('display') !== 'none'){
			$sleeper.stop(true, true).hide('slow');
			$('html, body').css({width: '', height: '', margin: '', padding: ''});
		}
	});
	function preparetosleep(){
		timer = setTimeout(function(){
			$('html, body').css({width: '100%', height: '100%', margin: 0, padding: 0});
			$sleeper.stop(true, true).show('slow');
		}, 6000);
	}
	preparetosleep();
});
</script>
</head>
<body>
Hola!
</body>
</html>

Set the image (highlighted and green) and the timer interval (highlighted and red) as you desire.

**davelf** · 07-26-2011, 08:43 AM

thank you so much John.
About the effect, it start from left corner to right.
How to make it start from right corner to left.

thanks

**jscheuer1** · 07-26-2011, 04:18 PM

Well, I was playing with making this more fully backward compatible to IE 6 (no fixed position support, on longer/wider pages made the image larger than the window). I discovered that if you refresh one of these longer pages when it's already been scrolled, all browsers convert to absolute positioning on:

Code:

	if($sleeper.offset().top){
		$sleeper.css({position: 'absolute'});
	}

I used that because I wanted feature detection, not browser detection. But I've decided to go with browser detection. And found that setting the page overflow (html and body tags) to hidden during the effect helped IE 6 and looked good in others if the page had scrollbars. This begged a way to save the scroll state if any, so it could be restored after the effect.

And to answer your question, change the initial left: 0; for the $sleeper div to right: 0;

Here's the latest with the substitution for top right appearance (script only):

Code:

<script type="text/javascript">
jQuery(function($){
	var $sleeper = $('<div style="display: none; width: 100%; height: 100%; background-color: black; position: fixed; top: 0; right: 0;">' +
		'<img src="imSleeping.jpg" style="width: 100%; height: 100%; display: block;" width="100%" height="100%" alt="Click or Press Key to Return Image" title="Click or Press Key to Return"></div>')
		.appendTo(document.body), timer, nofixed, scroll;
		/*@cc_on @*/
		/*@if(@_jscript_version >= 5)
			if($.browser.version < 7){
				$sleeper.css({position: 'absolute'});
				nofixed = true;
			}
		@end @*/
	$(document).bind('mousemove click keydown', function(){
		clearTimeout(timer);
		preparetosleep();
		if($sleeper.css('display') !== 'none'){
			$sleeper.stop(true, true).hide('slow', function(){
				if(scroll = $sleeper.data('scroll')){$(window).scrollTop(scroll[1]); $(window).scrollLeft(scroll[0]);}
			});
			$('html, body').css({width: '', height: '', margin: '', padding: '', overflow: ''});
		}
	});
	function preparetosleep(){
		timer = setTimeout(function(){
			$sleeper.data('scroll', [$(window).scrollLeft(), $(window).scrollTop()]);
			$('html, body').css({width: nofixed? $(window).width() : '100%', height: nofixed? $(window).height(): '100%', margin: 0, padding: 0, overflow: 'hidden'});
			$sleeper.stop(true, true).show('slow');
		}, 6000);
	}
	preparetosleep();
});
</script>

**davelf** · 07-27-2011, 03:05 AM

thank you so much john,

About the IE.6 compatibility, i have ever ask you about this question, at the other post.
And i follow your suggestion, that i need to made an agreement with the client "client will not ask me to make website for IE.6 compatibility" and they agree.
So IE.6 not a considered anymore

thank you. Great script.

Thread: JS screensaver / sleep mode for website?

Thread Tools

Search Thread

JS screensaver / sleep mode for website?

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions