JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body>
<header class="navbar navbar-default navbar-fixed-top">
<div>
<span>This is a sticky header</span>
<button id="fsBtn" type="button" class="btn btn-default">Toggle fullscreen</button>
</div>
</header>
<main>
<p>Main content goes here:</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...
CSS
html {
background: #eee;
}
.navbar {
height: 50px;
background: #555;
color: #fff;
}
main {
padding: 60px 10px;
}
.navbar div, main {
max-width: 400px;
margin: 0 auto;
}
JavaScript
var m_requestFS = ["requestFullScreen", "mozRequestFullScreen", "webkitRequestFullscreen", "msRequestFullscreen"],
m_cancelFS = ["cancelFullScreen", "exitFullscreen", "mozCancelFullScreen", "webkitExitFullscreen", "msExitFullscreen"],
m_elementFS = ["fullscreenElement", "mozFullScreen", "mozFullScreenElement", "webkitIsFullScreen", "webkitFullscreenElement", "msFullscreenElement"],
/**
*
* @param element
*/
launch = function (element) {
m_requestFS.map(function (request) {
if (element[request]) {
console.log(request);
element[request]();
}
});
},
/**
*
*/
exit = function () {
m_cancelFS.map(function (cancel) {
if (document[cancel]) {
document[cancel]();
}
});
},
/**
*
* @returns {Boolean}
*/
isEnabled = function () {
return m_elementFS.some(function (x) {
return document[x];
});
},
/**
*
*/
all = function () {
launch(document.documentElement);
},
/**
*
*/
toggleAll = function () {
console.log("toggling fullscreen mode");
isEnabled() ? exit() : all();
};
//
document.getElementById("fsBtn").onclick = toggleAll;