liluxdev/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Javascript code that calculates how much active time is spent on a tab and takes into account changing tabs, switching windows, or leaving the page.
Demo here http://bl.ocks.org/d/4393523/

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Time Spent on Page</title>
    <style type="text/css">

        body {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          width: 400px;
          margin: 50px auto;
          color: #444;
        }

        h1 { font-weight: 400; }
        li { margin: 1em 0; font-weight:300; }

    </style>
</head>
<body>

    <h1>Time Spent on Page</h1>
    <small>Change tabs, switch windows, or leave the page and the active amount of time on this page is logged</small>
    <a href="https://gist.github.com/4393523" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

    <script src="timeSpentOnPage.js"></script>

</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## timeSpentOnPage.js
var hidden, state, visibilityChange,
  _this = this;

if (document.hidden != null) {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
  state = "visibilityState";
} else if (document.mozHidden != null) {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
  state = "mozVisibilityState";
} else if (document.msHidden != null) {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
  state = "msVisibilityState";
} else if (document.webkitHidden != null) {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
  state = "webkitVisibilityState";
}

this.d = new Date();
this.new_d = new Date();

// Calculates Time Spent on page upon switching windows

setInterval((function() {
  if (document.hasFocus() === false) {
    _this.new_d = new Date();
    var time_spent = Math.round((_this.new_d - _this.d) / 1000);
    doSomething("Switched Window", time_spent);
    _this.d = new Date();
  }
}), 200);

// Calculates Time Spent on page upon leaving/closing page

window.onunload = function() {
  _this.new_d = new Date();
  var time_spent = Math.round((_this.new_d - _this.d) / 1000);
  doSomething("Left Page", time_spent);
};

// Calculates Time Spent on page upon unfocusing tab
// http://davidwalsh.name/page-visibility

document.addEventListener(visibilityChange, (function(e) {
  if (document[state] === 'visible') {
    _this.d = new Date();
  } else if (document[hidden]) {
    _this.new_d = new Date();
    var time_spent = Math.round((_this.new_d - _this.d) / 1000);
    doSomething("Changed Tab", time_spent);
  }
}), false);

// Function that does something

var doSomething = function(message, time_spent) {
  if (time_spent >= 1) {
    var text = "["+message+"] "+time_spent+" seconds"
    var item = document.createElement("li");
    item.innerHTML = text;
    document.body.appendChild(item);
    console.log(text);
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Time Spent on Page</title>
	<style type="text/css">

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 400px;
	margin: 50px auto;
	color: #444;
	}

	h1 { font-weight: 400; }
	li { margin: 1em 0; font-weight:300; }

	</style>
	</head>
	<body>

	<h1>Time Spent on Page</h1>
	<small>Change tabs, switch windows, or leave the page and the active amount of time on this page is logged</small>
	<a href="https://gist.github.com/4393523" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

	<script src="timeSpentOnPage.js"></script>

	</body>
	</html>
	var hidden, state, visibilityChange,
	_this = this;

	if (document.hidden != null) {
	hidden = "hidden";
	visibilityChange = "visibilitychange";
	state = "visibilityState";
	} else if (document.mozHidden != null) {
	hidden = "mozHidden";
	visibilityChange = "mozvisibilitychange";
	state = "mozVisibilityState";
	} else if (document.msHidden != null) {
	hidden = "msHidden";
	visibilityChange = "msvisibilitychange";
	state = "msVisibilityState";
	} else if (document.webkitHidden != null) {
	hidden = "webkitHidden";
	visibilityChange = "webkitvisibilitychange";
	state = "webkitVisibilityState";
	}

	this.d = new Date();
	this.new_d = new Date();

	// Calculates Time Spent on page upon switching windows

	setInterval((function() {
	if (document.hasFocus() === false) {
	_this.new_d = new Date();
	var time_spent = Math.round((_this.new_d - _this.d) / 1000);
	doSomething("Switched Window", time_spent);
	_this.d = new Date();
	}
	}), 200);

	// Calculates Time Spent on page upon leaving/closing page

	window.onunload = function() {
	_this.new_d = new Date();
	var time_spent = Math.round((_this.new_d - _this.d) / 1000);
	doSomething("Left Page", time_spent);
	};

	// Calculates Time Spent on page upon unfocusing tab
	// http://davidwalsh.name/page-visibility

	document.addEventListener(visibilityChange, (function(e) {
	if (document[state] === 'visible') {
	_this.d = new Date();
	} else if (document[hidden]) {
	_this.new_d = new Date();
	var time_spent = Math.round((_this.new_d - _this.d) / 1000);
	doSomething("Changed Tab", time_spent);
	}
	}), false);

	// Function that does something

	var doSomething = function(message, time_spent) {
	if (time_spent >= 1) {
	var text = "["+message+"] "+time_spent+" seconds"
	var item = document.createElement("li");
	item.innerHTML = text;
	document.body.appendChild(item);
	console.log(text);
	}
	}