Merge pull request #19 from janpaepke/master

Fixed namespace bug and added current state

README.md

@@ -43,6 +43,14 @@ $(document).on({
 });
 ```
 
+Or bind both to the same callback and distinguish using the event variable.
+
+```js
+$(document).on('show hide', function (e) {
+	console.log('The page is now', e.type === 'show' ? 'visible' : 'hidden');
+});
+```
+
 The plugin will detect if the Page Visibility API is natively supported in the browser or not, and expose this information as a boolean (`true`/`false`) in `$.support.pageVisibility`:
 
 ```js
@@ -51,9 +59,15 @@ if ($.support.pageVisibility) {
 }
 ```
 
-## Notes
+If the Page Visibility API is supported the plugin will also store the current visibility state in `document.hidden`
 
-Both events live under the `visibility` namespace — so if you ever need to remove all event handlers added by this plugin, you could just use `$(document).off('.visibility');` (or `$(document).unbind('.visibility');` in jQuery 1.6 or older).
+```js
+if (!document.hidden) {
+  // Page is currently visible
+}
+```
+
+## Notes
 
 This plugin is not a Page Visibility [polyfill](http://mths.be/polyfills), as it doesn’t aim to mimic the standard API. It merely provides a simple way to use this functionality (or a fallback) in your jQuery code.
 
@@ -68,3 +82,4 @@ This plugin is available under the MIT license.
 ## Contributors
 
 [John-David Dalton](http://allyoucanleet.com/)
+[Jan Paepke](http://github.com/janpaepke)

bower.json

@@ -1,5 +1,5 @@
 {
     "name" : "jquery-visibility",
-    "version" : "1.0.7",
+    "version" : "1.0.8",
     "main" : "jquery-visibility.js"
 }

demo.html

@@ -9,13 +9,15 @@
 	}
 </style>
 <h1>Page Visibility plugin for jQuery</h1>
-<p>Detecting Page Visibility API support…
-<p><strong>Focus another tab or window</strong>, and watch the log below.
+<p>Detecting Page Visibility API support…</p>
+<p>The page was <strong id="start-state"></strong> when the page loaded.</p>
+<p><strong>Focus another tab or window</strong>, and watch the log below.</p>
 <pre></pre>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
 <script src="jquery-visibility.js"></script>
 <script>
 	$(function() {
+		$("#start-state").text(document.hidden ? "hidden" : "visible");
 
 		var $pre = $('pre');
 

jquery-visibility.js

@@ -1,24 +1,34 @@
-/*! http://mths.be/visibility v1.0.7 by @mathias | MIT license */
+/*! http://mths.be/visibility v1.0.8 by @mathias | MIT license */
 ;(function(window, document, $, undefined) {
+	"use strict";
 
 	var prefix;
 	var property;
 	// In Opera, `'onfocusin' in document == true`, hence the extra `hasFocus` check to detect IE-like behavior
-	var eventName = 'onfocusin' in document && 'hasFocus' in document
-		? 'focusin focusout'
-		: 'focus blur';
+	var eventName = 'onfocusin' in document && 'hasFocus' in document ?
+		'focusin focusout' :
+		'focus blur';
 	var prefixes = ['webkit', 'o', 'ms', 'moz', ''];
 	var $support = $.support;
 	var $event = $.event;
 
-	while ((prefix = prefixes.pop()) != undefined) {
+	while ((prefix = prefixes.pop()) !== undefined) {
 		property = (prefix ? prefix + 'H': 'h') + 'idden';
-		if ($support.pageVisibility = typeof document[property] == 'boolean') {
+		$support.pageVisibility = document[property] !== undefined;
+		if ($support.pageVisibility) {
 			eventName = prefix + 'visibilitychange';
 			break;
 		}
 	}
 
+	// normalize to and update document hidden property
+	function updateState() {
+		if (property !== 'hidden') {
+			document.hidden = $support.pageVisibility ? document[property] : undefined;
+		}
+	}
+	updateState();
+
 	$(/blur$/.test(eventName) ? window : document).on(eventName, function(event) {
 		var type = event.type;
 		var originalEvent = event.originalEvent;
@@ -37,19 +47,19 @@
 		// to check the `relatedTarget` property instead.
 		if (
 			!/^focus./.test(type) || (
-				toElement == undefined &&
-				originalEvent.fromElement == undefined &&
-				originalEvent.relatedTarget == undefined
+				toElement === undefined &&
+				originalEvent.fromElement === undefined &&
+				originalEvent.relatedTarget === undefined
 			)
 		) {
 			$event.trigger(
-				(
-					property && document[property] || /^(?:blur|focusout)$/.test(type)
-						? 'hide'
-						: 'show'
-				) + '.visibility'
+					property && document[property] || /^(?:blur|focusout)$/.test(type) ?
+						'hide' :
+						'show'
 			);
 		}
+		// and update the current state
+		updateState();
 	});
 
-}(this, document, jQuery));
+}(this, document, jQuery));