Skip to content

Instantly share code, notes, and snippets.

@Gr8Gatsby
Last active August 29, 2015 14:24
Show Gist options
  • Save Gr8Gatsby/884d724aeab1ca8bc768 to your computer and use it in GitHub Desktop.
Save Gr8Gatsby/884d724aeab1ca8bc768 to your computer and use it in GitHub Desktop.
This is showing how to use tryEnterFullScreen() from Windows.UI.ViewManagement.ApplicationView.getForCurrentView();
.hide {
display:none;
}
.show {
display:block;
}
.message {
font-family:'Segoe UI', Arial, Helvetica, sans-serif;
text-align:center;
border: 1px solid gray;
padding: 15px;
margin:5px;
color:white;
background-color: rebeccapurple;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Fullscreen</title>
<!-- Fullscreen references -->
<link href="default.css" rel="stylesheet" />
<script src="default.js"></script>
</head>
<body>
<button id="btnGoFullScreen">Go full screen</button>
<div id="fullScreenMessage" class="hide message">You are fullscreen, press ESC to exit</div>
</body>
</html>
// create
(function () {
"use strict";
var fs = Windows.UI.ViewManagement.ApplicationView.getForCurrentView();
addEventListener('load', function () {
var btnFullScreen = document.getElementById('btnGoFullScreen');
document.querySelector('body').addEventListener('keydown', function (e) {
if (e.keyCode === 27 /*ESC key*/) {
fs.exitFullScreenMode();
hideFullScreenMessage();
}
});
btnFullScreen.addEventListener('click', function () {
fs.tryEnterFullScreenMode();
showFullScreenMessage();
});
document.addEventListener('fullscreenchange', function (e) {
fs.tryEnterFullScreenMode();
showFullScreenMessage();
});
});
function showFullScreenMessage() {
var msgDiv = document.getElementById('fullScreenMessage');
msgDiv.className = 'show message';
}
function hideFullScreenMessage() {
var msgDiv = document.getElementById('fullScreenMessage');
msgDiv.className = 'hide message';
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment