RunnerRick/._window-focus-blur-with-jquery.md

## ._window-focus-blur-with-jquery.md

      
    Raw
  

              ._window-focus-blur-with-jquery.md
            
          
    Demonstrates how to handle the window's focus and blur events with jQuery.

  
## .jshintrc
{
  "predef": [
  	"$"
  ]
}

## app.js
'use strict';

// Handle jQuery's `document ready` event.
$(document).ready(function () {
  // Define an event handler for the window's `focus` event.
  $(window).on('focus', function () {
    // Append this text to the `body` element.
    $('body').append('The window has focus.<br>');
  });
  // Define an event handler for the window's `blur` event.
  $(window).on('blur', function () {
    // Append this text to the `body` element.
    $('body').append('The window has lost focus.<br>');
  });
});

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Window Focus Example</title>
</head>
<body>
	<p>Click anywhere in the browser's viewport to trigger the <code>focus</code> event.</p>
	<p>Click on something other than the browser's viewport to trigger the <code>blur</code> event.</p>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="app.js"></script>
</body>

</html>
	'use strict';

	// Handle jQuery's `document ready` event.
	$(document).ready(function () {
	// Define an event handler for the window's `focus` event.
	$(window).on('focus', function () {
	// Append this text to the `body` element.
	$('body').append('The window has focus.<br>');
	});
	// Define an event handler for the window's `blur` event.
	$(window).on('blur', function () {
	// Append this text to the `body` element.
	$('body').append('The window has lost focus.<br>');
	});
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Window Focus Example</title>
	</head>
	<body>
	<p>Click anywhere in the browser's viewport to trigger the <code>focus</code> event.</p>
	<p>Click on something other than the browser's viewport to trigger the <code>blur</code> event.</p>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="app.js"></script>
	</body>

	</html>