Monthly Archives: July 2011

Energy Saver in Web Page

Have you imagine if your web page can do some kind energy saver like screen saver in your computer desktop? Do you want to make it happen? Then lets do it togather.

First download required file jquery.js and jquery.idle-timer.js.

Second, Copy the bellow script into your head tag in html file.
<script type="text/javascript" src="[url]/jquery.js"></script>
<script type="text/javascript" src="[url]/jquery.idle-timer.js"></script>

<script type="text/javascript">
(function($){
    var timeout = 10000;//ten second idle. change this var. 1000 means 1 sec.
    $(document).bind("idle.idleTimer", function(){
		position_popup(150,30);
		document.getElementById('popup_area_bg').style.display = 'block';document.getElementById('popup_area').style.display = 'block';
    });
    $(document).bind("active.idleTimer", function(){
		document.getElementById('popup_area_bg').style.display = 'none';document.getElementById('popup_area').style.display = 'none';
    });
    $.idleTimer(timeout);
    $('#timeout').text(timeout/1000);
})(jQuery);

function position_popup(width,height){
height = parseInt(height);
	if(!window.innerWidth){
		if(!document.documentElement.offsetWidth){
			if(!document.body.offsetWidth){
				win_width = 1000;
			}else{
				win_width = document.body.offsetWidth;
			}
		}else{
			win_width = document.documentElement.offsetWidth;
		}
		document.getElementById('popup_area').style.position ='absolute';//need only once
		document.getElementById('popup_area_bg').style.display ='none';//need only once
	}else{
		win_width = window.innerWidth;
	}
	if(!window.innerHeight){
		if(!document.documentElement.offsetHeight){
			if(!document.body.offsetHeight){
				win_height = 1000;
			}else{
				win_height = document.body.offsetHeight;
			}
		}else{
			win_height = document.documentElement.offsetHeight;
		}
		document.getElementById('popup_area').style.top ='100px';
	}else{
		win_height = window.innerHeight;
		inner_top = (win_height - height-25)/2;if(inner_top < 0)inner_top=0;
		document.getElementById('popup_area').style.top = inner_top+'px';
	}
	inner_left = (win_width - width-25)/2;if(inner_left < 0)inner_left=0;
	document.getElementById('popup_area').style.left = inner_left+'px';
	document.getElementById('popup_area').style.width = width;
	document.getElementById('popup_area').style.height = height;
}
</script>

<style type="text/css">
.inner_popup{
	display: none;
	position:fixed;
	text-align:center;
	z-index:1002;
	padding:10px;
	width: 150px;
	height: 30px;
	border: 2px solid;
	border-color:#CCCCCC;
	background-color: white;
	vertical-align:middle;
}
.outer_popup{
	display: none;
	position:fixed ;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.70;
	filter: alpha(opacity=80);
	text-align:center;
}
</style>

Third, copy bellow script into body tag in your html file.

<div class="outer_popup" id="popup_area_bg">
</div>
<div class="inner_popup" id="popup_area">
<div style="float:left; width:100%;" align="center">
	Idle Time
</div>
</div>

By implementing energy saver in your web page, I hope, your page can save energy even only in a small amount. The more your page visited by other people, the more you help them to save energy.

Thanks to Paul Irish for jQuery idleTimer plugin so that we can make our Energy Saver in Web Page.

Refference: http://paulirish.com/2009/jquery-idletimer-plugin/

http://septiadi.com/2011/07/11/energy-saver-in-web-page/

 

 

Advertisements