allcaps/fullscreen.html

## fullscreen.html
<!doctype html>
<html>
<head>
  <style>
    #container {
      border: 10px solid red;
      padding: 10px;
    }

    #container.fullscreen {
      height: 100%;
      width: 98%;
      margin: 0 20px;
      background-color: white;
      z-index: 2;
    }

    #container.fullviewport {
      background-color: white;
      z-index: 2;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript">

    // Document load and own scope.
    $(function() {

        // Modern browsers and IE with ActiveX enabled (ActiveX is disabled by default).
        function cancelFullScreen(el) {
          document.getElementById('container').removeAttribute("class"); // Remove the fullscreen class. Note this removes ALL classes.
          var requestMethod = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullscreen;
          if (requestMethod) { // cancel full screen.
            requestMethod.call(el);
          } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
              wscript.SendKeys("{F11}");
            }
          }
        }

        function requestFullScreen(element) {
            element.className = 'fullscreen'; // Add fullscreen class. Note: this removes other classes.

            // Supports most browsers and their versions.
            var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        function toggleFullScreen() {
          var elem = document.getElementById('container');
          var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
          if (isInFullScreen) {
            cancelFullScreen(document);
          } else {
            requestFullScreen(elem);
          }
          return false;
        }

        // Simple CSS based fullviewport.
        $('#button').click(function (event) {
          event.preventDefault();
          toggleFullScreen();
        });

//   https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Browser_compatibility
//   Only modern browsers.
//
//         Make the fullscreen button tigger the js
//              var a = document.getElementById("button");
//              a.onclick = function(e) {
//                e.preventDefault();
//                console.log('clicked');
//                toggleFull();
//                return false;
//              }
//
//        function toggleFullScreen() {
//          if (!document.fullscreenElement &&    // alternative standard method
//              !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
//            if (document.documentElement.requestFullscreen) {
//              document.documentElement.requestFullscreen();
//            } else if (document.documentElement.msRequestFullscreen) {
//              document.documentElement.msRequestFullscreen();
//            } else if (document.documentElement.mozRequestFullScreen) {
//              document.documentElement.mozRequestFullScreen();
//            } else if (document.documentElement.webkitRequestFullscreen) {
//              document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
//            }
//          } else {
//            if (document.exitFullscreen) {
//              document.exitFullscreen();
//            } else if (document.msExitFullscreen) {
//              document.msExitFullscreen();
//            } else if (document.mozCancelFullScreen) {
//              document.mozCancelFullScreen();
//            } else if (document.webkitExitFullscreen) {
//              document.webkitExitFullscreen();
//            }
//          }
//        }


        // Simple CSS based fullviewport.
        $('#button2').click(function (event) {
          event.preventDefault();
          var container = $('#container');
          if (container.hasClass('fullviewport')) {
            container.removeClass('fullviewport');
          } else {
            container.addClass('fullviewport');
          }
        });

    });
  </script>
</head>
<body>

<h1>Content fullscreen example</h1>

<p>For both modern browsers (html5) and older IE (ActiveX) fullscreen.</p>

<div id="container">
  <p>
    We want the stuff in this container to become fullscreen.
  </p>
  <p>
    <a id="button" href="some_fallback_for_peeps_without_js.html">
      Toggle true fullscreen
    </a>
  </p>
  <p>
    <a id="button2" href="some_fallback_for_peeps_without_js.html">
      Toggle viewport 'fullscreen'
    </a>
  </p>

</div>
<p>
  Id's and classes in this example are hard coded. We should pass them along.
</p>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<style>
	#container {
	border: 10px solid red;
	padding: 10px;
	}

	#container.fullscreen {
	height: 100%;
	width: 98%;
	margin: 0 20px;
	background-color: white;
	z-index: 2;
	}

	#container.fullviewport {
	background-color: white;
	z-index: 2;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript">

	// Document load and own scope.
	$(function() {

	// Modern browsers and IE with ActiveX enabled (ActiveX is disabled by default).
	function cancelFullScreen(el) {
	document.getElementById('container').removeAttribute("class"); // Remove the fullscreen class. Note this removes ALL classes.
	var requestMethod = el.cancelFullScreen \|\| el.webkitCancelFullScreen \|\| el.mozCancelFullScreen \|\| el.exitFullscreen;
	if (requestMethod) { // cancel full screen.
	requestMethod.call(el);
	} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
	var wscript = new ActiveXObject("WScript.Shell");
	if (wscript !== null) {
	wscript.SendKeys("{F11}");
	}
	}
	}

	function requestFullScreen(element) {
	element.className = 'fullscreen'; // Add fullscreen class. Note: this removes other classes.

	// Supports most browsers and their versions.
	var requestMethod = element.requestFullScreen \|\| element.webkitRequestFullScreen \|\| element.mozRequestFullScreen \|\| element.msRequestFullscreen;

	if (requestMethod) { // Native full screen.
	requestMethod.call(element);
	} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
	var wscript = new ActiveXObject("WScript.Shell");
	if (wscript !== null) {
	wscript.SendKeys("{F11}");
	}
	}
	}

	function toggleFullScreen() {
	var elem = document.getElementById('container');
	var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) \|\| (document.mozFullScreen \|\| document.webkitIsFullScreen);
	if (isInFullScreen) {
	cancelFullScreen(document);
	} else {
	requestFullScreen(elem);
	}
	return false;
	}

	// Simple CSS based fullviewport.
	$('#button').click(function (event) {
	event.preventDefault();
	toggleFullScreen();
	});

	// https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Browser_compatibility
	// Only modern browsers.
	//
	// Make the fullscreen button tigger the js
	// var a = document.getElementById("button");
	// a.onclick = function(e) {
	// e.preventDefault();
	// console.log('clicked');
	// toggleFull();
	// return false;
	// }
	//
	// function toggleFullScreen() {
	// if (!document.fullscreenElement && // alternative standard method
	// !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
	// if (document.documentElement.requestFullscreen) {
	// document.documentElement.requestFullscreen();
	// } else if (document.documentElement.msRequestFullscreen) {
	// document.documentElement.msRequestFullscreen();
	// } else if (document.documentElement.mozRequestFullScreen) {
	// document.documentElement.mozRequestFullScreen();
	// } else if (document.documentElement.webkitRequestFullscreen) {
	// document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
	// }
	// } else {
	// if (document.exitFullscreen) {
	// document.exitFullscreen();
	// } else if (document.msExitFullscreen) {
	// document.msExitFullscreen();
	// } else if (document.mozCancelFullScreen) {
	// document.mozCancelFullScreen();
	// } else if (document.webkitExitFullscreen) {
	// document.webkitExitFullscreen();
	// }
	// }
	// }


	// Simple CSS based fullviewport.
	$('#button2').click(function (event) {
	event.preventDefault();
	var container = $('#container');
	if (container.hasClass('fullviewport')) {
	container.removeClass('fullviewport');
	} else {
	container.addClass('fullviewport');
	}
	});

	});
	</script>
	</head>
	<body>

	<h1>Content fullscreen example</h1>

	<p>For both modern browsers (html5) and older IE (ActiveX) fullscreen.</p>

	<div id="container">
	<p>
	We want the stuff in this container to become fullscreen.
	</p>
	<p>
	<a id="button" href="some_fallback_for_peeps_without_js.html">
	Toggle true fullscreen
	</a>
	</p>
	<p>
	<a id="button2" href="some_fallback_for_peeps_without_js.html">
	Toggle viewport 'fullscreen'
	</a>
	</p>

	</div>
	<p>
	Id's and classes in this example are hard coded. We should pass them along.
	</p>

	</body>
	</html>