Results 1 to 5 of 5

Thread: JS screensaver / sleep mode for website?

  1. #1
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default JS screensaver / sleep mode for website?

    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
    Last edited by davelf; 07-27-2011 at 08:28 AM.
    _____________________

    David Demetrius // davejob
    _____________________

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 07-26-2011 at 06:41 AM. Reason: annotate
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    davelf (07-26-2011)

  4. #3
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    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
    _____________________

    David Demetrius // davejob
    _____________________

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    davelf (07-27-2011)

  7. #5
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    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.
    _____________________

    David Demetrius // davejob
    _____________________

Bookmarks

Posting Permissions

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